vue markdown编辑器mavonEditor和highlight代码高亮踩坑

mavonEditor是一款基于vue的markdown编辑器,比较适合博客系统，使用方法简单，网上都有教程，基本没坑。代码高亮解决在底部。
下载并且 main.js引入 mavonEditor

npm install mavon-editor --save

//引入
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

// use
Vue.use(mavonEditor)

html:

<mavon-editor v-model="content" ref="md" @change="change" @imgAdd="imgAdd" style="min-height: 600px" :toolbars= 'toolbars'/>
//toolbars 省略也可以

data:

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: 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: true, // 单双栏模式
    preview: false // 预览
  }            

代码高亮：
下载highlight并在 main.js 引入

import hljs from 'highlight.js' //导入代码高亮文件
import 'highlight.js/styles/googlecode.css 

网上教程：（注册一个全局指令）

 Vue.directive('highlight',function (el) {
   let highlight = el.querySelectorAll('code,pre');
   highlight.forEach((block)=>{
       if(block){
           hljs.highlightBlock(block);
       }
   })
 })

//使用指令
<mavon-editor v-highlight ....>

以上方法确实可行但是代码过多或者刷新后有问题（代码高亮则不生效），查看控制台发现hljs未定义报错

解决方案（不使用指令，判断hljs可用时再进行代码高亮操作）：
在获取到内容后执行以下方法：

方法一：

function highlighthandle(){
    let highlight = document.querySelectorAll('code,pre');
    highlight.forEach((block)=>{
       hljs.highlightBlock(block);
    })
}
function getHljs(){
    //  判断hljs是否可用
    return new Promise((resolve,reject)=>{
        function hljsTrue(){
            try{
                if(hljs){
                    clearTimeout(Timer);
                    Timer = null;
                    resolve();
                }
            }catch(e){
                Timer = setTimeout(()=>{
                    hljsTrue();
                },100)
            }
        }
        hljsTrue();

    })

}
getHljs().then(()=>{
    highlighthandle()
})

方法二：（推荐）

将引入文件放到组件内，通过 await hljs后再执行后续代码。

import 'highlight.js/styles/googlecode.css'
import hljs from 'highlight.js' //导入代码高亮文件


async function highlighthandle(){
    await hljs;
    let highlight = document.querySelectorAll('code,pre');
    highlight.forEach((block)=>{
       hljs.highlightBlock(block);
    })
}
highlighthandle();