装置
# 应用 npmnpm i @kangc/v-md-editor@next -S# 应用yarnyarn 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 文本如何渲染在页面上？
如果你的我的项目中引入了编辑器。你能够间接应用编辑器的预览模式来渲染。例如：
- 渲染 markdown 文本
如果你的我的项目中引入了编辑器。你能够间接应用编辑器的预览模式来渲染。例如：
<template> <v-md-editor :value="markdown" mode="preview"></v-md-editor></template><script>export default { data() { return { markdown: '### 题目', }; },};</script>如果你的我的项目不须要编辑性能，只须要渲染 markdown 你能够只引入 preview 组件来渲染。例如：
// main.jsimport 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);Vue.use(VMdPreview);<template> <v-md-preview :text="markdown"></v-md-preview></template><script>export default { data() { return { markdown: '### 题目', }; },};</script>- 渲染 html 文本
如果你的我的项目不须要编辑性能，只须要渲染 html 你能够只引入 preview-html 组件来渲染。例如：
// main.jsimport 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';Vue.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>export default { data() { return { html: '<div data-v-md-line="1"><h1 align="center">Markdown Editor built on Vue</h1>', }; },};</script>更多高级用法参考官网文档：v-md-editor