相信用過wangEditor的程式設計師（媛）都知道，這是一個輕量級富文字編輯器,每每用它的時候總有一種麻雀雖小，五臟俱全的感覺，挺好用的！

但是偶爾也會有些小坑踩踩，接下了我將介紹一個在我的業務裡面遇到的坑。。。

業務介紹，該編輯器我是在上傳資料時用到的，每一條資料都會繫結至少一個或者是一個以上的編輯器，為提高效率，我讓其在首頁載入時就建立所需的編輯器，也避免了在重新開啟一條記錄進行上傳或修改時，編輯器的重複建立。

但是，就是因為這個邏輯，編輯器在首頁載入時就建立成功了，當我修改或新上傳完一條資料的時候，再點開一條新的記錄進行修改操作，或者新增新資料的操作時，編輯器中的圖片上傳功能，可能還有其他功能，就會失效了，需要重新重新整理頁面，讓編輯器重新載入後，方才可以進行下一步的資料上傳工作，如此，沒上傳一條記錄，就盡行一次重新整理操作，實在是太麻煩了。。

怎麼辦呢，推到重來吧。。。

既然他在重新重新整理後，編輯器重建後才能生效，就不能讓它在首頁載入時只建立一次編輯器了。所以，只能讓它在使用者執行修改，和新建操作時的點選按鈕上繫結編輯器建立功能，同時還要刪除之前已建立好的編輯器，跟了前臺頁面以後才知道，建立好的編輯器被div包裹，所以在這裡用了一些前臺動態刪除div的辦法。

①自己定義一個div，將要動態生成的編輯器包裹起來，在我定義的div裡邊，還包裹著圖片上傳的div，程式碼如下：

......省略程式碼
<div class="eiderDiv">  //包裹編輯器的div
        <div id="abstract" name="abstract" style="height:550px;max-height:600px;">//繫結編輯器上傳圖片功能的div
        </div>
</div>
......省略程式碼
 

②編輯器建立在這裡不在細說，在這裡說一下如何將建好的編輯器刪除

由於我的業務需求是多個編輯器，所以我在這裡用到了div的迴圈遍歷；

在修改的業務方法裡面，程式碼如下：

。。。。。省略程式碼
/*清除原編輯器*/
if(editor!=null){
    clearEider();
}
/*建立編輯器*/
creatEider();
。。。。。省略程式碼

/*清除已生成的編輯器*/
function clearEider () {
 //獲取class名為eiderDiv的所有div元素
    var nodes=document.getElementsByClassName("eiderDiv");
/*由於前端頁面中的元素是時時重新整理變動的，所以務必有這一步將原集合中的長度保留，以免元素新增或刪除給迴圈帶來異常*/
    var len=nodes.length;
    //對集合進行迴圈遍歷
    for (var i=len-1;i>=0;i--) {
        //將集合中的每個元素中的頁面效果清空
        document.getElementsByClassName('eiderDiv')[i].innerHTML=''; 
    }
/*由於我綁定了編輯器中內容展示的位置，由於上一步將其完全清空，所以這一步不許有，否則前端頁面會報編輯器生成時menus報錯，但是我這個方法比較笨，我這裡有3個編輯器需要生成，需要一一手動新增，大家如果有更好的解決辦法，可以在評論裡告知我*/

    document.getElementsByClassName('eiderDiv')[2].innerHTML='<div id="abstract2" name="abstract2" style="height:50px;max-height:100px;">\n' +
            '                         </div>';
    document.getElementsByClassName('eiderDiv')[1].innerHTML='<div id="abstract1" name="abstract1" style="height:50px;max-height:100px;">\n' +
            '                        </div>\n' +
            '\t\t\t\t\t\t\t<div>\n' +
            '                    </div>';
    document.getElementsByClassName('eiderDiv')[0].innerHTML='<div id="abstract" name="abstract" style="height:550px;max-height:600px;">\n' +
            '                        </div>';
   //清空表示編輯器的變數中的內容
    editor=null;
    editor1=null;
    editor2=null;
   
}
 

也可以在使用者點選儲存後，關掉修改頁面，且重新載入當前頁面。

$('#active_win').window('close');//關閉活動視窗
window.location.reload();//重新載入當前視窗