只需要简单的几步:
1.使用npm安装
npm install mavon-editor --save-dev
2.在main.js中导入
import mavonEditor from 'mavon-editor'; //markdown编辑器
import 'mavon-editor/dist/css/index.css';
然后
Vue.use(mavonEditor);
3.在组件中使用
<mavon-editor v-model="content" :toolbars="toolbars" @keydown="" style=""/>
data中配置markdown编辑器的功能
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
mark: true, // 标记
superscript: true, // 上角标
quote: true, // 引用
ol: true, // 有序列表
ink: true, // 链接
imagelink: true, // 图片链接
help: true, // 帮助
code: true, // code
subfield: true, // 是否需要分栏
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
undo: true, // 上一步
trash: true, // 清空
save: true, // 保存(触发events中的save事件)
navigation: true // 导航目录
}
这样就可以使用了