CKEditor-Assets vorab laden

Question

Ich verwende die CKEditor-Inline-Funktion. Ich initiiere eine neue Editor-Instanz jedes Mal, wenn der Benutzer über einen Textbereich schwebt. Das Problem besteht darin, dass die Editor-Symbolleiste einige Sekunden lang angezeigt wird, wenn der Benutzer zum ersten Mal den Mauszeiger auf ein Textfeld legt und sich darauf konzentriert, da der Editor alle erforderlichen Assets lädt.

Meine Frage ist: Wie kann ich alle erforderlichen CKEditor-Assets während eines onclick-Ereignisses vorladen, anstatt wenn der Benutzer einen Textbereich bewegt?

Ich habe versucht, alle Assets in der HTML-Datei hinzuzufügen und der Editor erscheint sofort, aber wenn ich das DOM ansehe, werden die Datei-Assets zweimal bezogen. Das heißt, selbst wenn die Dateien bereits vorhanden sind, lädt CKEditor sie immer noch.

Answer 1

Sie können einen Dummy-Editor auf Seite onload oder onclick instanziieren. Halten Sie den Dummy-Editor unter Verwendung von verborgen. Wenn der Dummy-Editor geladen wird, werden alle Assets geladen, und beim nächsten Anzeigen des Editors werden die Assets nicht erneut geladen. Einfach!

Answer 2

könnten Sie voran gehen und die Instanzen des Editors normalerweise initialisieren, sondern setzen visibility der Symbolleiste Kopf- und Fußzeile, um versteckte und reduzieren ihre height auf 0. Dann auf schweben Sie die height auf auto gesetzt werden, und visibility zu sichtbar.

CKE-Editor Javascript fügt Inline-Stile für Höhe auf der Symbolleiste, so dass Sie die !important Deklaration auf die Höhe benötigen.

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 3

Sie versuchen, den Textbereich zeigt könnten nach CKEDITOR Instanz erstellt wurde. Beispielsweise.

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

Sie können jedes Mal, die gleiche Instanz des Herausgebers wieder verwenden, aber die Editor Text mit dem Wert des Textbereiches ersetzen, die der Benutzer über schwebt. Auf diese Weise wird der Editor nur einmal geladen und wiederverwendet.

Answer 5

Versuchen Sie, CDN-Versionen der Assets zu verwenden, wenn es Ihr Problem behebt, kann es sich um ein Serverproblem handeln.

Wenn Sie Assets von einem Server verwenden, der keine Cache-Richtlinien oder Richtlinien enthält, die den Browser nicht zwischenspeichern lassen, lädt der Browser diese Dateien möglicherweise mehrmals herunter.