Vue编写markdown或者展示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取消缩进