使用mavonEditor的三两事

使用mavonEditor的三两事

项目背景：vuecli搭建的web项目，引入了mavonEditor编辑器

mavonEditor的样式404，有的人无法从cdn获取样式

步骤：

1. vue.config.js文件新增以下

var copyWebpackPlugin = require('copy-webpack-plugin');
configureWebpack: {
    plugins: [
      new copyWebpackPlugin([{
          from: 'node_modules/mavon-editor/dist/highlightjs',
          to: path.resolve(__dirname, './dist/highlightjs'), // 插件将会把文件导出于/dist/highlightjs之下
      }, {
          from: 'node_modules/mavon-editor/dist/markdown',
          to: path.resolve(__dirname, './dist/markdown'), // 插件将会把文件导出于/dist/markdown之下
      }, {
          from: 'node_modules/mavon-editor/dist/katex', // 插件将会把文件导出
          to: path.resolve(__dirname, './dist/katex')
      }]),
    ]
}

2. 引用的地方 打包后的文件确保在根目录下的dist文件夹中

<mavon-editor :externalLink="externalLink" />

EXTERNAL_LINK = {
  markdown_css: function () {
    // 这是你的markdown css文件路径
    return "/markdown/github-markdown.min.css";
  },
  hljs_js: function () {
    // 这是你的hljs文件路径
    return "/highlightjs/highlight.min.js";
  },
  hljs_css: function () {
    // 这是你的代码高亮配色文件路径
    return "/highlightjs/styles/github.min.css";
  },
  katex_css: function () {
    // 这是你的katex配色方案路径路径
    return "/katex/katex.min.css";
  },
  katex_js: function () {
    // 这是你的katex.js路径
    return "/katex/katex.min.js";
  },
}