这次基于在编辑器中选择素材库素材的需求来对百度编辑器进行了二次开发
1.关于百度编辑器的二次开发,一般多为添加按钮、弹窗或者下拉框。若我们需要为编辑器添加这些功能,需要给编辑器中新引入JS文件。对于在媒立方系统中,我们可以在ueditor指令中添加(这样的话各渠道的编辑器都会存在添加的功能),也可以在lazyLoad中引入自定义的JS文件(这样的话只有在引入这个JS的编辑器中存在添加的功能)。
2.二次开发JS文件编写,自定义弹窗:
使用UE.ui.Dialog方法进行注册;
自定义按钮:
使用UE.ui.Button方法进行注册,与注册弹窗区别的是按钮需要返回
无论是注册新的弹窗还是按钮或者是下拉框,都需要基于UE.registerUI方法,这个方法在百度编辑器的文档中有详细的介绍。
3.自定义弹窗的使用angular
编辑器的自定义弹窗是一个iframe,在这个iframe中我们可以使用任何框架,本次开发中由于需要在弹窗中展现素材库的内容、分类还要使用分页,所以在弹窗中我又构建了一个angular环境:
需要注意的是这里的angular环境是独立的,拥有自己的ng-app(angular边界),所以我们以前封装的指令或者服务在这里都不能使用,需要使用的话必须将原来的代码注册在该环境的主模块中,例如:
4.弹窗后的回调与数据传输
这里的弹窗没有$moadl那样方便,我们需要将弹窗中选择的素材插入到编辑中,那么如何拿到弹窗中的数据就是核心问题。目前有两种方式可以拿到数据,一种就是使用浏览器的本地缓存,另一种是使用编辑器的registerCommand方法:
如图所示形参data、width和height就是从弹窗传回的值,需要注意的是注册的uiName:dialog_material是弹窗跟编辑器连接的桥梁,而且这个uiName不支持大写字母,dialogMaterial这样的话就不会成功拿到数据(亲测!!!!!!!)
5.编辑器插入素材
V根据百度编辑器的api文档,插入视频需要调用insertvideo方法,但是调用这个方法后视频无法播放。出现这个原因是因为调用这个方法后会生成<embed>标签,这个标签在编辑器中无法播放,解决方法是使用:
\
insertHtml方法通过插入iframe标签播放视频,插入第三方视频地址也是通过生成iframe标签进行播放。这里还有一个需要注意的地方,使用iframe而不是video标签的原因是,目前版本的百度编辑器对H5标签的解析还不够好,在编辑器中插入video标签,使用ue.getContent()方法得不到video标签,
所以使用iframe进行播放。
插入图片同理使用insertHtml方法