首先是在页面引入
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
data 中定义option
markdownOptionAll:{ 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: false, // 全屏编辑 readmodel: false, // 沉浸式阅读 htmlcode: true, // 展示html源码 help: true, // 帮助 /* 1.3.5 */ undo: true, // 上一步 redo: true, // 下一步 trash: true, // 清空 save: false, // 保存（触发events中的save事件） /* 1.4.2 */ navigation: true, // 导航目录 /* 2.1.8 */ alignleft: true, // 左对齐 aligncenter: true, // 居中 alignright: true, // 右对齐 /* 2.2.1 */ subfield: false, // 单双栏模式 preview: true, // 预 ishljs:true },
引入组件
components: {
mavonEditor
},
使用组件
<mavon-editor v-model="formItem.note" :codeStyle="codeStyle" :toolbars="markdownOption" id="myTextEditor-note" ref="myTextEditor-note" @imgAdd="$imgAdd(arguments,'myTextEditor-note')" @change="changeData(arguments,'note')" style="max-height: 120px"/>
methods
arg中包含了插入的位置和图片数据 $imgAdd:async function(arg,idname){ 上传图片 let fd = new FormData() fd.append('image', arg[1]); let info = await uploadImg(fd); this.editorName = idname; if(info.status == 200){ this.fileFn(info,arg[0]); }; }, 上传成功之后，返回的图片url插入到鼠标位置 fileFn(response,pos){ // let editor = this.$refs[this.editorName].quill; // 如果上传成功 if (response) { this.uploadLoading = false; // 获取光标所在位置 let baseurl = process.env.NODE_ENV=="development"?"http://10.1.1.1:10/":'http://10.2.2.2:20/'; this.$refs[this.editorName].$img2Url(pos,baseurl+response.data); } else { // 提示信息，需引入Message this.$Message.error('图片插入失败') } },
//将markdown内容换成html
changeData(arg,name){
arg[1] 为html内容
// this.formItem_html[name] = arg[1];
},
