如何在在Vue3中使用markdown|如何在在Vue3中使用markdown 编辑器组件如何在在Vue3中使用markdown编辑

安装
引入组件
基础用法
保存后的 markdown 或者 html 文本如何渲染在页面上？

安装

# 使用 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);

基础用法

保存后的 markdown 或者 html 文本如何渲染在页面上？
1.渲染保存后的 markdown 文本
方式一：如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如

方式二：如果你的项目不需要编辑功能，只需要渲染 markdown 文本你可以只引入 preview 组件来渲染。例如

// main.jsimport { 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);

2.渲染保存后的 html 文本
如果你的项目不需要编辑功能，只需要渲染 html 你可以只引入 preview-html 组件来渲染。例如：

// main.jsimport { 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);

更多高级用法参考官方文档：v-md-editor
【如何在在Vue3中使用markdown|如何在在Vue3中使用markdown 编辑器组件】以上就是如何在在Vue3中使用markdown 编辑器组件的详细内容，更多关于Vue3中使用markdown 编辑器组件的资料请关注脚本之家其它相关文章！