项目中,在切换了页面的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对象。

 

相关文章:

  • 2021-09-07
  • 2021-05-26
  • 2021-05-18
  • 2021-05-20
  • 2021-05-24
  • 2021-06-23
  • 2022-12-23
  • 2022-01-25
猜你喜欢
  • 2021-07-08
  • 2022-12-23
  • 2022-12-23
  • 2022-01-22
  • 2022-12-23
  • 2021-08-04
相关资源
相似解决方案