web-dev-qa-db-ja.com

CKEditor 4ビルド（縮小および醜化）

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

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

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

ckeditor
24
kraftwer1

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

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

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

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

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

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

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

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

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

46
Reinmar

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

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

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

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

1
cade