Install mavon-editor (安装)
npm install mavon-editor --save
main.js
// 全局注册
// import with ES6
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)
页面加载mavon-editor
<mavon-editor v-model="value"/>
mavon-editor标签属性:props
toolbars:
toolbars: {
bold: true, // 粗体
italic: true, // 斜体
header: true, // 标题
underline: true, // 下划线
strikethrough: true, // 中划线
mark: true, // 标记
superscript: true, // 上角标
subscript: true, // 下角标
quote: true, // 引用
ol: true, // 有序列表
ul: true, // 无序列表
link: true, // 链接
imagelink: true, // 图片链接
code: true, // code
table: true, // 表格
fullscreen: true, // 全屏编辑
readmodel: true, // 沉浸式阅读
htmlcode: true, // 展示
html源码
help: true, // 帮助 /* 1.3.5 */
undo: true, // 上一步
redo: true, // 下一步
trash: true, // 清空
save: true, // 保存（触发events中的save事件） /* 1.4.2 */
navigation: true, // 导航目录 /* 2.1.8 */
alignleft: true, // 左对齐
aligncenter: true, // 居中
alignright: true, // 右对齐 /* 2.2.1 */
subfield: true, // 单双栏模式
preview: true, // 预览
}
Events事件:events
图片上传：imagheUpload
代码高亮
1.安装highlight.js
npm install highlight.js
impor thljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css' //样式
Vue.directive('highlight',function(el){
let blocks = el.querySelectorAll('pre code');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
4.在需要高亮内容标签使用 v-highlight
