Vue编写markdown或者展示markdown

之前做博客开发的时候，需要markdown的支持，找了很多资料，但是都是七拼八凑的，要么是告诉你怎么编写markdown，要么是告诉你怎么展示，我把它们总结一下。

1、介绍mavonEditor

官网：https://md.zhystar.com/ github：https://github.com/hinesboy/mavonEditor

<hr>

mavonEditor是基于Vue的markdown 编辑器插件，支持自定义界面，代码高亮，图片上传，这些在github中都有写到，相关资料可以去github查看

2、安装mavonEditor

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

在main.js中

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

3、使用mavonEditor编辑markdown

在.vue文件中

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

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

打开页面显示可编辑的页面

4、使用v-html展示markdown

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

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

          

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

以下取自<a href="https://github.com/hinesboy/mavonEditor">官网</a>，查看详细信息请移步<a href="https://github.com/hinesboy/mavonEditor">官网</a>

API 文档

props

<table> <thead> <tr> <th>name 名称</th> <th align="center">type 类型</th> <th align="center">default 默认值</th> <th>describe 描述</th> </tr> </thead> <tbody> <tr> <td>value</td> <td align="center">String</td> <td align="center"></td> <td>初始值</td> </tr> <tr> <td>language</td> <td align="center">String</td> <td align="center">zh-CN</td> <td>语言选择，暂支持 zh-CN: 中文简体 ， en: 英文 ， fr: 法语, pt-BR: 葡萄牙语, ru: 俄语</td> </tr> <tr> <td>fontSize</td> <td align="center">String</td> <td align="center">15px</td> <td>编辑区域文字大小</td> </tr> <tr> <td>scrollStyle</td> <td align="center">Boolean</td> <td align="center">true</td> <td>开启滚动条样式(暂时仅支持chrome)</td> </tr> <tr> <td>boxShadow</td> <td align="center">Boolean</td> <td align="center">true</td> <td>开启边框阴影</td> </tr> <tr> <td>subfield</td> <td align="center">Boolean</td> <td align="center">true</td> <td>true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)</td> </tr> <tr> <td>defaultOpen</td> <td align="center">String</td> <td align="center"></td> <td>edit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit</td> </tr> <tr> <td>placeholder</td> <td align="center">String</td> <td align="center">开始编辑…</td> <td>输入框为空时默认提示文本</td> </tr> <tr> <td>editable</td> <td align="center">Boolean</td> <td align="center">true</td> <td>是否允许编辑</td> </tr> <tr> <td>codeStyle</td> <td align="center">String</td> <td align="center">code-github</td> <td>markdown样式： 默认github, <a href="./src/lib/core/hljs/lang.hljs.css.js">可选配色方案</a></td> </tr> <tr> <td>toolbarsFlag</td> <td align="center">Boolean</td> <td align="center">true</td> <td>工具栏是否显示</td> </tr> <tr> <td>navigation</td> <td align="center">Boolean</td> <td align="center">false</td> <td>默认展示目录</td> </tr> <tr> <td>ishljs</td> <td align="center">Boolean</td> <td align="center">true</td> <td>代码高亮</td> </tr> <tr> <td>imageFilter</td> <td align="center">function</td> <td align="center">null</td> <td>图片过滤函数，参数为一个File Object，要求返回一个Boolean, true表示文件合法，false表示文件不合法</td> </tr> <tr> <td>imageClick</td> <td align="center">function</td> <td align="center">null</td> <td>图片点击事件，默认为预览，可覆盖</td> </tr> <tr> <td>toolbars</td> <td align="center">Object</td> <td align="center">如下例</td> <td>工具栏</td> </tr> </tbody> </table>nn``` /* 默认工具栏按钮全部开启, 传入自定义对象 例如: { bold: true, // 粗体 italic: true,// 斜体 header: true,// 标题 } 此时, 仅仅显示此三个功能键 / toolbars: { bold: true, // 粗体 italic: true, // 斜体 header: true, // 标题 underline: true, // 下划线 strikethrough: true, // 中划线 mark: true, // 标记 superscript: true, // 上角标 subscript: true, // 下角标 quote: true, // 引用 ol: true, // 有序列表 ul: true, // 无序列表 link: true, // 链接 imagelink: true, // 图片链接 code: true, // code table: true, // 表格 fullscreen: true, // 全屏编辑 readmodel: true, // 沉浸式阅读 htmlcode: true, // 展示html源码 help: true, // 帮助 / 1.3.5 / undo: true, // 上一步 redo: true, // 下一步 trash: true, // 清空 save: true, // 保存（触发events中的save事件） / 1.4.2 / navigation: true, // 导航目录 / 2.1.8 / alignleft: true, // 左对齐 aligncenter: true, // 居中 alignright: true, // 右对齐 / 2.2.1 */ subfield: true, // 单双栏模式 preview: true, // 预览 }

 
 
### 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
 
 

// ishljs默认为true <mavon-editor :ishljs = "true"></mavon-editor>

 
 
为优化插件体积，从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>
 
 
 
 
#### 图片上传
 
 

<template> <mavon-editor ref=md @imgAdd="$imgAdd" @imgDel="$imgDel"></mavon-editor> </template> exports default { methods: { // 绑定@imgAdd event $imgAdd(pos, $file){ // 第一步.将图片上传到服务器. var formdata = new FormData(); formdata.append('image', $file); axios({ url: 'server url', method: 'post', data: formdata, headers: { 'Content-Type': 'multipart/form-data' }, }).then((url) => { // 第二步.将返回的url替换到文本原位置 -> /** * $vm 指为mavonEditor实例，可以通过如下两种方式获取 * 1. 通过引入对象获取: import {mavonEditor} from ... 等方式引入后，$vm为mavonEditor * 2. 通过$refs获取: html声明ref : <mavon-editor ref=md ></mavon-editor>，$vm为 this.$refs.md` */ $vm.$img2Url(pos, url); }) } } }

```

<a href="./doc/cn/upload-images.md">图片上传详情点击这里…</a>

注

默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖 基础z-index: 1500 仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: "preview"

快捷键

<table> <thead> <tr> <th>key</th> <th align="center">keycode</th> <th align="center">功能</th> </tr> </thead> <tbody> <tr> <td>F8</td> <td align="center">119</td> <td align="center">开启/关闭导航</td> </tr> <tr> <td>F9</td> <td align="center">120</td> <td align="center">预览/编辑切换</td> </tr> <tr> <td>F10</td> <td align="center">121</td> <td align="center">开启/关闭全屏</td> </tr> <tr> <td>F11</td> <td align="center">122</td> <td align="center">开启/关闭阅读模式</td> </tr> <tr> <td>F12</td> <td align="center">123</td> <td align="center">单栏/双栏切换</td> </tr> <tr> <td>TAB</td> <td align="center">9</td> <td align="center">缩进</td> </tr> <tr> <td>CTRL + S</td> <td align="center">17 + 83</td> <td align="center">触发保存</td> </tr> <tr> <td>CTRL + D</td> <td align="center">17 + 68</td> <td align="center">删除选中行</td> </tr> <tr> <td>CTRL + Z</td> <td align="center">17 + 90</td> <td align="center">上一步</td> </tr> <tr> <td>CTRL + Y</td> <td align="center">17 + 89</td> <td align="center">下一步</td> </tr> <tr> <td>CTRL + BreakSpace</td> <td align="center">17 + 8</td> <td align="center">清空编辑</td> </tr> <tr> <td>CTRL + B</td> <td align="center">17 + 66</td> <td align="center">加粗</td> </tr> <tr> <td>CTRL + I</td> <td align="center">17 + 73</td> <td align="center">斜体</td> </tr> <tr> <td>CTRL + H</td> <td align="center">17 + 72</td> <td align="center"># 标题</td> </tr> <tr> <td>CTRL + 1</td> <td align="center">17 + 97 or 49</td> <td align="center"># 标题</td> </tr> <tr> <td>CTRL + 2</td> <td align="center">17 + 98 or 50</td> <td align="center">## 标题</td> </tr> <tr> <td>CTRL + 3</td> <td align="center">17 + 99 or 51</td> <td align="center">### 标题</td> </tr> <tr> <td>CTRL + 4</td> <td align="center">17 + 100 or 52</td> <td align="center">#### 标题</td> </tr> <tr> <td>CTRL + 5</td> <td align="center">17 + 101 or 53</td> <td align="center">##### 标题</td> </tr> <tr> <td>CTRL + 6</td> <td align="center">17 + 102 or 54</td> <td align="center">###### 标题</td> </tr> <tr> <td>CTRL + U</td> <td align="center">17 + 85</td> <td align="center">++下划线++</td> </tr> <tr> <td>CTRL + M</td> <td align="center">17 + 77</td> <td align="center"><mark>标记</mark></td> </tr> <tr> <td>CTRL + Q</td> <td align="center">17 + 81</td> <td align="center">> 引用</td> </tr> <tr> <td>CTRL + O</td> <td align="center">17 + 79</td> <td align="center">1. 有序列表</td> </tr> <tr> <td>CTRL + L</td> <td align="center">17 + 76</td> <td align="center"><a href="">链接</a></td> </tr> <tr> <td>CTRL + ALT + S</td> <td align="center">17 + 18 + 83</td> <td align="center"><sup>上角标</sup></td> </tr> <tr> <td>CTRL + ALT + U</td> <td align="center">17 + 18 + 85</td> <td align="center">- 无序列表</td> </tr> <tr> <td>CTRL + ALT + C</td> <td align="center">17 + 18 + 67</td> <td align="center">```代码块</td> </tr> <tr> <td>CTRL + ALT + L</td> <td align="center">17 + 18 + 76</td> <td align="center"> </td> </tr> <tr> <td>CTRL + ALT + T</td> <td align="center">17 + 18 + 84</td> <td align="center">表格</td> </tr> <tr> <td>CTRL + SHIFT + S</td> <td align="center">17 + 16 + 83</td> <td align="center"><sub>下角标</sub></td> </tr> <tr> <td>CTRL + SHIFT + D</td> <td align="center">17 + 16 + 68</td> <td align="center"><s>中划线</s></td> </tr> <tr> <td>CTRL + SHIFT + C</td> <td align="center">17 + 16 + 67</td> <td align="center">居中</td> </tr> <tr> <td>CTRL + SHIFT + L</td> <td align="center">17 + 16 + 76</td> <td align="center">居左</td> </tr> <tr> <td>CTRL + SHIFT + R</td> <td align="center">17 + 16 + 82</td> <td align="center">居右</td> </tr> <tr> <td>SHIFT + TAB</td> <td align="center">16 + 9</td> <td align="center">取消缩进</td> </tr> </tbody> </table>nn > 原文地址：https://blog.csdn.net/wn1245343496/article/details/82147850?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168905675416800192289255%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=168905675416800192289255&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-25-82147850-null-null.142^v88^insert_down38v5,239^v2^insert_chatgpt&utm_term=markdown