vue markdown编辑器v-md-editor基本用法。vue实现markdown预览 电脑版发表于：2020/8/27 17:57 ## vue markdown编辑器v-md-editor基本用法 #### 安装依赖 使用npm安装： ``` npm i @kangc/v-md-editor -S ``` 使用yarp安装： ``` yarn add @kangc/v-md-editor ``` #### 添加依赖 一般都是在main.js中写 ``` import Vue from 'vue'; import VueMarkdownEditor from '@kangc/v-md-editor'; import '@kangc/v-md-editor/lib/style/base-editor.css'; import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'; VueMarkdownEditor.use(vuepressTheme); Vue.use(VueMarkdownEditor); ``` #### 使用 ``` <template> <v-md-editor v-model="text" height="400px"></v-md-editor> </template> <script> export default { data() { return { text: '', }; }, }; </script> ``` ## vue实现markdown预览 #### 安装依赖 使用npm安装： ``` npm i @kangc/v-md-editor -S ``` 使用yarp安装： ``` yarn add @kangc/v-md-editor ``` #### 引入 一般都是在main.js中写 ``` import Vue from 'vue'; import VMdPreview from '@kangc/v-md-editor/lib/preview'; import '@kangc/v-md-editor/lib/style/preview.css'; import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; import '@kangc/v-md-editor/lib/theme/style/github.css'; // highlightjs import hljs from 'highlight.js'; VMdPreview.use(githubTheme, { Hljs: hljs, }); Vue.use(VMdPreview); ``` vue3中引入 ``` import { createApp } from 'vue'; import VMdPreview from '@kangc/v-md-editor/lib/preview'; import '@kangc/v-md-editor/lib/style/preview.css'; import githubTheme from '@kangc/v-md-editor/lib/theme/github.js'; import '@kangc/v-md-editor/lib/theme/style/github.css'; // highlightjs import hljs from 'highlight.js'; VMdPreview.use(githubTheme, { Hljs: hljs, }); const app = createApp(/*...*/); app.use(VMdPreview); ``` #### 使用 ``` <template> <v-md-preview :text="text"></v-md-preview> </template> <script> export default { data() { return { text: '', }; }, }; </script> ``` 官方网址：http://ckang1229.gitee.io/vue-markdown-editor/zh/examples/preview-demo.html#%E9%A2%84%E8%A7%88%E7%BB%84%E4%BB%B6
