预加载CKEditor资产

Question

我正在使用CKEditor内联功能。 每次用户将鼠标悬停在文本区域上时，我都会启动一个新的编辑器实例。 问题是，当用户第一次悬停并专注于textarea时，编辑器工具栏需要几秒钟才能显示，因为编辑器正在加载所有必需的资源。

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

我尝试在HTML文件中添加所有资源，然后编辑器立即出现，但是当我查看DOM时，文件资产的来源是两次。 即使文件已经存在，CKEditor仍会加载它们。

Answer 1

您可以继续正常初始化编辑器的实例，但将工具栏页眉和页脚的visibility设置为隐藏，并将其height降低为0.然后在悬停时，您将height设置为auto，并将visibility为可见。

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;
}

Answer 2

您可以在页面onload或onclick上实例化一个虚拟编辑器。 使用display: none保持虚拟编辑器隐藏。 加载虚拟编辑器后，它将加载所有资源，下次显示编辑器时，它将不会重新加载资源。 简单！

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> 

Answer 4

您可以每次都重复使用相同的编辑器实例，但将编辑器的文本替换为用户悬停的textarea值。 这样编辑器只会加载一次并重复使用。

Answer 5

尝试使用CDN版本的资产，如果它修复了您的问题，那么它可能是服务器问题。

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