提出問題
使用UEditor-1.4.3中遇到第一次跳轉到使用UEditor的界面後,編輯器加載正常,返回後第二次再跳轉到這個界面就出現UEditor無法正常加載,
也沒百度到答案,看UEditor源碼,發現這樣一段:
/**
* @file
* @name UE
* @short UE
* @desc UEditor的頂部命名空間
*/
/**
* @name getEditor
* @since 1.2.4+
* @grammar UE.getEditor(id,[opt]) => Editor實例
* @desc 提供一個全局的方法得到編輯器實例
*
* * ''id'' 放置編輯器的容器id, 如果容器下的編輯器已經存在,就直接返回
* * ''opt'' 編輯器的可選參數
* @example
* UE.getEditor('containerId',{onready:function(){//創建一個編輯器實例
* this.setContent('hello')
* }});
* UE.getEditor('containerId'); //返回剛創建的實例
*
*/
UE.getEditor = function (id, opt) {
var editor = instances[id];
if (!editor) {
editor = instances[id] = new UE.ui.Editor(opt);
editor.render(id);
}
return editor;
};
UE.delEditor = function (id) {
var editor;
if (editor = instances[id]) {
editor.key && editor.destroy();
delete instances[id]
}
};
這段可以看到,在調用UE.getEditor(‘_editor’)初始化UEditor時,先從放置編輯器的容器instances中獲取,沒有實例才實例化一個Editor,這就是引起問題的原因。
在第一次跳轉到編輯器界面時,正常的實例化了一個新的編輯器對象,並放入instances,調用editor.render(id)渲染編輯器的DOM;
第二次初始化時卻僅從容器中取到實例:var editor = instances[id]; 直接返回了editor對象,而編輯器的DOM並沒有渲染。
解決問題
例如html頁面編輯器容器:
<script id="_editor" type="text/plain" name="desc" style="width:1000px;height:400px;"></script>
<!--注:html中編輯器容器id爲_editor-->
在js中用下面的方式調用:
jQuery(function($) {
UE.getEditor('_editor').render('_editor')
)}
也可以這樣:
jQuery(function($) {
UE.delEditor('_editor');
var ue = UE.getEditor('_editor');
)}
問題成功解決。希望此文對碰到這個問題的朋友有所幫助。