markdown编辑器用于新增，在默认模板基础上新增保存及编辑保存，内含链接跳转和图片

某个业务的增删改查功能，当表单页填写完保存后跳到下一页，markdown的双屏显示，有一个固定显示的模板，在这个基础上用户新增内容和编辑内容。

步骤1：安装mavon-editor，我装的版本是2.7.7

npm i mavon-editor --save

步骤2：在main.js中引入

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
Vue.use(mavonEditor)

步骤3：在vue.config.js中，自己引入markdown样式

const vueConfig = {
  publicPath: '/',
    configureWebpack: {
    externals: prodExternals,
    plugins: [     
      new webpack.IgnorePlugin(/moment\//),
      //自己引入markdown样式
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/mavon-editor/dist/highlightjs',
            to: resolve('/dist/css/highlightjs') // 插件将会把文件导出于/dist/highlightjs之下
          },
          {
            from: 'node_modules/mavon-editor/dist/markdown',
            to: resolve('/dist/css/markdown') // 插件将会把文件导出于/dist/markdown之下
          },
          {
            from: 'node_modules/mavon-editor/dist/katex', // 插件将会把文件导出
            to: resolve('/dist/css/katex')
          }
        ]
      })
    ]
  },
}
module.exports = vueConfig

步骤4：新建docModel.js

const apiDocModel =
    '**xx简介：**\n' +
    '- `xxxxxxxxxxxxxxx `\n' +
    '\n' +
    '**xx说明：**\n' +
    '- `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;`\n'+ 
    '- `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;`\n'+
    '- `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;`\n'+
'\n' +
    '**xx条件：**\n' +
    '- `xxxxxxxxxx,流程详阅`[帮助中心](/#/portal/help) \n'  +
    '\n' + '- `xxxxxxxx：` \n'  +'1、 `xxxxxxxxxxxxx;`\n'+
    '2、 `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`\n'+
    '3、 `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`\n'+
    '4、 `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;`\n'+
    '\n'+
    '**xx材料：**\n' +
    '- xxxxxxxxxxxxxxxxxxxxxxxxxx照片 \n' +
    '- xxxxxxxxxxxxxxxxxxxxxxxxxxxx \n'+
    '\n' +
    ' **使用流程**\n' +
    '![](https://xxxxxxx.png)\n'+
    '\n'
export { apiDocModel}

*****注意链接是[](),如果是hash模式，要加/#/
*****注意图片是![]()

步骤5：在要用到的页面引入

 <mavon-editor
            ref="mdApiDoc"
            class="mark-down"
            v-model="apiDoc.document.fTxApidocument"
            :autofocus="false"
            :ishljs="true"
            :externalLink="external_link"
            @imgAdd="apiDoc.$imgAdd"
            @imgDel="apiDoc.$imgDel"
          />

import { apiDocModel } from './docModel'

data() {
    return {
 external_link: {
        markdown_css: function () {
          // 这是你的markdown css文件路径
          return '/css/markdown/github-markdown.min.css'
        },
        hljs_js: function () {
          // 这是你的hljs文件路径
          return '/css/highlightjs/highlight.min.js'
        },
        hljs_css: function (css) {
          // 这是你的代码高亮配色文件路径
          return '/css/highlightjs/styles/' + css + '.min.css'
        },
        hljs_lang: function (lang) {
          // 这是你的代码高亮语言解析路径
          return '/css/highlightjs/languages/' + lang + '.min.js'
        },
        katex_css: function () {
          // 这是你的katex配色方案路径路径
          return '/css/katex/katex.min.css'
        },
        katex_js: function () {
          // 这是你的katex.js路径
          return '/css/katex/katex.min.js'
        },
      },
      }
        apiDoc: {
        document: { fTxApidocument: apiDocModel },
        $imgAdd: (pos, $file) => {
          this.$refs.mdApiDoc.$img2Url(pos, $file.miniurl)
        },
        $imgDel(filename) {},
      },

调接口保存这个就不说了，按后端要求的把对应的参数传给他调接口就行了