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

fc8e6be52f87132eb752a51547671357.png

1、mavonEditor

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

ae96120e4307abc1ecbfd436c6371875.png
0d4636c3e27e64d1a1be02d77b47c8b1.png

安装

$ npm i mavon-editor -S

使用插件

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

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

371999caa625d1c25cba72973916f9ad.png
6b7d5619371258ec1bb7fb386f847f14.png
5a00814978cf9aad18cd3c16d56eae40.png

安装

$ npm i vue-quill-editor -S

使用插件

974378ad3bbeafe09680c1abe64b0434.png
# 文档|示例地址https://github.surmon.me/vue-quill-editor/# 仓库地址https://github.com/surmon-china/vue-quill-editor
92bf75925207e306641543f854df5085.png

3、Vue TinyMCE

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

ba64758ef86455e98c4d7f453fa6bcc3.png
2f650883ab4b897dfe25cffd13299ba5.png

安装

$ npm i @tinymce/tinymce-vue -S

使用插件

124898f8ae18d8e59ee2fdc609b5962a.png
# 文档地址https://www.tiny.cloud/docs/integrations/vue/# 仓库地址https://github.com/tinymce/tinymce-vue

4、Vditor

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

560da3a341b8dc8eb3555cc00100efba.png
168a31fef6ff434bea5f0e6cc53b1ed7.png
cf5398e753b8a8ce22f384030592b297.gif

分屏预览

安装

$ 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!')      },    })  },})
751915292e197c06393181418c7dd5f0.png
# 文档地址https://vditor.b3log.org/# 仓库地址https://github.com/Vanessa219/vditor

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

Logo

前往低代码交流专区

更多推荐