24

ビルドプロセス（gruntを使用）では、すべてのスクリプトを連結、縮小、および醜くして1つのスクリプトにします（これは単一のリクエストのみを意味します）。

現在、CKEditor4はモジュールスタイルの読み込みアプローチを使用しているようです。

CKEditor 4を必要なすべてのソースを含むプロジェクトに含めて、後で動的ロードが行われないようにする方法を教えてもらえますか？

4

2 に答える 2

46

CKEditorは2つのモードで動作します：

  1. 開発（ソース）モードの場合：

    1. ckeditor.jsファイルを含めると、
    2. すべてのコアファイルをロードします。
    3. ロードします（ config.customConfigconfig.jsを偽の値に設定することでオフに切り替えることができます）、
    4. config.stylesSetをfalse（4.1RC以降）またはスタイルの配列（直接設定）に設定しない限り、スタイルセットファイルをロードします。
    5. ロードするプラグインをチェックし、
    6. プラグインとこ​​れらのプラグインの依存関係をロードします。
    7. プラグインの言語ファイルをロードし、
    8. すべてのプラグインを初期化します。
    9. その間に、多数のstyleheetファイル（エディターUI用にいくつか、インラインエディターでない限りコンテンツ用に1つ）とアイコンファイル（ボタンごとに1つ）が読み込まれます。
    10. そしてそれは準備ができています！
    11. ただし、ダイアログを開くと、ダイアログのJSファイルが読み込まれます。たとえば、オンデマンドでロードされるワードフィルターからのペーストについても同じです。これらは最初は必要なく、かなり重いので、後でロードすることをお勧めします。

  2. オンラインビルダー、または開発リポジトリで直接利用可能なプリセットビルダーまたは開発ビルダーを使用して作成できるリリース（ビルド）モードでは、次のように最適化されます。

    1. ckeditor.jsファイルを含めると、
    2. ビルドに含まれるすべてのコアファイルとすべてのプラグインファイルが含まれます
    3. config.jsとstyles.jsファイルは別々にダウンロードされますが、開発モードと同様に、これら2つのHTTPリクエストを保存できます。
    4. 1つの言語ファイルに、ビルドに含まれるすべてのプラグインの翻訳が読み込まれます。
    5. すべてのプラグインが初期化され、
    6. エディターUI用の1つのスタイルシートファイルとコンテンツ用の1つのスタイルシートファイル（インラインエディターでない場合）に加えて、1つのアイコンストリップがロードされます。
    7. そしてそれは準備ができています！
    8. ダイアログファイルとワードフィルターファイルからの貼り付けは、オンデマンドでロードされます。

注：すべてのJSおよびCSSファイルはリリースモードで縮小されます。

あなたはいくつかのことを最適化することを試みることができます。

  1. 言語ファイル、ダイアログ、およびPSWフィルターファイルとの連結を試みることができckeditor.jsます。そのため、すべてのJSファイルをAFAIKで連結できます。
  2. エディターUIスタイルシートファイルは、おそらくページのスタイルシートと連結できますが、エディターがそれ自体をロードしないようにする方法を見つける必要があります。
  3. コンテンツスタイルシート-フレームエディタを使用している場合でも削除できますが、fullPage機能を使用してコンテンツのスタイルを設定する必要があります（非推奨）。
  4. アイコンストリップをストリップとマージすることはできません。

それだけだと思います。デフォルトでは、CKEditorビルドは非常にうまく最適化されていると思います。あなたはいくつかのことを改善することができますが、あなたは多くの時間を節約することはなく、自動言語認識のようないくつかの機能を失うでしょう。

于 2013-03-08T23:29:19.100 に答える
1

Reinmarの回答から提案2と3を実装しました-これが私がそれを行った方法です：

  1. 「エディターUIスタイルシートファイルは、おそらくページのスタイルシートと連結できますが、エディターがそれ自体をロードしないようにする方法を見つける必要があります。」
var swap = CKEDITOR.skin.loadPart;
CKEDITOR.skin.loadPart = function(res, callback) {
    if (res == 'editor') {
        console.log('Ignoring editor.css load');
        callback && callback();
        return;
    }
    swap(res, callback);
}

次に、バンドルeditor.cssされたファイルにバンドルしました。

  1. コンテンツスタイルシート-フレームエディタを使用している場合でも削除できますが、fullPage機能を使用してコンテンツのスタイルを設定する必要があります（非推奨）。
// I copied the content.css from ckeditor-dev and loaded it into contentCss.
var contentCss = 'put your css here';

var config = {
    // Other things here
    // ...

    contentCss: contentCss
};

ckeditor.replace(element, config);

どちらも初期化時に行われます（私のコードではckeditor.replace、3に示すように、を呼び出す関数にあります）。

これらは最も確実なハックですが、私の現在の使用では、これらのハックによって可能になる最適化は価値があります。

また、提案1を実装する代わりに、設定と構成で他のjsファイルが読み込まれないようにします。customConfig: ''stylesSet: false

于 2017-03-18T02:27:51.910 に答える