Question

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

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

我尝试在HTML文件中添加所有资源，然后编辑器立即显示，但是当我查看DOM时，文件资产会被提取两次。这意味着即使文件已经存在，CKEditor仍会加载它们。

Answer 1

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

CKE编辑器Javascript在工具栏上添加了高度的内联样式，因此您需要在高度上进行!important声明。

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版本的资产，如果它解决了您的问题，那么它可能是服务器问题。

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

预加载CKEditor资产

5 个答案: