1. 程式人生 > >ueditor二次載入(getEditor)渲染失敗(載入失敗)的原因解決方案

ueditor二次載入(getEditor)渲染失敗(載入失敗)的原因解決方案

大家自己看看官方的js檔案ueditor.all.js有以下的程式碼

/**
     * @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並沒有渲染。

【解決方案】:
再次使用時先刪除之前的例項化物件,再進行再次例項化

UE.delEditor('editor');   //先刪除之前例項的物件
UE.getEditor('editor');    //新增編輯器
或者如下解決,對目標DOM進行手動渲染
UE.getEditor('editor').render('editor');   //使用之前的物件(同時渲染DOM)