关于angularjs+ueditor的一个bug
2016-12-03 10:51
357 查看
最近在写一个可配置,灵活度比较高的问卷调查系统,实现后台配置动态生成问卷,使用到了angularjs和百度的富文本编辑器ueditor,为了实现文本内内容的绑定在网上找了一段集成代码,其实就是一个指令。使用过程中发现了一个不容易发现的bug,就是在编辑器中插入图片之后不再进行其他内容的插入,此时图片地址是错误的。以下是修改以后的代码:
angular-ueditor.js
(function() {
"use strict";
(function() {
var NGUeditor;
NGUeditor = angular.module("ng.ueditor", []);
NGUeditor.directive("ueditor", [
function() {
return {
restrict: "C",
require: "ngModel",
scope: {
config: "=",
ready: "="
},
link: function($S, element, attr, ctrl) {
var _NGUeditor, _updateByRender;
_updateByRender = false;
_NGUeditor = (function() {
function _NGUeditor() {
this.bindRender();
this.initEditor();
return;
}
/**
* 初始化编辑器
* @return {[type]} [description]
*/
_NGUeditor.prototype.initEditor = function() {
var _UEConfig, _editorId, _self;
_self = this;
if (typeof UE === 'undefined') {
console.error("Please import the local resources of ueditor!");
return;
}
_UEConfig = $S.config ? $S.config : {};
_editorId = attr.id ? attr.id : "_editor" + (Date.now());
element[0].id = _editorId;
this.editor = new UE.ui.Editor(_UEConfig);
this.editor.render(_editorId);
return this.editor.ready(function() {
_self.editorReady = true;
_self.editor.addListener("contentChange", function() {
//此处设置一个延迟,防止图片还没有从服务器返回,从而获取到的是loading图片
setTimeout(function() {
ctrl.$setViewValue(_self.editor.getContent());
if (!_updateByRender) {
if (!$S.$$phase) {
$S.$apply();
}
}
_updateByRender = false;
}, 50)
});
if (_self.modelContent && _self.modelContent.length > 0) {
_self.setEditorContent();
}
if (typeof $S.ready === "function") {
$S.ready(_self.editor);
}
$S.$on("$destroy", function() {
if (!attr.id && UE.delEditor) {
UE.delEditor(_editorId);
}
});
});
};
_NGUeditor.prototype.setEditorContent = function(content) {
if (content == null) {
content = this.modelContent;
}
if (this.editor && this.editorReady) {
this.editor.setContent(content);
}
};
_NGUeditor.prototype.bindRender = function() {
var _self;
_self = this;
ctrl.$render = function() {
_self.modelContent = (ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue);
_updateByRender = true;
_self.setEditorContent();
};
};
return _NGUeditor;
})();
new _NGUeditor();
}
};
}
]);
})();
}).call(this);该指令通过监听ueditor的contentChange事件来给ng-model变量赋值,从而达到数据绑定的目的。但是如果内容是图片就会有一个请求服务器的间隔。如果直接在文本框输入一张图片,打印出这个model的值,可以发现值是loading图片的地址,我猜测ueditor在请求之前给content赋值为loading图片地址,待图片地址从服务器返回后进行覆盖。所以如果在图片地址还没返回之前取content的值是错误的,所以我设置了一个50ms的延迟,虽然不能从根本上解决,但是主要保证图片请求服务器并返回地址的时间少于50ms就没问题,另外这样的另一个不足就是不管图片还是文字内容变化都会有50ms延迟。还有就是这个bug只会在最后一个输入的是图片才会出现,因为如果你紧跟着输入文字会出触发contentChange事件去获取content,此时图片地址已经返回,获取的就是正确的地址。
angular-ueditor.js
(function() {
"use strict";
(function() {
var NGUeditor;
NGUeditor = angular.module("ng.ueditor", []);
NGUeditor.directive("ueditor", [
function() {
return {
restrict: "C",
require: "ngModel",
scope: {
config: "=",
ready: "="
},
link: function($S, element, attr, ctrl) {
var _NGUeditor, _updateByRender;
_updateByRender = false;
_NGUeditor = (function() {
function _NGUeditor() {
this.bindRender();
this.initEditor();
return;
}
/**
* 初始化编辑器
* @return {[type]} [description]
*/
_NGUeditor.prototype.initEditor = function() {
var _UEConfig, _editorId, _self;
_self = this;
if (typeof UE === 'undefined') {
console.error("Please import the local resources of ueditor!");
return;
}
_UEConfig = $S.config ? $S.config : {};
_editorId = attr.id ? attr.id : "_editor" + (Date.now());
element[0].id = _editorId;
this.editor = new UE.ui.Editor(_UEConfig);
this.editor.render(_editorId);
return this.editor.ready(function() {
_self.editorReady = true;
_self.editor.addListener("contentChange", function() {
//此处设置一个延迟,防止图片还没有从服务器返回,从而获取到的是loading图片
setTimeout(function() {
ctrl.$setViewValue(_self.editor.getContent());
if (!_updateByRender) {
if (!$S.$$phase) {
$S.$apply();
}
}
_updateByRender = false;
}, 50)
});
if (_self.modelContent && _self.modelContent.length > 0) {
_self.setEditorContent();
}
if (typeof $S.ready === "function") {
$S.ready(_self.editor);
}
$S.$on("$destroy", function() {
if (!attr.id && UE.delEditor) {
UE.delEditor(_editorId);
}
});
});
};
_NGUeditor.prototype.setEditorContent = function(content) {
if (content == null) {
content = this.modelContent;
}
if (this.editor && this.editorReady) {
this.editor.setContent(content);
}
};
_NGUeditor.prototype.bindRender = function() {
var _self;
_self = this;
ctrl.$render = function() {
_self.modelContent = (ctrl.$isEmpty(ctrl.$viewValue) ? "" : ctrl.$viewValue);
_updateByRender = true;
_self.setEditorContent();
};
};
return _NGUeditor;
})();
new _NGUeditor();
}
};
}
]);
})();
}).call(this);该指令通过监听ueditor的contentChange事件来给ng-model变量赋值,从而达到数据绑定的目的。但是如果内容是图片就会有一个请求服务器的间隔。如果直接在文本框输入一张图片,打印出这个model的值,可以发现值是loading图片的地址,我猜测ueditor在请求之前给content赋值为loading图片地址,待图片地址从服务器返回后进行覆盖。所以如果在图片地址还没返回之前取content的值是错误的,所以我设置了一个50ms的延迟,虽然不能从根本上解决,但是主要保证图片请求服务器并返回地址的时间少于50ms就没问题,另外这样的另一个不足就是不管图片还是文字内容变化都会有50ms延迟。还有就是这个bug只会在最后一个输入的是图片才会出现,因为如果你紧跟着输入文字会出触发contentChange事件去获取content,此时图片地址已经返回,获取的就是正确的地址。
相关文章推荐
- 关于validate验证表单与js语法的一个bug
- 关于angular瀑布流插件ng-infinite-scroll.min.js遇到一个奇葩问题
- [前端测试]关于JS判断id的一个Bug
- 网上看到的关于bug度量的一个公式
- 一个关于C#语言中的Property的低级BUG,花了我二十分钟
- Thin的DateChooser代码学习(关于js的函数参数为一个完整的函数以及“对象不支持此属性或方法”错误的解决)(原创,转载请声明)
- 一个关于bug度量的公式 (转)
- Microsoft的一个关于DirectX3D的BUG
- 在ASP.NET中,发现的关于string转换的一个小Bug
- .NET framework 一个关于OleDbParameters的Bug
- VS2005中的一个小BUG:关于Dropdownlist无法Datadinding的解决方法。
- WindowsXP中一个关于图片缩略图的Bug?
- 无聊写了一个js的东西,关于按键的控制
- 一个关于临时对象的BUG(下)
- 发现 SqlHelper v3.1 的一个关于 InputOutput 参数的 Bug? v2.1 老版没错!
- 突然想起的一个简单而好玩的关于js和vbs的反射问题
- 关于DropDownList的一个有趣的Bug~
- 今天遇到一个关于STL中排序的问题, 怀疑是sort的bug!
- 网上看到的关于bug度量的一个公式
- 关于bug度量的一个公式