Vue编写markdown或者展示markdown

$ npm install mavon-editor --save 或者
$ yarn add mavon-editor

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

<template>
   <div>
      <mavon-editor v-model="value"/>
   </div>
</template>

<script>
export default {
   data() {
      return {
         value: '',
         defaultData: "preview"
      };
   },
};
</script>

<article v-html="value" ></article>

<script>
export default {
   data() {
      return {//value的值是经过markdown解析后的文本，可使用`@change="changeData"`在控制台打印显示
         value: `> 
          
你好

          

          
<code>java</code>
`,
         defaultData: "preview"
      };
   },
   methods: {
   }
};
</script>

 
 
### events 事件绑定
 
 <table>  <thead>   <tr>   <th>name 方法名</th>   <th align="center">params 参数</th>   <th>describe 描述</th>   </tr>  </thead>  <tbody>   <tr>   <td>change</td>   <td align="center">String: value , String: render</td>   <td>编辑区发生变化的回调事件(render: value 经过markdown解析后的结果)</td>   </tr>   <tr>   <td>save</td>   <td align="center">String: value , String: render</td>   <td>ctrl + s 的回调事件(保存按键,同样触发该回调)</td>   </tr>   <tr>   <td>fullScreen</td>   <td align="center">Boolean: status , String: value</td>   <td>切换全屏编辑的回调事件(boolean: 全屏开启状态)</td>   </tr>   <tr>   <td>readModel</td>   <td align="center">Boolean: status , String: value</td>   <td>切换沉浸式阅读的回调事件(boolean: 阅读开启状态)</td>   </tr>   <tr>   <td>htmlCode</td>   <td align="center">Boolean: status , String: value</td>   <td>查看html源码的回调事件(boolean: 源码开启状态)</td>   </tr>   <tr>   <td>subfieldToggle</td>   <td align="center">Boolean: status , String: value</td>   <td>切换单双栏编辑的回调事件(boolean: 双栏开启状态)</td>   </tr>   <tr>   <td>previewToggle</td>   <td align="center">Boolean: status , String: value</td>   <td>切换预览编辑的回调事件(boolean: 预览开启状态)</td>   </tr>   <tr>   <td>helpToggle</td>   <td align="center">Boolean: status , String: value</td>   <td>查看帮助的回调事件(boolean: 帮助开启状态)</td>   </tr>   <tr>   <td>navigationToggle</td>   <td align="center">Boolean: status , String: value</td>   <td>切换导航目录的回调事件(boolean: 导航开启状态)</td>   </tr>   <tr>   <td>imgAdd</td>   <td align="center">String: filename, File: imgfile</td>   <td>图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)</td>   </tr>   <tr>   <td>imgDel</td>   <td align="center">String: filename</td>   <td>图片文件删除回调事件(filename: 写在md中的文件名)</td>   </tr>  </tbody> </table>nn#### 代码高亮
 
 >  
  
如不需要hightlight代码高亮显示，你应该设置ishljs为false
 
 
 
 
开启代码高亮props
 
 

 
 
为优化插件体积，从v2.4.2起以下文件将默认使用cdnjs外链:
 
 
  highlight.js  github-markdown-css  katex(v2.4.7)  
 
代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载.
 github-markdown-css和katex仅会在mounted时加载
 
 
Notice:
 <a href="./src/lib/core/hljs/lang.hljs.css.js">可选配色方案</a> 和 <a href="./src/lib/core/hljs/lang.hljs.js">支持的语言</a> 是从 <a href="https://github.com/isagalaev/highlight.js/tree/master/src">highlight.js/9.12.0</a> 导出的
 
 >  
  
<a href="./doc/cn/no-cnd.md">不使用cdn，本地按需加载点击这里…</a>
 
 
 
 
#### 图片上传