前言
半路接手的后盾我的项目，外面的富文本编辑器应用的kindeditor，总感觉有些臃肿，而且之前的人在封装组件后，应用起来有些bug，于是从网上搜了一下，决定应用wangeditor进行从新封装，这里将应用笔记留下，供当前查看，并分享。
1.根本应用
这个没什么好说的了，去官网看文档就好了。
呈现的几个小问题：
- 留神设置一下editor的z-index（
editor.config.zIndex），因为他的默认z-index很大，很有可能遮挡住你的其余控件（如弹窗等）。 - 应用接口获取曾经保留的富文本内容，并将内容
v-bind到editor组件的时候，因为申请数据须要工夫，很大可能造成富文本框组件渲染时props还没获取到富文本内容，无奈在mounted事件中间接将内容回填到富文本框，这里我间接在editor组件中通过watch解决的。
2.图片上传
如果须要本人实现上传逻辑，可参考并配置editor.config.customUploadImg。
我的状况是，咱们有本人的图片上传组件，心愿应用本人的组件进行上传，这时须要配置editor.config.uploadImgFromMedia办法，替换本地上传性能，在其中退出本人的逻辑。
记着上传完结后调用editor.cmd.do办法将图片插入富文本内容中。
3.视频上传
同上，咱们也心愿应用本人的组件替换原始的本地上传，可是文档中没有提供相似editor.config.uploadImgFromMedia的办法。
没方法，只能应用自定义扩大Button菜单的形式实现了。
思路如下：
- 配置中删除video菜单。
- 退出自定义扩大Button菜单。
- 减少配置一个
editor.config.uploadVideoFromMedia函数，来实现咱们本人的逻辑。
在自定义扩大Button菜单的类中：
- 自定义菜单沿用之前video菜单的款式，保障款式统一。
- 在自定义菜单中，设置菜单点击事件去调用咱们本人配置的
editor.config.uploadVideoFromMedia。
这样，实现了视频上传中相似editor.config.uploadImgFromMedia的办法。
自定义扩大Button菜单的类的代码如下：
//wangeditor的自定义视频上传菜单import E from 'wangeditor';const BtnMenu = E.BtnMenu;class NewVideoMenu extends BtnMenu{ constructor(editor){ const $elem = E.$( `<div class="w-e-menu" data-title="视频"> <i class="w-e-icon-play"></i> </div>` ); super($elem, editor); } clickHandler(){ this.editor.config.uploadVideoFromMedia(); } tryChangeActive(){}}export default NewVideoMenu;通过管制自定义菜单在editor的配置数组editor.config.menus中的插入地位，来调整菜单的显示地位。
4.上传的视频在富文本框没有光标、无奈删除的问题
视频上传完结时：
let videoHTML = ' <video src="' + this.video_url + '" controls style="max-width:100%"></video> ';this.editor.cmd.do('insertHTML', videoHTML);视频标签的两侧各加一个空格的转义字符 ，能够使光标在富文本的视频四周呈现，并能够删除视频。测试环境中测试无效。
结语
大部分的需要下，咱们不须要应用性能过于简单的富文本控件，应用一个简洁轻量的富文本控件就好。wangEditor就是其中之一。除此之外，其可扩展性好，文档写的也不错，还是很举荐大家应用的。