完美解决ueditor和neditor上传图片(视频)上传成功显示异常

(一)前言:

二次开发编辑器neditor(基于百度编辑器ueditor):界面相对于ueditor会更美观.

(二) 问题描述:

最近在公司项目中遇到一个比较奇葩的问题。neiditor编辑器上传图片用时&＃xff0c;插入图片初始为loading图&＃xff0c;载入成功后才显示上传的图片。插入图片后不做任何修改时&＃xff0c;编辑器的content内容为:

简单说就是图片上传成功了。且在编辑器内显示&＃xff0c;但是在我进行了保存或者提交页面操作时&＃xff0c;存在数据库的图片被替换成以上图片路径

(三)问题解决:

这个问题还是比较棘手的&＃xff0c;因为neditor的参考资料其实很少。问题描述也很少。笔者也是通过Google和百度双管齐下。找到问题所在:

方法一&＃xff1a;在配置中 config取消单张图片上传&＃xff0c;使用多张图片上传代替&＃xff08;暂无尝试&＃xff09;

方法二&＃xff1a;修改ueditor.all.js中简单上传函数.在图片上传完成后修改loading图的src属性&＃xff0c;展示真实图片后&＃xff0c;在末尾插入一个空字符串来出发$apply(使用此方式)

如果你是ueditor(请记得更新完源码&＃xff0c;更新网页缓存&＃xff0c;使得ueditor.all.js重新加载)

ueditor.all.js 24518行function callback(){try{var link, json, loader,body &＃61; (iframe.contentDocument || iframe.contentWindow.document).body,result &＃61; body.innerText || body.textContent || &＃39;&＃39;;json &＃61; (new Function("return " &＃43; result))();link &＃61; me.options.imageUrlPrefix &＃43; json.url;if(json.state &＃61;&＃61; &＃39;SUCCESS&＃39; && json.url) {loader &＃61; me.document.getElementById(loadingId);loader.setAttribute(&＃39;src&＃39;, link);loader.setAttribute(&＃39;_src&＃39;, link);loader.setAttribute(&＃39;title&＃39;, json.title || &＃39;&＃39;);loader.setAttribute(&＃39;alt&＃39;, json.original || &＃39;&＃39;);loader.removeAttribute(&＃39;id&＃39;);domUtils.removeClasses(loader, &＃39;loadingclass&＃39;);me.execCommand(&＃39;inserthtml&＃39;, &＃39;&＃39;); // 就是这一行&＃xff0c;记住了&＃xff01;&＃xff01;&＃xff01;} else {showErrorLoader && showErrorLoader(json.state);}}catch(er){showErrorLoader && showErrorLoader(me.getLang(&＃39;simpleupload.loadError&＃39;));}form.reset();domUtils.un(iframe, &＃39;load&＃39;, callback);
}修改源码后就可以解决这个问题啦

neditor(添加 me.execCommand(&＃39;inserthtml&＃39;, &＃39;&＃39;); ):

(四)借鉴资料

站在前人的肩膀上解决问题

(1)neiditor插入视频回显时中间视频图标丢失

(2)ueditor使用中&＃xff0c;插入图片&＃xff0c;加载完成后不更新

(3)UEditor 上传图片提交不显示的 BUG