Vue---mavon-editor使用

引入

 npm install mavon-editor --save

然后在main.js中引入：
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import "@/assets/css/markdown.css"

难点一.图片上传

  <mavon-editor
          ref="markdownEditor"
          @change="handleMarkdownChange"
          @save="handleEditorSave"
          @imgAdd="imgAdd"
          @imgDel="imgDel"
          :ishljs="true"
          v-model="content"
        />

handleMarkdownChange:绑定change事件，有两个参数：content,render;其中render是html代码
handleEditorSave：保存事件-ctrl+S
imgAdd:上传图片事件
imgDel:删除上传的图片

  /**
   * 添加图片事件
   */
  private async imgAdd(pos: any, file: any) {
    // 第一步.将图片上传到服务器.
    const res: ApiResponse<
      FileInfo
    > = await HttpRequest.UploaderModule.handleFileUploader({
      file
    });
    if (res && res.data) {
      // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
      const markdown: any = this.$refs.markdownEditor;
      markdown.$img2Url(pos, res.data.url);
    }
  }

  /**
   * 图片删除
   */
  private imgDel(pos: number) {
    delete this.img_file[pos];
  }

难点二.代码高亮

后台使用mavon-editor:
实现代码高亮

引入相关文件
import "mavon-editor/dist/highlightjs/highlight.min.js";
import "mavon-editor/dist/katex/katex";
//插件属性设置 
:ishljs="true"

前台显示：
这里弄得脑阔都疼，安装了highlight.js插件，然后在需要回显的地方引入文件：

import "mavon-editor/dist/css/index.css";
import "mavon-editor/dist/highlightjs/highlight.min.js";
import "mavon-editor/dist/katex/katex";
import "mavon-editor/dist/highlightjs/languages/javascript.min.js"
import "mavon-editor/dist/highlightjs/languages/java.min.js"
import "highlight.js/lib/highlight.js"
PS:这里的语言包如果用到了其他的，需要引入，我这里只引了两个