今天给大家推荐4个高水准的 Vue 富文本 Markdown 编辑器组件。
![fc8e6be52f87132eb752a51547671357.png](https://i-blog.csdnimg.cn/blog_migrate/07483c471d72e53baeb7fa7b581cf3c3.jpeg)
1、mavonEditor
mavon-editor 基于Vue的markdown编辑器,star高达4K+。支持所见即所得编辑模式、阅读模式等。
![ae96120e4307abc1ecbfd436c6371875.png](https://i-blog.csdnimg.cn/blog_migrate/e802a34c623df95e304342a04e386bd9.jpeg)
![0d4636c3e27e64d1a1be02d77b47c8b1.png](https://i-blog.csdnimg.cn/blog_migrate/dafe7abf3ab078979a08d16d2f7427f7.jpeg)
安装
$ npm i mavon-editor -S
使用插件
编辑器提供如下丰富的参数配置。
![e245519f359b913b1c2528db01cdd91e.png](https://i-blog.csdnimg.cn/blog_migrate/395eade88387651ba4452eee38e2b26e.jpeg)
# 文档地址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](https://i-blog.csdnimg.cn/blog_migrate/ad1e50f843fc8e6257551d75c648e4b0.jpeg)
![6b7d5619371258ec1bb7fb386f847f14.png](https://i-blog.csdnimg.cn/blog_migrate/1ea6d866751d589ea55212863558bf27.jpeg)
![5a00814978cf9aad18cd3c16d56eae40.png](https://i-blog.csdnimg.cn/blog_migrate/d301401582ec0547b8327c5044f42bc9.jpeg)
安装
$ npm i vue-quill-editor -S
使用插件
![974378ad3bbeafe09680c1abe64b0434.png](https://i-blog.csdnimg.cn/blog_migrate/ff0a734ed0a49b499cf20e5ff5574ea4.jpeg)
# 文档|示例地址https://github.surmon.me/vue-quill-editor/# 仓库地址https://github.com/surmon-china/vue-quill-editor
![92bf75925207e306641543f854df5085.png](https://i-blog.csdnimg.cn/blog_migrate/c33b9ae07ed24a413f3c35f097efe835.jpeg)
3、Vue TinyMCE
tinymce-vue 基于 TinyMce 构建的 vue.js 富文本编辑器。
![ba64758ef86455e98c4d7f453fa6bcc3.png](https://i-blog.csdnimg.cn/blog_migrate/ae669fa11915ff288e3b9794dd0a2773.jpeg)
![2f650883ab4b897dfe25cffd13299ba5.png](https://i-blog.csdnimg.cn/blog_migrate/e78534c54807e1ca80d5bba57a5d3ad3.jpeg)
安装
$ npm i @tinymce/tinymce-vue -S
使用插件
![124898f8ae18d8e59ee2fdc609b5962a.png](https://i-blog.csdnimg.cn/blog_migrate/08df44d3c73cd35cdae719f757098807.jpeg)
# 文档地址https://www.tiny.cloud/docs/integrations/vue/# 仓库地址https://github.com/tinymce/tinymce-vue
4、Vditor
vditor 一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染和分屏预览模式。它使用 TypeScript 实现,支持JavaScript、Vue、React、Angular,提供桌面版。
![560da3a341b8dc8eb3555cc00100efba.png](https://i-blog.csdnimg.cn/blog_migrate/57da0be9d0020a5a17e3d6035502c5b1.jpeg)
![168a31fef6ff434bea5f0e6cc53b1ed7.png](https://i-blog.csdnimg.cn/blog_migrate/92f522fa5d961ffe693e8e5d52334c89.jpeg)
![cf5398e753b8a8ce22f384030592b297.gif](https://i-blog.csdnimg.cn/blog_migrate/158e254d1f45f854f46f761310fb87a7.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://i-blog.csdnimg.cn/blog_migrate/77e87a7d53bb38c79bc14eb5b8b42d69.jpeg)
# 文档地址https://vditor.b3log.org/# 仓库地址https://github.com/Vanessa219/vditor
好了,就分享到这里。如果小伙伴们有其它优秀的Vue富文本编辑器,欢迎交流讨论。