解決ueditor二次加載(getEditor)加載失敗的問題


  最近在做項目的時候用到了ueditor控件,正常使用第一次加載沒有問題,因為沒有刷新頁面,第二次加載的時候就會加載失敗,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)

 

以上解決方案本人親測可用


————————————————
版權聲明:本文為CSDN博主「隔壁小王攻城獅」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/df981011512/article/details/69678711


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM