vue的markdown语法编辑器推荐 mavonEditor

小编亲测确实不错，给大家推荐一款支持markdown语法的编辑器-mavonEditor。

先看一下编辑器视图

视图是不是看着挺不错的，相信到这里你就会迫不及待的想去学习了吧。

mavonEditor安装

npm install mavon-editor --save

全局注册引入

在main.js里写入下面代码

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

除了全局引入，还有减少性能损耗的局部引用方法

局部引入

<template>
  <div id="app">
    <router-view />
    <mavonEditor :value="value"
                 defaultOpen='edit'
                 fontSize='16px'
                 :transition="false"
                 :toolbars="markdownOption"
                 @change="valueChange" />
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  name: 'App',
  components: {
    mavonEditor,
  },
  data() {
    return {
      value: '',
      // 设置编辑器的功能
      markdownOption: {
        preview: true, // 预览
      },
    }
  },
  methods: {
    // 监听编辑数据变化
    valueChange() {},
  },
}
</script>

api工具栏

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

图片上传的方法

<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);
           })
        }
    }}

通过上面的讲解，我们能够基本使用mavonEditor，下面我们介绍一下如何获取生成的内容。

我们需要先给编辑器添加ref属性，然后通过this.$refs.name 去获取编辑器的内容。

<mavonEditor 
    :value="value"
  defaultOpen='edit'
  fontSize='16px'
  :transition="false"
  :toolbars="markdownOption"
  @change="valueChange" 
  ref="md"/>

通过d_render获取html代码，通过d_value获取text内容

// 获取编辑器html代码
this.$refs.md.d_render

// 获取编辑器文本代码
this.$refs.md.d_value

以上就是mavonEditor基本使用方法，后期还会根据使用情况继续补充