vue引入mavonEditor实现markdown编辑与展示

背景

由于工作需要，想在开发的页面中能够编辑与展示markdown格式内容，因使用vue开发，便搜索相关文章，最终解决了问题，也做个总结。

效果

通过阅读本篇文章，能够轻松在vue中集成mavonEditor插件，在页面中编辑与展示markdown格式内容，解决无网络环境下的引入问题

主要内容

1. 引入mavonEditor工具包
2. 编辑markdown格式内容
3. 展示markdown 格式内容
4. 离线方式处理（不使用cdn-lib，使用本地包）

1.引入mavonEditor

安装插件：
在vue项目的package.json 中引入

  "dependencies": { 
       "mavon-editor": "^2.9.1" 
  }

之后终端进入到项目根目录执行

npm install 

引入插件：
在main.js中添加

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

2. 编辑markdown格式内容

• 默认方式：
  在需要的页面中引入内容

<mavon-editor v-model="mdContext"/>

data(){
   return:{
      mdContext:"" 
  }
}

这样既可进行markdown编辑，对应的内容即存储在mdContext中，页面效果如下：

微信图片_20210920102923.png

当然，该插件包含很多配置选项，可以根据需要进项配置，包括工具栏选项等，具体可参考mavon-editor的Github,第三点的展示就是通过配置选项完成的。

3.展示markdown 格式内容

如果只想展示markdown的内容，可以通过配置相关选项来达到目的，具体如下：

 <mavon-editor
    class="markdown"
    :value="mdContext"
    :subfield="false"
    defaultOpen="preview"
    :toolbarsFlag="false"
    :editable="false"
    :scrollStyle="true"
    style="min-height:20px"
 ></mavon-editor>

其中defaultOpen="preview"即默认展示预览区域，editable=false表示不可编辑

4.离线方式处理（本地加载方式）

mavon-editor 上说明

为优化插件体积，从v2.4.2起以下文件将默认使用cdnjs外链:
highlight.js
github-markdown-css
katex(v2.4.7)

官方给出了不使用cdn的方法说明，本地引入说明，但感觉组织的有点乱，看的比较懵懂，理解起来有点费劲。意思是表达了两种处理方式：

微信图片_20210920110224.png

• 第一种操作方式：

<mavon-editor :externalLink="false" v-model="mdContext"/>

<script>
import  '@/cdn-lib/markdown/highlighjs.js'; //自行引入
</script>
<style lang="less">
@import  '/cdn-lib/markdown/github-markdown.min.css'; //自行引入
</style>

• 第二种操作方式
  先安装copy-webpack-plugin插件，再进行打包路径配置等，目的就是为了打包时能够将相关的js、css文件一起打包到dist目录；
  再通过如下配置达到引入相关文件的效果。

<mavon-editor :externalLink="externalLink" v-model="mdContext"/>

<script>
  return:{
      mdContext:"" ,
      externalLink:{
           markdown_css: function() {
                // 这是你的markdown css文件路径
                return '/markdown/github-markdown.min.css';
            },
            hljs_js: function() {
                // 这是你的hljs文件路径
                return '/highlightjs/highlight.min.js';
            },
            hljs_css: function(css) {
                // 这是你的代码高亮配色文件路径
                return '/highlightjs/styles/' + css + '.min.css';
            },
            hljs_lang: function(lang) {
                // 这是你的代码高亮语言解析路径
                return '/highlightjs/languages/' + lang + '.min.js';
            },
            katex_css: function() {
                // 这是你的katex配色方案路径路径
                return '/katex/katex.min.css';
            },
            katex_js: function() {
                // 这是你的katex.js路径
                return '/katex/katex.min.js'; 
               // return false;//则该项将通过cdn引入
            },
      }
  }

}
</script>

说明：第二种方式与第一种方式本质是一样的，你完全可以自行先将需要的js、css文件放在项目的public文件夹下，然后再通过设置externalLink为与上述对象的方式进行。这样，就不用进行相关打包插件的安装，因为很多人看到第二种方式的打包插件介绍都感到头晕。
当然相比第一种方式，第二种方式更灵活，可以部分cdn，部分自行加载。但是对于离网来说就失去了意义。