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

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

<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 文本

如果你的项目不需要编辑功能，只需要渲染 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);

<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>

更多高级用法参考官方文档：v-md-editor

以上就是如何在在Vue3中使用markdown 编辑器组件的详细内容，更多关于Vue3中使用markdown 编辑器组件的资料请关注好吧啦网其它相关文章！