markdown-it-vue,vue markdown插件
vue3发布正式版不久，生态还没完全发展起来，目前支持vue3的开源减价编辑器组件基本上也寥寥无几，向大家推荐一个很好用的v-MD-编辑器组件，组件功能很强大，文档也比较详细。该文章只介绍组件的常用功能，更多高级的功能可以参考官方文档。
目录
安装引入组件基础用法保存后的减价或者超文本标记语言文本如何渲染在页面上？
安装
# 使用新公共管理
npm i @kangc/v-md-editor@next -S
# 使用故事
纱线添加@kangc/v-md-editor@next
引入组件
从“vue”导入{ creatApp }；
从" @kangc/v-md-editor "导入虚拟机编辑器
导入" @ kangc/v-MD-editor/lib/style/base-editor。CSS”；
从" @ kangc/v-MD-editor/lib/theme/github。js "导入githubTheme
导入@ kangc/v-MD-editor/lib/theme/style/githubCSS ；
vmdeditor。使用(githubTheme)；
const app=creatApp(/*.*/);
app。使用(VMdEditor)；
基础用法
模板
v-md编辑器v-model= text height= 400 px /v-MD编辑器
/模板
脚本
从“vue”导入{ ref }；
导出默认值{
setup () {
const text=ref()；
返回{
文本
}
}
}
/脚本
保存后的 markdown 或者 html 文本如何渲染在页面上？
1.渲染保存后的减价文本
方式一：如果你的项目中引入了编辑器。你可以直接使用编辑器的预览模式来渲染。例如
模板
v-md编辑器：value= markdown mode= preview /v-MD编辑器
/模板
脚本
从“vue”导入{ ref }；
导出默认值{
setup () {
const markdown=ref()；
返回{
减价
}
}
}
/脚本
方式二：如果你的项目不需要编辑功能，只需要渲染减价文本你可以只引入试映组件来渲染。例如
//main.js
从“vue”导入{ creatApp }；
从" @kangc/v-md-editor/lib/preview "导入VMdPreview
导入@ kangc/v-MD-editor/lib/style/preview。CSS ；
//引入你所使用的主题此处以开源代码库主题为例
从" @ kangc/v-MD-editor/lib/theme/github "导入githubTheme
导入@ kangc/v-MD-editor/lib/theme/style/githubCSS ；
vmdpreview。使用(githubTheme)；
const app=creatApp(/*.*/);
app。使用(VMdPreview)；
模板
v-MD-preview:text= markdown /v-MD-preview
/模板
脚本
从“vue”导入{ ref }；
导出默认值{
setup () {
const markdown=ref()；
返回{
减价
}
}
}
/脚本
2.渲染保存后的超文本标记语言文本
如果你的项目不需要编辑功能，只需要渲染超文本标记语言你可以只引入预览-html组件来渲染。例如：
//main.js
从“vue”导入{ creatApp }；
从" @ kangc/v-MD-editor/lib/preview-html "导入VMdPreviewHtml
导入@ kangc/v-MD-editor/lib/style/preview-html。CSS ；
//引入使用主题的样式
导入@ kangc/v-MD-editor/lib/theme/style/vue press ；
const app=creatApp(/*.*/);
app。使用(VMdPreviewHtml)；
模板
！-预习课为主题的样式类名，例如vuepress就是vue出版社-降价-车身-
v-MD-preview-html:html= html preview-class= vue press-markdown-body /v-MD-preview-html
/模板
脚本
从“vue”导入{ ref }；
导出默认值{
setup () {
const html=ref( div data-v-MD-line= 1 h1 align= center 基于Vue/h1构建的降价编辑器);
返回{
超文本标记语言
}
},
};
/脚本
更多高级用法参考官方文档：v-MD-编辑器
以上就是如何在在Vue3中使用减价编辑器组件的详细内容，更多关于Vue3中使用减价编辑器组件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。