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

前言

最近想在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, // 帮助 code: true, // code subfield: true, // 是否需要分栏 fullscreen: true, // 全屏编辑 readmodel: true, // 沉浸式阅读 undo: true, // 上一步 trash: true, // 清空 save: true, // 保存（触发events中的save事件） navigation: true // 导航目录 }

3.引入

<mavon-editor class="mavonEditor" :toolbars="toolbars" v-model="article.article_content" ></mavon-editor>

这个toolbars就是刚才在data中写的参数设定，也可以不加，不加就是默认的 v-model绑定的是输入内容，方便传输数据

效果

一张常规的效果截图 左边是编写的东西，右边是预览

末

那么怎么把这里编号的文章内容放在其他页面上去呢，也就是展示，请看本作者其他文章 https://blog.csdn.net/weixin_44000275