vue2 使用 mavon-editor 实现 MD 展示与编辑

mavon-editor 文档地址： https://github.com/hinesboy/mavonEditor

一、安装 mavon-editor

npm install mavon-editor --save

二、在main.js 中引入

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

三、组件中使用

<!-- templete -->
<mavon-editor
    ref="docDetaileNode"
    v-model="docTxt"
    :subfield="false"
    :editable="false"
    :ishljs="true"
    :external-link="externalLink"
    Box-shadow-style="0 0 0 0 rgba(0,0,0,0)"
    default-open="preview"
    :toolbars-flag="false"
/>

// script
data() {
    return {
      externalLink: {
        markdown_css: function() {
          // 这是你的markdown css文件路径
          return '/markdown/github-markdown.min.css'
        },
        hljs_js: function() {
          // 这是你的hljs文件路径
          return '/highlightjs/highlight.min.js'
        },
        katex_css: function() {
          // 这是你的katex配色方案路径路径
          return '/katex/katex.min.css'
        },
        katex_js: function() {
          // 这是你的katex.js路径
          return '/katex/katex.min.js'
        }
      },
      docTxt: 'hello world'
    }
  }

4、预览与编辑

去掉 default-open="preview" 即为编辑模式

<mavon-editor
	ref="mdEidt"
	v-model="docContent"
	:ishljs="true"
	:external-link="externalLink"
	Box-shadow-style="0 0 0 0 rgba(0,0,0,0)"
	@imgAdd="imgUploading"
	@fullScreen="fullScreenHandle"
/>

5、样式问题

externalLink: {
markdown_css: function() {
    // 这是你的markdown css文件路径
    return '/markdown/github-markdown.min.css'
  },
  hljs_js: function() {
    // 这是你的hljs文件路径
    return '/highlightjs/highlight.min.js'
  },
  katex_css: function() {
    // 这是你的katex配色方案路径路径
    return '/katex/katex.min.css'
  },
  katex_js: function() {
    // 这是你的katex.js路径
    return '/katex/katex.min.js'
  }
}

这个配置信息会指向项目的根目录下，如在本地 http://localhost:8080, 那么资源地址就为：http://localhost:8080/markdown/github-markdown.min.css 。那么就需要把资源放在本地：

这里有说到： https://github.com/hinesboy/mavonEditor/blob/master/doc/cn/no-cnd.md

资源可以在node_modules里面去拷贝：