Question

在我们的构建过程中（使用grunt），我们将所有脚本连接，缩小和uglify为一个脚本（也仅表示单个请求）。

现在CKEditor 4似乎正在使用模块样式加载方法。

有人可以告诉我如何将CKEditor 4包含在一个包含所有必需资源的项目中，以便以后不再进行动态加载吗？

Answer 1

CKEditor以两种模式工作：

在开发（来源）模式中：
1. 您包含ckeditor.js文件
2. 它加载所有核心文件，
3. 加载config.js（您可以通过将config.customConfig设置为假值来关闭它），
4. 除非您将config.stylesSet设置为false（自4.1RC起）或样式数组（直接设置），否则会加载样式集文件，
5. 检查它应该加载哪些插件，
6. 它加载了这些插件的插件和依赖项，
7. 它加载了插件的语言文件，
8. 初始化所有插件，
9. 同时加载了一堆样式表文件（少数用于编辑器UI，一个用于内容，除非是内联编辑器）和图标文件（每个按钮一个），
10. 已经准备好了！
11. 但如果你打开一个对话框，它将加载对话框的JS文件;关于例如来自word过滤器的粘贴，按需加载;我们的想法是，这些东西在开始时并不需要，而且非常重，所以最好在以后加载它们。
在发布（构建）模式中，您可以使用online builder或presets builder或dev repo中直接提供的开发构建器创建，事情已经过优化：
1. 您包含ckeditor.js文件
2. 它包含所有核心文件和构建中包含的所有插件文件
3. config.js和styles.js文件是单独下载的，但在开发模式下，您可以保存这2个HTTP请求，
4. 一个语言文件加载了构建中包含的所有插件的翻译，
5. 所有插件都已初始化，
6. 一个用于编辑器UI的样式表文件和一个用于内容的样式表文件（除非是内联编辑器）加载了一个图标条，
7. 已经准备好了！
8. 对话框文件和来自文字过滤器文件的粘贴按需加载。

注意：所有JS和CSS文件都在发布模式下缩小。

你可以尝试优化一些事情。

您可以尝试将ckeditor.js与语言文件，对话框和PSW过滤器文件连接起来 - 这样所有JS文件都可以连接在一起AFAIK。
编辑器UI样式表文件可能可以与页面的样式表连接，但您必须找到一种方法来防止编辑器单独加载它。
内容样式表 - 即使您使用框架编辑器也可以将其删除，但您需要使用fullPage功能设置内容样式（不推荐）。
您无法将图标条与条带合并。

这就是全部，我想。我认为默认情况下，CKEditor构建得到了很好的优化。你可以改进一些东西，但不会节省很多时间，你会失去一些功能，如自动语言识别。

Answer 2

我实施了Reinmar's answer中的建议2和3 - 这就是我如何做到的：

“编辑器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捆绑到我的捆绑文件中。

内容样式表 - 即使您使用框架编辑器也可以将其删除，但您需要使用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个文件。

CKEditor 4 build（minify和uglify）

2 个答案: