Vue3中使用markdown 编辑器组件 怎样在在Vue3中使用markdown 编辑器组件
ckang1229 人气:0想了解怎样在在Vue3中使用markdown 编辑器组件的相关内容吗,ckang1229在本文为您仔细讲解Vue3中使用markdown 编辑器组件的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Vue,markdown,Vue,编辑器组件,下面大家一起来学习吧。
安装
# 使用 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 文本
如果你的项目不需要编辑功能,只需要渲染 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>
更多高级用法参考官方文档:v-md-editor
加载全部内容