如何在在Vue3中使⽤markdown编辑器组件⽬录
安装
引⼊组件
基础⽤法
保存后的 markdown 或者 html ⽂本如何渲染在页⾯上？
安装
# 使⽤ npm
npm i @kangc/v-md-editor@next -S
# 使⽤yarn
yarn add @kangc/v-md-editor@next
引⼊组件
import { creatApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
VMdEditor.use(githubTheme);
const app = creatApp(/*...*/);
app.use(VMdEditor);
基础⽤法
<template>
<v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
const text = ref('');
return {
text
}
}
}
</script>
保存后的 markdown 或者 html ⽂本如何渲染在页⾯上？
1.渲染保存后的 markdown ⽂本
⽅式⼀：如果你的项⽬中引⼊了编辑器。你可以直接使⽤编辑器的预览模式来渲染。例如
<template>
<v-md-editor :value="markdown" mode="preview"></v-md-editor>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
const markdown = ref('');
return {
markdown
}
}
}
</script>
⽅式⼆：如果你的项⽬不需要编辑功能，只需要渲染 markdown ⽂本你可以只引⼊ preview 组件来渲染。例如// main.js
import { creatApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// 引⼊你所使⽤的主题此处以 github 主题为例
import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';
VMdPreview.use(githubTheme);
const app = creatApp(/*...*/);
app.use(VMdPreview);
<template>
<v-md-preview :text="markdown"></v-md-preview>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
const markdown = ref('');
return {
markdown
}
}
}
</script>
2.渲染保存后的 html ⽂本
editorjs如果你的项⽬不需要编辑功能，只需要渲染 html 你可以只引⼊ preview-html 组件来渲染。例如：
/
/ main.js
import { creatApp } from 'vue';
import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
import '@kangc/v-md-editor/lib/style/preview-html.css';
// 引⼊使⽤主题的样式
import '@kangc/v-md-editor/lib/theme/style/vuepress';
const app = creatApp(/*...*/);
app.use(VMdPreviewHtml);
<template>
<!-- preview-class 为主题的样式类名，例如vuepress就是vuepress-markdown-body -->
<v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
</template>
<script>
import { ref } from 'vue';
export default {
setup () {
const html = ref('<div data-v-md-line="1"><h1 align="center">Markdown Editor built on Vue</h1>');
return {
html
}
},
};
</script>
更多⾼级⽤法参考官⽅⽂档：
以上就是如何在在Vue3中使⽤markdown 编辑器组件的详细内容，更多关于Vue3中使⽤markdown 编辑器组件的资料请关注其它相关⽂章！