Editor MAVON editor for offline use

cnd part , It can be configured together with the operation and maintenance personnel

vue2 Use

1.1 stay public Under the folder , All files put into the editor

1.2 introduce

1.2.1script Let's introduce

import Vue from 'vue'

import mavonEditor from 'mavon-editor'

Vue.use(mavonEditor)

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

1.2.2style Let's introduce

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

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

1.3 establish / edit page

<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 in 
// Because there are cdn file , Offline needs to be in data Add this field to the editor 
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',
},

// Editor menu bar 
toolbars: {
    
  bold: true, //  bold 
  italic: true, //  Italics 
  header: true, //  title 
  underline: true, //  Underline 
  strikethrough: true, //  Center line 
  mark: false, //  Mark 
  superscript: false, //  Upper corner mark 
  subscript: false, //  Bottom corner 
  quote: false, //  quote 
  ol: true, //  Ordered list 
  ul: true, //  Unordered list 
  link: true, //  link 
  imagelink: true, //  Picture links 
  code: true, // code
  table: true, //  form 
  fullscreen: false, //  Full screen editing 
  readmodel: false, //  Immersive reading 
  htmlcode: false, //  Exhibition html Source code 
  help: false, //  help 
  /* 1.3.5 */
  undo: true, //  The previous step 
  redo: true, //  next step 
  trash: true, //  Empty 
  save: false, //  preservation （ Trigger events Medium save event ）
  /* 1.4.2 */
  navigation: false, //  Navigation directory 
  /* 2.1.8 */
  alignleft: true, //  Align left 
  aligncenter: true, //  In the middle 
  alignright: true, //  Right alignment 
  /* 2.2.1 */
  subfield: true, //  Single and double column mode 
  preview: true, //  preview 
},

// Image address storage array 
mdImgMap: {
    },

1.3.1 Upload image processing

// Picture size limit 
uploadBefore(f){
    
  if(f.size>2016324){
    
    this.$message.error('error', ' Pictures are limited to 2M')
    return false
  }else {
    
    return true
  }
},
$imgAdd(pos, $file){
    
  //  First step . Upload the picture to the server .
  let requestConfig = {
    
    headers: {
    
      "Content-Type": "multipart/form-data; boundary=----WebKitFormBoundary8uUfBPZgr1wjjfGu",
    },
  };
  var formdata = new FormData();
  formdata.append('file', $file);
  uploadImgSec(formdata,requestConfig).then(res => {
    // Call interface 
    if(res.httpCode == 200) {
    
      let fullImgPath = this.gb.imgAddress(res.fileName);// Modify address public function 
      this.mdImgMap[pos] = fullImgPath
    }else {
    
      this.$refs.md.$refs.toolbar_left.$imgDel(pos)
      this.$message.error(' File upload failed ')
    }
    this.loading = false;
  })
},

stay global In file , Encapsulates the image address processing function

 You can configure different addresses according to different environments , At present, it is the same 
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 Submit and process all picture addresses

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

global In file , Encapsulated will markdown Replace multiple pictures in the document with picture links （ Key value pair ）

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

Because the back end is put xss Handle , therefore <'/ When translated , Front end with v-html Display processing

1.3 Preview page

<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>

The two processing contents here have translation problems , One is the function of encapsulation , One is v-html( It may not be completely resolved )

1.3.1 v-html Method

// Put the following code in the page

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

// Process the interface request after it succeeds 
 setTimeout(function () {
    
   let getHtmlVal = $('#eidtHtml').html();
   self.content = getHtmlVal;
 },200)

1.3.2 Self encapsulation function

global In file

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 Use

The introduction method is the same
setup-return Configuration menu in
The address of processing pictures is different

const handleEditorDetailImgAdd = async (pos: any, file: any) => {
    
  let name = file.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})`// Serial number 
    let nStrShow = `(${
      store.state.globalModule.prefixPath}/${
      result.filePath})`// Address 
    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)

  }
}

stay store Next modules in global Under the document idnex.ts in , Encapsulate the image path

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 In file

export interface GlobalModuleTypes {
    
  prefixPath: string[];
}