angularjs中ckeditor的destroy問題

標籤：edit   tor   ckeditor   判斷   上傳   解決   name   instance   檢查   

項目中，在切換了頁面的tab頁後會發現上傳圖片的操作報錯，檢查後發現問題根源是切換了tab頁重新載入頁面時ckeditor又會建立一次，這個時候的ckeditor已經不是第一次建立的那個了，所以上傳圖片的方法中會報錯。

解決方案：在ckeditor每次建立之前判斷一下，如果有ckeditor則destroy掉，重新建立新的，保證頁面上始終只有一個ckeditor，具體如下：

• 在ckeditor的directive中：

  console.log(CKEDITOR.instances.myCKeditor ); //①if(CKEDITOR.instances.myCKeditor){//如果CKEDITOR已經建立存在則執行destroy                                    CKEDITOR.instances.myCKeditor.destroy();}console.log(CKEDITOR.instances.myCKeditor);  //②   var ckeditor=CKEDITOR.replace(<HTMLTextAreaElement>element[0]);//保持始終建立新的CKEDITORconsole.log(CKEDITOR.instances.myCKeditor);  //③

• 說明：其中，myCKeditor是頁面中textarea的name值

  <textarea ckeditor-Directive name="myCKeditor"></textarea>

• 三個console.log列印的情況如下：
  • 　　首次進入頁面時由於之前是沒有ckeditor存在的，所以①和②都是undefined，執行建立代碼後③是建立出來的ckeditor對象；
  • 　　切換了tab頁後，①是之前建立的ckeditor對象，執行了destroy()方法後②是undefined，執行建立代碼後③是新的ckeditor對象。

 

angularjs中ckeditor的destroy問題