Vue2.6使用 wangEditor5 富文本编辑器
source link: https://chegva.com/5405.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Vue2.6使用 wangEditor5 富文本编辑器
最近工作中需要用到富文本编辑器，博客上用的是 UEditor ，感觉比较重，而且也不更新维护了。想找个功能适用，较轻量的富文本编辑器用用，网上找了下，国人写的 wangEditor 感觉比较适合。目前常见的富文本编辑器有以下几种：
常见富文本编辑器对比
WangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。一个国人独立开发的基于javascript和css开发的web富文本编辑器，之前用过感觉还是很不错的，UI漂亮，中文文档齐全并且开源。不足的地方在于更新不及时，没有强大的团队支撑。不过细心的会发现现在开始有动作了，成立了wangeditor-team来进行维护，可能也是应了广大用户的需求。
UEditor：由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。不足在于官方很久没有更新了，现在已没有专门维护了，很多在线体验、下载地址都关闭了，而且样式比较老旧，不符合新时代的审美。插件使用复杂，前后端不分离。
Kindeditor：一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。文档齐全，为中文，阅读方便。缺点：图片上传存在问题，上传历史过多，会全部加载，导致浏览器卡顿。
TinyMCE：是一款易用、且功能强大的所见即所得的富文本编辑器。优势：插件丰富，自带插件基本涵盖日常所需功能；接口丰富，可扩展性强，有能力可以无限拓展功能；界面好看，符合现代审美；提供经典、内联、沉浸无干扰三种模式；多语言支持，官网可下载几十种语言。官方也在之前发布了 vue 版本的 tinymce-vue，帮你封装好了很多东西
Vue-Quill-Editor：基于 Quill、适用于 Vue 的富文本编辑器，支持服务端渲染和单页应用。据说大企业用的比较多，不限制框架，但是需要定制，理念很先进。
mavonEditor：国人开源的一款比较好用的markdown编辑器，可以使用普通文本编辑器编写的标记语言，通过简单的标记语法，使普通文本内容具有一定的格式。
更多详见：vue富文本编辑器
快速入门使用 wangEditor5
在github找了个老铁基于 wangEditor5 二次封装过的基于vue2的版本 wangeditor5-for-vue2，用着还不错，首先来安装下。
// 安装wangeditor
npm i @wangeditor/editor wangeditor5-for-vue2
// 安装支持markdown格式的插件
npm i @wangeditor/plugin-md全局注册，更多参考使用文档：https://clinfc.github.io/wangeditor5-for-vue2/guide/
import { WeToolbar, WeEditable, WeEditor, registToggleMode } from 'wangeditor5-for-vue2'
import '@wangeditor/editor/dist/css/style.css'
// 注册markdown插件
import { Boot } from '@wangeditor/editor'
import markdownModule from '@wangeditor/plugin-md'
Boot.registerModule(markdownModule)
registToggleMode({ menu: 'toggleModeButton' })
export default (app) => {
app.use(WeToolbar)
app.use(WeEditable)
app.use(WeEditor)
}使用示例：
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK