angularjs中ckeditor的destroy问题

Posted 2020-08-16 PeaFull

项目中，在切换了页面的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]);//保持始终创建新的CKEDITOR
  console.log(CKEDITOR.instances.myCKeditor);  //③

• 说明：其中，myCKeditor是页面中textarea的name值

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

• 三个console.log打印的情况如下：
  • 　　首次进入页面时由于之前是没有ckeditor存在的，所以①和②都是undefined，执行创建代码后③是创建出来的ckeditor对象；
  • 　　切换了tab页后，①是之前创建的ckeditor对象，执行了destroy()方法后②是undefined，执行创建代码后③是新的ckeditor对象。