html富文本编辑器插件_4个超棒的 vue.js 富文本编辑器组件Vue-Editor
今天给大家推荐4个高水准的 Vue 富文本 Markdown 编辑器组件。1、mavonEditormavon-editor 基于Vue的markdown编辑器,star高达4K+。支持所见即所得编辑模式、阅读模式等。安装$ npm i mavon-editor -S使用插件编辑器提供如下丰富的参数配置。# 文档地址https://github.com/hinesboy/mavonEditor..
·
今天给大家推荐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富文本编辑器,欢迎交流讨论。
更多推荐
所有评论(0)