预加载 CKEditor 资源文件

Question

我正在使用CKEditor的内联功能。每当用户悬停在文本区域上时，我都会初始化一个新的编辑器实例。问题在于，当用户首次悬停并聚焦在文本区域上时，编辑器工具栏需要几秒钟才能出现，因为编辑器正在加载所有必要的资源。

我的问题是：如何在单击事件期间预加载所有必要的CKEditor资源，而不是在用户悬停在文本区域上时加载？

我尝试将所有资源添加到HTML文件中，编辑器立即出现，然而当我查看DOM时，文件资源被引用了两次。也就是说，即使文件已经存在，CKEditor仍然会加载它们。

- user3758078

Answer 1

您可以按照正常方式初始化编辑器实例，但将工具栏标题和页脚的“可见性”设置为隐藏，并将它们的“高度”减小到0。然后在悬停时，将“高度”设置为自动，并将“可见性”设置为可见。

CKE编辑器Javascript会为工具栏添加高度的内联样式，因此您需要在高度上使用“!important”声明。

https://jsfiddle.net/ucytmjj5/4/

span.cke_top,
span.cke_bottom {
  visibility: hidden;
  height: 0px !important;
}

div.cke:hover span.cke_top,
div.cke:hover span.cke_bottom {
  visibility: visible;
  height: auto !important;
}

- Robert Wade

Answer 2

你可以在页面的 onload 或 onclick 上实例化一个虚拟编辑器。使用 display: none 将虚拟编辑器隐藏起来。当你的虚拟编辑器被加载时，它将加载所有资源，下一次显示编辑器时就不会重新加载资源了。简单易行！

- Vipin Kumar

Answer 3

你可以尝试在创建CKEDITOR实例后显示文本区域。例如：

CKEDITOR.on('instanceCreated', function(evt) {
  evt.editor.element.setStyle("display", "block");
});
CKEDITOR.replace('editor1');

#editor1 {
  display: none;
}

<script src="https://cdn.ckeditor.com/4.7.3/standard/ckeditor.js"></script>
<textarea id="editor1"></textarea>

- user2560539

Answer 4

您可以每次重复使用同一个编辑器实例，但将编辑器的文本替换为用户悬停在上面的文本区域的值。这样，编辑器只会加载一次并被重复使用。

- user5886944

Answer 5

尝试使用CDN版本的资源，如果可以解决您的问题，则可能是服务器问题。

如果您正在使用没有缓存策略或不允许浏览器缓存的服务器上的资源，则浏览器可能会多次下载这些文件。

- alpere