美文网首页
Angular2里Ckeditor销毁的解决方式

Angular2里Ckeditor销毁的解决方式

作者: Willworkgogogo | 来源:发表于2017-07-05 21:05 被阅读0次

    一、问题

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

    image.png

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

    二、解决步骤

    1. 在应用的index.html页面中将引入的js地址修改为:
      <script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>

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

    三、总结

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

    相关文章

      网友评论

          本文标题:Angular2里Ckeditor销毁的解决方式

          本文链接:https://www.haomeiwen.com/subject/idqccxtx.html