延迟加载CKEditor 4答案

【问题标题】：Lazy load CKEditor 4延迟加载CKEditor 4
【发布时间】：2017-10-26 23:33:44
【问题描述】：

目前发现延迟加载 CKEditor 4 的问题，感谢任何建议。我尝试了什么：

包括ckeditor_basic.js，但这已经需要CKEDITOR 实例
点击时正在加载ckeditor.js，但这会报错 '主线程上的同步 XMLHttpRequest 已被弃用，因为对最终用户体验的不利影响。也其他一些错误，严重失败。

任何建议表示赞赏！

【问题讨论】：

您能否更详细地解释一下您的用例到底是怎样的？可以在其上插入脚本并初始化编辑器codepen.io/j_swiderski/pen/qPGRGb，但我不确定这是否是您要查找的内容。
谢谢 - 确切地说，当我加载 JS 并尝试使用 CKEDITOR.appendTo 时，尝试在点击时加载，我收到 CKEditor is not defined 错误。在您的示例中，它们是单独的操作，这会有所不同吗？当用户加载一个页面时，我不希望编辑器加载，只有当他们想要实际发布时，浏览量的百分比很低.. 赞赏
最有可能在脚本完全加载之前调用appendTo。为了解决这个问题，您可以定期检查 CKEDITOR 对象是否可用。您可以使用 setInterval developer.mozilla.org/en-US/docs/Web/API/… 并在加载 CKEditor 后删除间隔。您也可以使用此处描述的两种方法之一：stackoverflow.com/questions/3768768/…gist.github.com/AllThingsSmitty/889acd01889c84ff162c
另一种可能性是使用较小的编辑器并每次加载脚本。请回答自己您真正需要多少插件，然后使用在线构建器-ckeditor.com/cke4/builder 根据您的需要创建您的编辑器。请使用开发工具查看以下示例并注意ckeditor.js 大小的差异：nightly.ckeditor.com/17-10-24-06-04/full/samples 第一种情况是 600KB，第二种情况是 400KB。如果您只需要基本格式，那么您的 ckeditor.js 可能会变得更小，并且在加载页面时应该不会成为问题。
您可以为此使用构建器：docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_build。只需获取编辑器源代码，对其进行 fork，进行更改并使用精简代码构建您的自定义编辑器。

【解决方案1】：

如果您想动态插入 CKEditor 脚本，您可以使用此代码笔中的技术 - https://codepen.io/j_swiderski/pen/qPGRGb。在创建编辑器实例之前等待ckeditor.js 加载很重要，因此使用setInterval 检查CKEDITOR 对象是否可用似乎是个好主意。

在您编写的 cmets 中，您不希望每次加载页面时都加载编辑器。原因之一可能是ckeditor.js 文件的大小。如果您认为editor.js 太大，请务必回答自己真正需要多少插件，然后使用online builder 根据您的需要创建编辑器。请使用开发工具查看以下示例并注意ckeditor.js 大小的差异：Full package 具有600KB 而Basic Package 只有400KB。如果您只需要基本格式，那么您的ckeditor.js 可能会变得更小，并且在加载页面时不应该成为问题。

如果你已经创建了一些自定义插件，那么推荐的做法是从 Githhub 获取 CKEditor source code，fork 它，进行更改/添加自定义插件，build your editor。这样，您将获得包含自定义插件的缩小和混淆的编辑器实例，并且在加载页面时也不应该成为问题。

【讨论】：

我需要为列表中插入的每个新文本区域加载 ckeditor 实例，是否可以不重新加载所有实例而只是将新的 ckeditor 实例动态附加到文本区域？
“可能无法重新加载所有实例”重新加载到底是什么意思？您的用例看起来如何？请详细描述一下。
我有一个可以创建描述列表的管理页面，我可以动态添加列表项，我需要将 ckeditor 实例附加到项 textarea 并且不需要重新加载其他 ckeditor textareas 实例
这是一个示例，展示了如何动态插入编辑器而无需重新加载其他实例 - codepen.io/j_swiderski/pen/VggYOW。请注意，编辑器脚本已附加到主页。