私はCKEditorインライン機能を使用しています。 ユーザーがテキスト領域を移動するたびに新しいエディタインスタンスを開始します。問題は、ユーザーが最初にテキストエリアに移動してフォーカスを合わせると、エディタのツールバーには、エディタが必要なすべてのアセットをロードしているので、表示に数秒かかります。プリロードCKEditorアセット
私の質問は：ユーザーがテキスト領域を置いたときにはどうすればできるのonclickイベント中に必要なすべてのCKEditorバージョンの資産を事前にロードする代わりに？
私は、HTMLファイル内のすべてのアセットを追加し、エディタが瞬時に表示され、私はDOMを見たときただし、ファイル資産が二回供給されていてみました。つまり、ファイルがすでに存在していても、CKEditorはそれをロードします。
あなたはページonloadまたはonclick上にダミーエディタをインスタンス化することができます。 display: noneを使用してダミーエディタを隠しておいてください。ダミーエディタが読み込まれると、すべてのアセットがロードされ、次にエディタを表示するとアセットをリロードしません。シンプル！
あなたがautoにheightを設定し、visibilityによ先に行くと、通常のエディタのインスタンスを初期化しますが、隠されたにツールバーのヘッダーとフッターのvisibilityを設定し、ホバーに続いてそのheight 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;
}
あなたは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>あなたは、エディタの同じインスタンスを毎回再利用しますが、ユーザーが上に置くテキストエリアの値をエディタのテキストを置き換えることができます。そうすれば、エディタは一度だけロードされ、再利用されます。
は、それはあなたの問題を修正ならば、それはサーバーの問題であってもよいし、資産のCDNバージョンを使用してみてください。あなたは、ブラウザのキャッシュを聞かせていないキャッシュポリシーやポリシーを持っていないサーバーからの資産を使用している場合
は、ブラウザが複数回これらのファイルをダウンロードすることができます。