UEDITOR編輯器是百度發(fā)布的一套網(wǎng)站在線編輯器，功能還是比較實用的，而且兼容性、UI整體都不錯，很多平臺都在使用，但是，源代碼模式下編輯完內(nèi)容直接將頁面表單提交到服務(wù)器，獲取到的表單內(nèi)容不是最新的。
筆者也嘗試過到到UE的FAQ中找辦法解決，但是，很遺憾沒有找到任何有價值的東西，后來只能到網(wǎng)上尋找解決的辦法，也有網(wǎng)友說可能是頁面中form標簽和table標簽順序不規(guī)范導致的，經(jīng)過測試發(fā)現(xiàn)，也不是這個原因。
沒辦法，只能去閱讀UE源文件，尋找導致這個BUG的原因，通過分析發(fā)現(xiàn)，UE編輯器會監(jiān)聽表單事件（有可能是編輯器的blur事件，也可能是表單的submit事件，這個要具體看config中的參數(shù)設(shè)置），監(jiān)聽事件會根據(jù)編輯器的狀態(tài)變化對隱藏的textarea表單進行內(nèi)容更新，然后，遺憾的是，這個事件只會在可視化模式下觸發(fā)，而源代碼模式下沒有這個事件，從而導致BUG的出現(xiàn)。
好的，找到了BUG的導致原因，那我們就來想辦法解決，既然源代碼模式下沒有這個事件，那我們就加個事件進去，在事件中對textarea進行更新。
實際上，UE里面的源代碼模式是UE內(nèi)置的一個plugin，找開編輯器主文件，如：ueditor.all.js，找到
// plugins/source.js
/**
* 源碼編輯插件
* @file
* @since 1.2.6.1
*/
(function (){
var sourceEditors = {
textarea: function (editor, holder){
var textarea = holder.ownerDocument.createElement('textarea');
代碼片段，加入一個函數(shù)，以便對隱藏的表單進行更新，修改為以下內(nèi)容
// plugins/source.js
/**
* 源碼編輯插件
* @file
* @since 1.2.6.1
*/
(function (){
var sourceEditors = {
setValue_:function (obj,form,editor){
//為了解決“源代碼模式下直接向服務(wù)端提交表單會導致服務(wù)端獲取到的表單數(shù)據(jù)不是最新的”的問題
var textarea;
if (editor.textarea) {
if (utils.isString(editor.textarea)) {
for (var i = 0, ti, tis = domUtils.getElementsByTagName(form, 'textarea'); ti = tis[i++];) {
if (ti.id == 'ueditor_textarea_' + editor.options.textarea) {
textarea = ti;
break;
}
}
} else {
textarea = editor.textarea;
}
}
if (!textarea) {
form.appendChild(textarea = domUtils.createElement(document, 'textarea', {
'name': editor.options.textarea,
'id': 'ueditor_textarea_' + editor.options.textarea,
'style': "display:none"
}));
//不要產(chǎn)生多個textarea
editor.textarea = textarea;
}
!textarea.getAttribute('name') && textarea.setAttribute('name', editor.options.textarea );
textarea.value = obj.value;
},
textarea: function (editor, holder){
var textarea = holder.ownerDocument.createElement('textarea');
其中setValue_就是負責更新隱藏表單的JS函數(shù)，還是textarea: function (editor, holder)函數(shù)，往下看，找到holder.appendChild(textarea);代碼，在它的前面加上
//源代碼模式下直接向服務(wù)端提交表單會導致服務(wù)端獲取到的表單數(shù)據(jù)不是最新的
if(editor.options.autoSyncData){
domUtils.on(textarea,'blur',function(){
sourceEditors.setValue_(textarea,editor.form,editor);
});
}else{
domUtils.on(editor.form,'submit',function(){
sourceEditors.setValue_(textarea,editor.form,editor);
});
}
代碼，如下圖
好了，保存一下，清空一下網(wǎng)頁中的緩存，F(xiàn)5刷新一下看看效果！
