(一)前言:

二次開發編輯器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', ''); ):

(四)借鑑資料

站在前人的肩膀上解決問題

(1)neiditor插入視訊回顯時中間視訊圖示丟失

(2)ueditor使用中，插入圖片，載入完成後不更新

(3)UEditor 上傳圖片提交不顯示的 BUG