VUE工程中使用markdown——引入、编辑、预览

氪精大佬

于 2019-11-01 11:39:25 发布

阅读量2.3k

点赞数 1

分类专栏： vue 个人学习 markdown 文章标签： mavonEditor

本文链接：https://blog.youkuaiyun.com/weixin_44000275/article/details/102854260

版权

本文介绍了在Vue工程中使用mavonEditor作为Markdown编辑器的过程，包括局部引入组件、配置参数、效果展示等步骤，展示了如何实现Markdown内容的编辑与预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

最近想在vue项目中使用markdown编辑器，发现mavon-editor，这个东西挺好的，先记录下来吧！有错的地方希望指出哦

安装

npm install mavon-editor

使用

因为我项目中只有小部分组件要用它，所以用的是局部引入组件的方法，这里以局部注册为例，想要全局注册的可以搜一下，大同小异啦。

组件前加入这两句

import {mavonEditor} from "mavon-editor";
import "mavon-editor/dist/css/index.css";

2.data中配置这些参数

toolbars: {
                bold:        true, // 粗体
                italic:      true, // 斜体
                header:      true, // 标题
                underline:   true, // 下划线
                mark:        true, // 标记
                superscript: true, // 上角标
                quote:       true, // 引用
                ol:          true, // 有序列表
                link:        true, // 链接
                imagelink:   true, // 图片链接
                help:        true, // 帮助

最低0.47元/天解锁文章