(一)前言:
二次开发编辑器neditor(基于百度编辑器ueditor):界面相对于ueditor会更美观.
(二) 问题描述:
最近在公司项目中遇到一个比较奇葩的问题。neiditor编辑器上传图片用时，插入图片初始为loading图，载入成功后才显示上传的图片。插入图片后不做任何修改时，编辑器的content内容为:
<p><img class="loadingclass" id="loading_iwwwjn6l" src="http://d.com:12080/Public/backend/lib/ueditor/themes/default/images/spacer.gif" title="正在上传..."/></p>
简单说就是图片上传成功了。且在编辑器内显示，但是在我进行了保存或者提交页面操作时，存在数据库的图片被替换成以上图片路径
(三)问题解决:
这个问题还是比较棘手的，因为neditor的参考资料其实很少。问题描述也很少。笔者也是通过Google和百度双管齐下。找到问题所在:
方法一：在配置中 config取消单张图片上传，使用多张图片上传代替（暂无尝试）
方法二：修改ueditor.all.js中简单上传函数.在图片上传完成后修改loading图的src属性，展示真实图片后，在末尾插入一个空字符串来出发$apply(使用此方式)
如果你是ueditor(请记得更新完源码，更新网页缓存，使得ueditor.all.js重新加载)
ueditor.all.js 24518行
function callback(){
try{
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '';
json = (new Function("return " + result))();
link = me.options.imageUrlPrefix + json.url;
if(json.state == 'SUCCESS' && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('title', json.title || '');
loader.setAttribute('alt', json.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
me.execCommand('inserthtml', ''); // 就是这一行，记住了！！！
} else {
showErrorLoader && showErrorLoader(json.state);
}
}catch(er){
showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
}
form.reset();
domUtils.un(iframe, 'load', callback);
}
修改源码后就可以解决这个问题啦neditor(添加 me.execCommand('inserthtml', ''); ):
(四)借鉴资料
站在前人的肩膀上解决问题