html富文本编辑器插件_4个超棒的 vue.js 富文本编辑器组件Vue-Editor

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

1、mavonEditor

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

安装

$ npm i mavon-editor -S

使用插件

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

# 文档地址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

使用插件

# 文档|示例地址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

使用插件

# 文档地址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富文本编辑器，欢迎交流讨论。