富文本编辑器UMeditor在backbone中的使用

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%");