基于Vue的markdown编辑器-mavonEditor

mavonEditor 以一个基于 Vue 的 Markdown 编辑器，支持多种个性化功能，支持所见即所得编辑模式、阅读模式等。

使用方法

安装

$ npm install mavon-editor --save

注册组件

// 全局注册// import with ES6import Vue from 'vue'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)new Vue({  'el': '#main',  data() {    return { value: '' }  }})

在 Vue 文件中编写代码

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

API 文档

props

/*默认工具栏按钮全部开启, 传入自定义对象例如: {   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 事件绑定

代码高亮

如不需要 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: 可选配色方案 和 支持的语言 是从 highlight.js/9.12.0 导出的

不使用cdn，本地按需加载点击这里...

图片上传

<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替换到文本原位置![...](0) -> ![...](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);       })    }  }}

图片上传详情点击这里...

注

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

快捷键

Dependencies (依赖)

• markdown-it
• auto-textarea

Markdown 语法拓展

• emoji
• subscript
• superscript
• container
• definition list
• abbreviation
• footnote
• insert
• mark
• todo list
• highlight
• katex
• images preview
• toc
• 可通过获取markdown-it对象引入其他语法插件

相关链接

• Github 地址：https://github.com/hinesboy/mavonEditor
• 在线实例：https://www.wenjiangs.com/markdowntohtml/#/

e
注册组件

// 全局注册// import with ES6import Vue from 'vue'import mavonEditor from 'mavon-editor'import 'mavon-editor/dist/css/index.css'// useVue.use(mavonEditor)new Vue({ 'el': '#main', data() { return { value: '' } }})
在 Vue 文件中编写代码
<div id="main"> <mavon-editor v-model="value"/></div>
API 文档
props

/*默认工具栏按钮全部开启, 传入自定义对象例如: { 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 事件绑定

代码高亮
如不需要 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: 可选配色方案 和 支持的语言 是从 highlight.js/9.12.0 导出的

不使用cdn，本地按需加载点击这里...

图片上传
<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); }) } }}
图片上传详情点击这里...

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

Dependencies (依赖)
markdown-it
auto-textarea
Markdown 语法拓展
emoji
subscript
superscript
container
definition list
abbreviation
footnote
insert
mark
todo list
highlight
katex
images preview
toc
可通过获取markdown-it对象引入其他语法插件
相关链接
Github 地址：https://github.com/hinesboy/mavonEditor
在线实例：https://www.wenjiangs.com/markdowntohtml/#/