关于wangeditor:wangEditor的使用笔记

10次阅读

共计 1642 个字符，预计需要花费 5 分钟才能阅读完成。

半路接手的后盾我的项目，外面的富文本编辑器应用的 kindeditor，总感觉有些臃肿，而且之前的人在封装组件后，应用起来有些 bug，于是从网上搜了一下，决定应用 wangeditor 进行从新封装，这里将应用笔记留下，供当前查看，并分享。

这个没什么好说的了，去官网看文档就好了。
呈现的几个小问题：

留神设置一下 editor 的 z -index（editor.config.zIndex），因为他的默认 z -index 很大，很有可能遮挡住你的其余控件（如弹窗等）。
应用接口获取曾经保留的富文本内容，并将内容 v-bind 到 editor 组件的时候，因为申请数据须要工夫，很大可能造成富文本框组件渲染时 props 还没获取到富文本内容，无奈在 mounted 事件中间接将内容回填到富文本框，这里我间接在 editor 组件中通过 watch 解决的。

如果须要本人实现上传逻辑，可参考并配置 editor.config.customUploadImg。
我的状况是，咱们有本人的图片上传组件，心愿应用本人的组件进行上传，这时须要配置 editor.config.uploadImgFromMedia 办法，替换本地上传性能，在其中退出本人的逻辑。
记着上传完结后调用 editor.cmd.do 办法将图片插入富文本内容中。

同上，咱们也心愿应用本人的组件替换原始的本地上传，可是文档中没有提供相似 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 中的插入地位，来调整菜单的显示地位。

视频上传完结时：

let videoHTML = '&nbsp;<video src="' + this.video_url + '"controls style="max-width:100%"></video>&nbsp;';
this.editor.cmd.do('insertHTML', videoHTML);

视频标签的两侧各加一个空格的转义字符 ，能够使光标在富文本的视频四周呈现，并能够删除视频。测试环境中测试无效。

大部分的需要下，咱们不须要应用性能过于简单的富文本控件，应用一个简洁轻量的富文本控件就好。wangEditor 就是其中之一。除此之外，其可扩展性好，文档写的也不错，还是很举荐大家应用的。

正文完