CKEditor（在SPA中）在导航回编辑页面时冻结

Question

我试图将CKEditor集成到SPA（单页应用程序）的页面中。

第一次访问时，CKEditor在SPA页面中的行为正确，但在下次访问时没有发生。例如，当按下向后浏览器箭头（显示前一个SPA页面），然后按向前箭头（再次显示带有CKEditor的SPA页面）时，CKEditor将出现，但内容已被删除且不再反应。在文本区域登录时没有卡尔特。而且所有的API调用（如setData（）或resize（））都不再有效果（而他们正在进行第一次访问）。

我认为CKEditor不喜欢将其元素从DOM中删除（这是切换到另一个页面时发生的情况），然后重新添加到DOM（这是再次访问该页面时发生的情况）。

请编辑2017年7月5日

感谢您的建议，以离开该页面时销毁的CKEditor和导航回来时重建它，但是这会导致失去了编辑状态，如滚动条的位置，插入符号位置，文本选择等...

理想情况下，我想让用户在编辑器中编写某些内容时（例如查看信息或从另一个页面复制内容），然后在他导航bac时继续确切的位置（滚动条，插入符号，选择......没有变化） k给编辑。

是有可能吗？

Answer 1

仅仅通过移除它的父容器就像在你的小提琴中去除CKEditor并不是一个好的解决方案，因为CKEditor将一些监听器附加到DOM上，并通过删除容器来分离那些未被重新连接的监听器。

在从DOM中删除然后重新创建它之前，您应该编辑destroy。请记住，销毁是以异步方式发生的，因此要知道何时完成，您可以听取destroy event。

这里修改fiddle使用destroy方法（没有处理destroy事件应该被添加）。

请编辑2017年7月10日

要保留编辑器（滚动条的位置，文本选择等）的状态之间的破坏 - 重建，所有这些元素的国家应该销毁编辑器之前被保留，然后设置重新创建后。这是可行的，但需要一些工作和相当多的自定义代码。

理想情况下，我想有可能使用户能够访问其他网页，而他是在编辑器写东西的中间

因为要创建一个SPA应用，上述更好的解决方案是使用一些浮动/固定容器，其中放置了CKEditor，并且在导航时不会与页面的其余部分重新加载（例如与Facebook聊天工作相同）。

还要记住，重新创建CKEditor需要一些时间（很短，但它仍然可见），所以在每个页面导航中，用户都可以看到编辑器正在发生的事情，即使它的状态没有改变。