坚果之云 Markdown之前做博客开发的时候，需要Markdown的支持，找了很多资料，但是都是七拼八凑的，要么是告诉你怎么编写Markdown，要么是告诉你怎么展示，我把它们总结一下。
1、介绍mavonEditor
官网：https://md.zhystar.com/
github：https://github.com/hinesboy/mavonEditor
mavonEditor是基于Vue的Markdown 编辑器插件，支持自定义界面，代码高亮，图片上传，这些在github中都有写到，相关资料可以去github查看
2、安装mavonEditor
$ npm install mavon-editor –save 或者$ yarn add mavon-editor12
在main.js中
import mavonEditor from ‘mavon-editor’import ‘mavon-editor/dist/css/index.css’Vue.use(mavonEditor)123
3、使用mavonEditor编辑Markdown
在.vue文件中
12345678910111213141516
打开页面显示可编辑的页面
4、使用v-html展示Markdown
123456789101112131415161718
以下取自官网，查看详细信息请移步官网
API 文档
props
name 名称type 类型default 默认值describe 描述
valueString初始值
languageStringzh-CN语言选择，暂支持 zh-CN: 中文简体 ， en: 英文 ， fr: 法语, pt-BR: 葡萄牙语, ru: 俄语
fontSizeString15px编辑区域文字大小
scrollStyleBooleantrue开启滚动条样式(暂时仅支持chrome)
boxShadowBooleantrue开启边框阴影
subfieldBooleantruetrue： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
defaultOpenStringedit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit
placeholderString开始编辑…输入框为空时默认提示文本
editableBooleantrue是否允许编辑
codeStyleStringcode-githubMarkdown样式： 默认github, 可选配色方案
toolbarsFlagBooleantrue工具栏是否显示
navigationBooleanfalse默认展示目录
ishljsBooleantrue代码高亮
imageFilterfunctionnull图片过滤函数，参数为一个File Object，要求返回一个Boolean, true表示文件合法，false表示文件不合法
imageClickfunctionnull图片点击事件，默认为预览，可覆盖
toolbarsObject如下例工具栏
/* 默认工具栏按钮全部开启, 传入自定义对象 例如: { 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, // 预览 }1234567891011121314151617181920212223242526272829303132333435363738394041424344
events 事件绑定
name 方法名params 参数describe 描述
changeString: value , String: render编辑区发生变化的回调事件(render: value 经过Markdown解析后的结果)
saveString: value , String: renderctrl + s 的回调事件(保存按键,同样触发该回调)
fullScreenBoolean: status , String: value切换全屏编辑的回调事件(boolean: 全屏开启状态)
readModelBoolean: status , String: value切换沉浸式阅读的回调事件(boolean: 阅读开启状态)
htmlCodeBoolean: status , String: value查看html源码的回调事件(boolean: 源码开启状态)
subfieldToggleBoolean: status , String: value切换单双栏编辑的回调事件(boolean: 双栏开启状态)
previewToggleBoolean: status , String: value切换预览编辑的回调事件(boolean: 预览开启状态)
helpToggleBoolean: status , String: value查看帮助的回调事件(boolean: 帮助开启状态)
navigationToggleBoolean: status , String: value切换导航目录的回调事件(boolean: 导航开启状态)
imgAddString: filename, File: imgfile图片文件添加回调事件(filename: 写在md中的文件名, File: File Object)
imgDelString: filename图片文件删除回调事件(filename: 写在md中的文件名)
代码高亮
如不需要hightlight代码高亮显示，你应该设置ishljs为false
开启代码高亮props
// ishljs默认为true12
为优化插件体积，从v2.4.2起以下文件将默认使用cdnjs外链:
highlight.js
github-Markdown-css
katex(v2.4.7)
代码高亮highlight.js中的语言解析文件和代码高亮样式将在使用时按需加载.
github-Markdown-css和katex仅会在mounted时加载
Notice:
可选配色方案 和 支持的语言 是从 highlight.js/9.12.0 导出的
不使用cdn，本地按需加载点击这里…
图片上传
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 : ，$vm为 .$refs.md */ $vm.$img2Url(pos, url); }) } }}123456789101112131415161718192021222324252627
图片上传详情点击这里…
注
<strong>默认大小样式为 min-height: 300px , min-width: 300px 可自行覆盖</strong>
<strong>基础z-index: 1500</strong>
<strong>仅用作展示可以设置props: toolbarsFlag: false , subfield: false, defaultOpen: "preview"</strong>
快捷键
keykeycode功能
F8119开启/关闭导航
F9120预览/编辑切换
F10121开启/关闭全屏
F11122开启/关闭阅读模式
F12123单栏/双栏切换
TAB9缩进
CTRL + S17 + 83触发保存
CTRL + D17 + 68删除选中行
CTRL + Z17 + 90上一步
CTRL + Y17 + 89下一步
CTRL + BreakSpace17 + 8清空编辑
CTRL + B17 + 66<strong>加粗</strong>
CTRL + I17 + 73斜体
CTRL + H17 + 72# 标题
CTRL + 117 + 97 or 49# 标题
CTRL + 217 + 98 or 50## 标题
CTRL + 317 + 99 or 51### 标题
CTRL + 417 + 100 or 52#### 标题
CTRL + 517 + 101 or 53##### 标题
CTRL + 617 + 102 or 54###### 标题
CTRL + U17 + 85++下划线++
CTRL + M17 + 77标记
CTRL + Q17 + 81> 引用
CTRL + O17 + 791. 有序列表
CTRL + L17 + 76链接
CTRL + ALT + S17 + 18 + 83上角标
CTRL + ALT + U17 + 18 + 85- 无序列表
CTRL + ALT + C17 + 18 + 67代码块
CTRL + ALT + L17 + 18 + 76
CTRL + ALT + T17 + 18 + 84表格
CTRL + SHIFT + S17 + 16 + 83下角标
CTRL + SHIFT + D17 + 16 + 68中划线
CTRL + SHIFT + C17 + 16 + 67居中
CTRL + SHIFT + L17 + 16 + 76居左
CTRL + SHIFT + R17 + 16 + 82居右
SHIFT + TAB16 + 9取消缩进
