mavonEditor是一款基于vue的markdown编辑器，比较适合博客系统，简单易用，网上有教程，基本没有坑。代码突出显示在底部。下载并导入main.js到mavonEditornpminstallmavon-editor--save//introduceimportmavonEditorfrom'mavon-editor'import'mavon-editor/dist/css/index.css'//useVue.use(mavonEditor)html://toolbars也可以被省略data:toolbars:{bold:true,//bolditalic:true,//italicheader:true,//titleunderline:true,//underlinestrikethrough:true,//middlelinemark:true,//marksuperscript:true,//上标subscript:true,//下标quote:true,//引用ol:true,//有序列表ul:true,//无序列表link:true,//链接图片link:true,//图片链接code:true,//codetable:true,//tablefullscreen:false,//全屏编辑readmodel:false,//沉浸式阅读htmlcode:true,//显示html源码help:true,//帮助/*1.3.5*/undo:true,//上一步redo:true,//下一步trash:true,//clearsave:false,//save(触发events中的save事件)/*1.4.2*/navigation:true,//导航目录/*2.1.8*/alignleft:true,//左对齐aligncenter:true,//居中alignright:true,//右对齐/*2.2.1*/subfield:true,//单和doubleBarmodepreview:false//preview}代码高亮：下载高亮并导入importhljsfrom'highlight.js'inmain.js//导入代码高亮文件import'highlight.js/styles/googlecode.css在线教程：(注册一个全局指令)Vue.directive('highlight',function(el){lethighlight=el.querySelectorAll('code,pre');highlight.forEach((block)=>{if(block){hljs.highlightBlock(block);}})})//使用命令上面的方法确实可行，但是代码太多或者刷新后有问题（代码高亮不生效），查看控件站发现hljsisnotdefined错误解决方法（不要使用指令，hljs可用时再进行代码高亮操作）：执行以下方法获取内容后：方法一：functionhighlighthandle(){lethighlight=document.querySelectorAll('code,pre');highlight.forEach((block)=>{hljs.highlightBlock(block);})}functiongetHljs(){//判断hljs是否可用returnnewPromise((resolve,reject)=>{functionhljsTrue(){try{如果（hljs）{clearTimeout（定时器）；定时器=空；解决（）;}}catch(e){Timer=setTimeout(()=>{hljsTrue();},100)}}hljsTrue();})}getHljs().then(()=>{highlighthandle()})方法二：（推荐）将导入的文件放入组件中，awaithljsimport'highlight.js/styles/后执行后续代码googlecode.css'importhljsfrom'highlight.js'//导入代码高亮文件asyncfunctionhighlighthandle(){awaithljs;让highlight=document.querySelectorAll('code,pre');highlight.forEach((block)=>{hljs.highlightBlock(block);})}highlighthandle();
