UMeditor,简称UM,是为满足广大门户网站对于简单发帖框,或者回复框需求所定制的在线富文本编辑器。 UM的主要特点就是容量和加载速度上的改变,主文件的代码量为139k,而且放弃了使用传统的iframe模式,采用了div的加载方式, 以达到更快的加载速度和零加载失败率。现在UM的第一个使用者是百度贴吧,贴吧每天几亿的pv是对UM各种指标的最好测试平台。 当然随着代码的减少,UM的功能对于UE来说还是有所减少,但我们经过调研和大家对于UM提出的各种意见,提供了现在UM的功能版本, 虽然有删减,但也有增加,比如拖拽图片上传,chrome的图片拖动改变大小等。让UM能在功能和体积上达到一个平衡。UM还会提供 CDN方式,减少大家部署的成本。我们的目标不仅是要提高在线编辑的编辑体验,也希望能改变前端技术中关于富文本技术的门槛,让大家不再觉得这块是个大坑
在backbone框架中因为每次model修改, 都会调用render进行页面重绘, 或者从别的view到含有editor的view切换的时候, UM对象已经存在就会有问题
// view多次渲染导致UM出现问题, 所以用这样一种诡异的方法判断是否需要destroy
if (UM.getEditor('myEditor', {
initialFrameHeight: 500,
autoHeightEnabled: false
}).$body) {
UM.getEditor('myEditor').destroy();
this.um = UM.getEditor('myEditor', {
initialFrameHeight: 500,
autoHeightEnabled: false
});
}
内容赋值:
// 第二次就没有ready了, 所以统一设置一个延迟好了
if (UM.getEditor('myEditor').$body) {
UM.getEditor('myEditor').setContent(data.protocolContent);
}
else {
UM.getEditor('myEditor').addListener("ready", function () { UM.getEditor('myEditor').setContent(data.protocolContent);
});
}
UMeditor,生成富文本编辑框以后,改变窗口大小会出现横向滚动条,即使你调用接口设置了编辑器的宽度为100%。如
var um = UM.getEditor('<%=txtContent.ClientID%>');
um.setWidth("100%");
这是由于UMeditor内部生成了一个css类为“edui-body-container”的DIV来呈现用户输入区域,而这个div的宽度是获取的目标元素的宽度绝对值。这也就解释了如果目标元素的宽度比较小,我们即使设置了UMeditor的宽度为100%,可编辑区域也会比较小的现象。
我们可以有两种方式来解决:
第一、修改源码,找到生成edui-body-container的位置,将其修改掉;
第二、直接在初始化UMeditor以后设置edui-body-container宽度即可。
所以实现第二种方法:
var um = UM.getEditor('<%=txtContent.ClientID%>');
um.setWidth("100%");
$(".edui-body-container").css("width", "98%");