Angular2里Ckeditor销毁的解决方式

413 阅读1分钟

一、问题

Angular2中,在使用ckeitor4.x编辑器的页面中,切换到其他页面,其他页面会报警告,警告内容如下: [CKEDITOR] Error code: editor-destroy-iframe. ckeditor.js:21 [CKEDITOR] For more information about this error go to docs.ckeditor.com/#!/guide/de… 根据链接文档解释如下:

image.png

翻译过来就是,需要我们在ckeditor从dom中卸载前先把ckeditor销毁。 看了angular1中的使用方式是在进入页面时先判断有没有ckeditor的实例,如果有就先销毁再创建新的,和这里是一个意思。只是这过程中我该如何在angular2中去实现这个销毁的过程。 尝试了一些方法都没有成功。没辙,只能在github.com上查看ng2-ckeditor这个项目里的issue里是否有这个问题。果然有。参考了下,改变两处引入方式,一个是index.html里ckeditor的js地址,二是页面中使用ckeditor组件的位置,config信息里添加插件需求。

二、解决步骤

  1. 在应用的index.html页面中将引入的js地址修改为:

2.使用位置修改 <ckeditor [(ngModel)]="templateData.content" [config]="{extraPlugins: 'divarea'}"> 增加[config]="{extraPlugins: 'divarea'}", 这里需要使用插件divarea

三、总结

问题是解决了,但原理是什么还需要再看看。不过到是体会了遇到解决不了的问题,应该回到社区,回到项目根源。