今天给大家推荐4个高水准的 Vue 富文本 Markdown 编辑器组件。

1、mavonEditor

mavon-editor 基于Vue的markdown编辑器，star高达4K+。支持所见即所得编辑模式、阅读模式等。

安装

$ npm i mavon-editor -S

使用插件

<template>
  <div class="mavonEditor">
    <mavon-editor
      ref="editor"
      v-model="editorText"
      :toolbars="editorToolbars"
      @change="updateHtml"  
    >
    </mavon-editor>
  </div>
</template>
<script>
import { mavonEditor } from "mavon-editor"
import "mavon-editor/dist/css/index.css"

export default {
  components: { mavonEditor },
  data() {
    return {
      editorText: '### how to use mavonEditor',
      editorToolbars: {
        bold: true, //粗体
        italic: true, //斜体
        link: true, //链接
        ... //更多配置
      }
    }
  },
  methods: {
    // 当值发生改变时触发 (会自动将 markdown 和 html 传递到这个方法中)
    updateHtml(markdown, html) {
      console.log("markdown内容: " + markdown);
      console.log("html内容:" + markdown);
    }
  }
}
</script>

编辑器提供如下丰富的参数配置。

# 文档地址
https://github.com/hinesboy/mavonEditor/blob/master/README.md

# 仓库地址
https://github.com/hinesboy/mavonEditor

2、Vue-Quill-Editor

vue-quill-editor 一款超漂亮的基于 Quill 的 Vue.js 版本富文本编辑器。star高达5.7K。

安装

$ npm i vue-quill-editor -S

使用插件

<template>
  <div>
    <quill-editor ref="myTextEditor" v-model="content" :options="editorOption" @change="onEditorChange($event)"></quill-editor>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor';

export default {
  components: { quillEditor },
  data(){
    return{
      content: '',
      editorOption: {
        placeholder: 'I am snow example',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ... //更多配置
          ]
        }
      },
    }
  },
  methods:{
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html;
    },
  }
}
</script>

# 文档|示例地址
https://github.surmon.me/vue-quill-editor/

# 仓库地址
https://github.com/surmon-china/vue-quill-editor

3、Vue TinyMCE

tinymce-vue 基于 TinyMce 构建的 vue.js 富文本编辑器。

安装

$ npm i @tinymce/tinymce-vue -S

使用插件

<template>
  <div id="app">
    <tiny-editor
    :init="{
      height: 500,
      menubar: false,
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
      ],
      toolbar: 'undo redo | formatselect | bold italic backcolor | \
        alignleft aligncenter alignright alignjustify | \
        bullist numlist outdent indent | removeformat | help'
    }"
    >
    </tiny-editor>
  </div>
</template>
<script>
import TinyEditor from '@tinymce/tinymce-vue'

export default {
  components: {
    'tiny-editor': TinyEditor
  }
}
</script>

# 文档地址
https://www.tiny.cloud/docs/integrations/vue/

# 仓库地址
https://github.com/tinymce/tinymce-vue

4、Vditor

vditor 一款浏览器端的 Markdown 编辑器，支持所见即所得、即时渲染和分屏预览模式。它使用 TypeScript 实现，支持JavaScript、Vue、React、Angular，提供桌面版。

安装

$ npm i vditor -S

使用插件

new Vue({
  el: '#app',
  data: {
    contentEditor: '',
  },
  mounted () {
    this.contentEditor = new Vditor('vditor', {
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: false,
      },
      after: () => {
        this.contentEditor.setValue('hello, Vditor + Vue!')
      },
    })
  },
})

# 文档地址
https://vditor.b3log.org/

# 仓库地址
https://github.com/Vanessa219/vditor

好了，就分享到这里。如果小伙伴们有其它优秀的Vue富文本编辑器，欢迎交流讨论。