CKEditor 4 build (minify and ouglify)

Ответ 1

CKEditor работает в двух режимах:

• В режиме разработки (источника):

  • вы включаете файл ckeditor.js,
  • он загружает все основные файлы,
  • он загружает config.js (вы можете отключить его, установив config.customConfig значение ложности),
  • он загружает файл набора стилей, если вы не установите config.stylesSet в false (начиная с 4.1RC) или массив стилей (прямая настройка),
  • он проверяет, какие плагины он должен загрузить,
  • он загружает плагины и зависимости этих плагинов,
  • он загружает языковые файлы плагинов,
  • он инициализирует все плагины,
  • в то же время загружается набор файлов стилей (несколько для интерфейса редактора и один для содержимого, если только встроенный редактор) и файлы значков (по одной на кнопку),
  • и он готов!
  • но если вы откроете диалоговое окно, он загрузит диалоговый файл JS; то же самое, например, паста из словарного фильтра, которая загружается по требованию; идея состоит в том, что эти вещи не требуются в начале, и они довольно тяжелые, поэтому лучше загрузить их позже.

• В режиме release (сборка), который вы можете создать с помощью онлайн-застройщика или создатель пресетов или разработчик dev, доступный непосредственно в dev repo, все оптимизировано:

  • вы включаете файл ckeditor.js,
  • содержит все основные файлы и все файлы плагинов, включенные в вашу сборку
  • config.js и styles.js файлы загружаются отдельно, но, как и в режиме разработки, вы можете сохранить эти два HTTP-запроса,
  • один языковой файл загружается с переводом для всех плагинов, включенных в сборку,
  • все плагины инициализируются,
  • один файл таблицы стилей для интерфейса редактора и один для содержимого (кроме тех, что встроенный редактор) загружен плюс одна полоса значков,
  • и он готов!
  • файлы диалога и вставка из файла фильтра слов загружаются по требованию.

Примечание: все файлы JS и CSS уменьшены в режиме выпуска.

Вы можете попытаться оптимизировать несколько вещей.

• Вы можете попытаться объединить ckeditor.js с языковым файлом, диалоговыми окнами и файлами фильтра PSW - так что все файлы JS могут быть объединены вместе AFAIK.
• Файл таблицы стилей редактора UI может быть, возможно, объединен с вашими таблицами стилей страниц, но вам придется найти способ предотвратить загрузку редактора самостоятельно.
• Таблица стилей содержания - вы можете удалить ее, даже если вы используете редактор рамки, но вам нужно будет стилизовать содержимое с помощью функции fullPage (не рекомендуется).
• Вы не можете объединить полосы значков с вашей полосой.

Это все, я думаю. Я думаю, что по умолчанию сборка CKEditor оптимизирована очень хорошо. Вы можете улучшить некоторые вещи, но вы не сэкономите много времени, и вы потеряете некоторые функции, такие как автоматическое распознавание языков.

Ответ 2

Я внедрил предложения 2 и 3 из Reinmar answer - вот как я это сделал:

2. "Файл таблицы стилей редактора UI может быть, возможно, объединен с вашим page stylesheets, но вам нужно будет найти способ предотвратить редактор от загрузки его само по себе"

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 с моим связанным файлом.

3. Таблица стилей содержимого - вы можете удалить ее, даже если вы используете редактор рамки, но вам нужно будет стилизовать содержимое с помощью функции 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 в config.