(轉)http://www.cnblogs.com/Ricky-Huang/p/5536253.html
在使用Ueditor的時候,會爆出這樣的錯誤:
瀏覽器控制台就報錯了 Cannot set property 'innerHTML' of null .意思就是需要賦值的對象是null(但為什么沒有報undefined呢?答案接下來分析)
而且奇葩的是,editor編輯器內容賦值成功,但是editor1賦值失敗.
思前想后,還是去看看ueditor的源碼吧.:ueditor.all.js文件。
UE.getEditor = function (id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);
}
return editor;
};
源碼里的instances是一個初始化的空對象
代碼的意思就是:先去頁面找是否存在已經實例化的編輯器對象,如果沒有,就新生成一個編輯器.否則直接將頁面上找到的那個編輯器給返回.再聯想到剛才的報錯Cannot set property 'innerHTML' of null(而不是undefined,而且控制台也沒有輸出編輯器2實例化完成),那么真相只有一個! 那就是當你在一次來到編輯器頁面時,編輯器早已經存在,都已經存在的編輯器,自然不會觸發ready事件,所以自然不能觸發卸載ready事件里的setContent事件了.
好奇的小伙伴一定會想到,既然編輯器已經存在了,那么我們把setContent函數調到ready事件外,不就行了嗎!!!! 然而,並沒有任何luan用.....(設置setTimeout也不行)
按照我的猜想,此時當你第二次或者第三第四....次進入編輯器頁面,雖然頁面上存在這第一次你進入該頁面時的那個實例化好的編輯器,但是現在的它,功能並不完整了,你可以理解成汽車沒了發動機,殘疾了哎.
好了,找到了問題的根本,那么我們就來解決問題吧,方法也有兩個:
1.我的頁面既然有返回的按鈕,那么我只需要在每次點擊返回的時候,將頁面上的ueditor對象銷毀了,這樣一來,下次再進入到此頁面,就會重新實例化一個功能健全的ueditor了,
2.上面的解決辦法是從表象上去組織可能錯誤的發生,可以說是治標不治本,因為一些用戶的操作習慣是直接點擊瀏覽器的后退按鈕回到上一個頁面,下次進入到編輯器頁面,同樣會遇到之前的問題.當然大家也可以利用js動態去判斷瀏覽器的地址,從而決定應該何時銷毀編輯器對象,相信這個方法也是可以的.
不過我想說的是,我們就來點簡單粗暴的方法吧,ok,再回到ueditor源碼
UE.getEditor = function (id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);
}
return editor;
};
我們可以跳過上面代碼的判斷,每一次直接根據js傳來的id,生成一個全新的ueditor對象.所以上述代碼可以改成:
UE.getEditor = function (id, opt) {
UE.delEditor(id);
var editor = new UE.ui.Editor(opt);
editor.render(id);
return editor;
};
最后附上銷毀ueditor的一個方法:(UE.delEditor('editor'))
UE.delEditor = function (id) {
var editor;
if (editor = instances[id]) {
editor.key && editor.destroy();
delete instances[id]
}
};