[开发工具]编辑器mavon-editor离线使用

cnd部分，可与运维人员商量一起配置

vue2的使用

1.1在public文件夹下面，放入编辑器的全部文件

1.2引入

1.2.1script下面引入

import Vue from 'vue'

import mavonEditor from 'mavon-editor'

Vue.use(mavonEditor)

import '../../../../public/mavon-editor/dist/css/index.css'

1.2.2style下面引入

@import url(../../../../public/mavon-editor/dist/markdown/github-markdown.min.css);

@import url(../../../../public/mavon-editor/dist/katex/katex.min.css);

1.3创建/编辑 页面

<mavon-editor
    @imgAdd="$imgAdd"
    ref="md"
    :subfield = "true"
    :toolbars="toolbars"
    :codeStyle="codeStyle"
    :boxShadow="false"
    :imageFilter = "uploadBefore"
    :ishljs="true"
    :external-link="externalLink"
    v-model="content"/>

data中
//因有的是cdn文件，离线需在data中为编辑器增加这个字段
externalLink: {
  markdown_css: false,
  hljs_js: () => '/public/mavon-editor/dist/highlightjs/highlight.min.js',
  hljs_css: (css) => '/public/mavon-editor/dist/highlightjs/styles/' + css + '.min.css',
  hljs_lang: (lang) => '/public/mavon-editor/dist/highlightjs/languages/' + lang + '.min.js',
  katex_css: () => '/public/mavon-editor/dist/katex/katex.min.css',
  katex_js: () => '/public/mavon-editor/dist/katex/katex.min.js',
},

//编辑器菜单栏
toolbars: {
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: true, // 中划线
  mark: false, // 标记
  superscript: false, // 上角标
  subscript: false, // 下角标
  quote: false, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: true, // 链接
  imagelink: true, // 图片链接
  code: true, // code
  table: true, // 表格
  fullscreen: false, // 全屏编辑
  readmodel: false, // 沉浸式阅读
  htmlcode: false, // 展示html源码
  help: false, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: true, // 清空
  save: false, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: false, // 导航目录
  /* 2.1.8 */
  alignleft: true, // 左对齐
  aligncenter: true, // 居中
  alignright: true, // 右对齐
  /* 2.2.1 */
  subfield: true, // 单双栏模式
  preview: true, // 预览
},

//图片地址存放数组
mdImgMap: {},

1.3.1上传图片处理

//图片大小限制
uploadBefore(f){
  if(f.size>2016324){
    this.$message.error('error', '图片限制大小为2M')
    return false
  }else {
    return true
  }
},
$imgAdd(pos, $file){
  // 第一步.将图片上传到服务器.
  let requestConfig = {
    headers: {
      "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundary8uUfBPZgr1wjjfGu",
    },
  };
  var formdata = new FormData();
  formdata.append('file', $file);
  uploadImgSec(formdata,requestConfig).then(res => {//调用接口
    if(res.httpCode == 200) {
      let fullImgPath = this.gb.imgAddress(res.fileName);//修改地址公用功能
      this.mdImgMap[pos] = fullImgPath
    }else {
      this.$refs.md.$refs.toolbar_left.$imgDel(pos)
      this.$message.error('文件上传失败')
    }
    this.loading = false;
  })
},

在global文件中，封装了图片地址处理功能

可以根据不同的环境配置不同的地址，目前是一样的
local.imgAddress = function (path) {
    if(process.env.VUE_APP_MODE == 'production'){
        return 'files/' + path
        // return 'http://10.134.52.22/files/' + path
    } else if(process.env.VUE_APP_MODE == 'test'|| process.env.VUE_APP_MODE == 'development'){
        return 'files/' + path
        // return 'http://10.11.1.22/files/' + path
    }
}

1.3.2提交处理所有图片地址

let mdVal = this.gb.mdImgmap2Url(self.content, this.mdImgMap)

global文件中，封装了将markdown文档中的多个图片替换为图片链接（键值对）

local.mdImgmap2Url = function (mdValue, imgMap) {
    if (imgMap instanceof Object) {
        for (let key in imgMap) {
            mdValue = local.mdImg2Url(mdValue, key, imgMap[key])
        }
    }
    return mdValue
}

因为后端做了放xss处理，所以<'/等被转译了，前端用v-html进行了展示处理

1.3预览页面

<mavon-editor
    id="articleContentPanel"
    class="md"
    :value="gb.escape2Html(detail.content)"
    :subfield="false"
    :defaultOpen="'preview'"
    :toolbarsFlag="false"
    :editable="false"
    :scrollStyle="true"
    :ishljs="true"
    :boxShadow="false"
    :externalLink="false"
    :previewBackground="'#ffffff'"
></mavon-editor>

此处两种处理内容有转译问题，一种是封装的功能，一种是v-html(可能解析的不全)

1.3.1 v-html方法

//页面中放入下面代码

<div style="display: none" id="eidtHtml" v-html="detail.content"></div>

//接口请求成功后进行处理
 setTimeout(function () {
   let getHtmlVal = $('#eidtHtml').html();
   self.content = getHtmlVal;
 },200)

1.3.2 自封装功能

global文件中

local.escape2Html = function(str) {
    var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','#92':'\\\\','#x2f':'/','quot':'\\"','#x27':'\'','#35':'#'};
    return str.replace(/&(lt|gt|nbsp|amp|quot|#92|#x2f|#x27|#35);/ig,function(all,t){
        return arrEntities[t];
    });
}

ts的使用

引入方式一样
setup-return中配置菜单等
处理图片地址不一样

const handleEditorDetailImgAdd = async (pos: any, file: any) => {
  let name = file.name//文件名
  let formData = new FormData()
  formData.append("file", file)

  const result = await store.dispatch("bugsModule/uploadImage", formData)
  if (result.ok) {
    let oStr = `(${pos})`//序号
    let nStrShow = `(${store.state.globalModule.prefixPath}/${result.filePath})`//地址
    let index = formState.detail.indexOf(oStr)
    let str = formState.detail.replace(oStr, "")
    let insertStr = (source: any, start: any, newStr: any) => {
      return source.slice(0, start) + newStr + source.slice(start)
    }
    formState.detail = insertStr(str, index, nStrShow)

  }
}

在store下modules中global文件下idnex.ts中，进行图片路径封装

import { Module } from 'vuex';
import RootStateTypes from '@/store/interface';
import {
  GlobalModuleTypes,
} from '@/store/modules/global/interface';

const globalModule: Module<GlobalModuleTypes, RootStateTypes> = {
  namespaced: true,
  state: {
    prefixPath: [],
  },

  mutations: {
    getPrefixPath(state, data) {
      state.prefixPath = data
    }
  },
  actions: {
    async getImagePrefix({ commit }) {
      try {
        let path = '';
        if (process.env.VUE_APP_MODE === 'production') {
          path = 'files';
        } else {
          path = 'files';
        }
        commit("getPrefixPath", path)
      } catch (error) {
        console.log("globalModule action getImagePrefix error: ", error);
      }
    },
  },
  modules: {
  }
}
export default globalModule;

interface.ts文件中

export interface GlobalModuleTypes {
  prefixPath: string[];
}