CKEditor 4构建（缩小和丑陋）

在我们的构建过程中（使用grunt），我们将所有脚本连接、缩小并丑化为一个脚本（也就是说，仅一个请求）

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

---

有谁能告诉我如何将CKEditor 4包含到一个包含所有必要源的项目中，以便以后不会动态加载？

CKEditor有两种工作模式：

在开发（源）模式下：

包括

ckeditor.js

文件

它加载所有核心文件

它加载

config.js

（您可以通过设置为falsy值来关闭它）

除非设置为

false

（自4.1RC起）或样式数组（直接设置），否则它将加载样式集文件

它检查应该加载哪些插件

它加载插件和这些插件的依赖项

它加载插件的语言文件

它初始化所有插件

同时加载了一组样式表文件（只有少数用于编辑器UI，一个用于内容，除非是内联编辑器）和图标文件（每个按钮一个）

准备好了

但是如果你打开一个对话框，它会加载对话框的JS文件；与此相同，例如，根据需要加载的word filter中的粘贴；这个想法是，这些东西在开始时不是必需的，它们相当重，所以最好以后再加载它们

在发布（构建）模式下（您可以使用中直接提供的或dev builder创建），将对以下内容进行优化：

包括

ckeditor.js

文件

它包含构建中包含的所有核心文件和所有插件文件

config.js

和

styles.js

文件分别下载，但与开发模式一样，您可以保存这两个HTTP请求

一个语言文件加载了构建中包含的所有插件的翻译

所有插件都已初始化

加载一个用于编辑器UI的样式表文件和一个用于内容的样式表文件（除非是内联编辑器）以及一个图标条

准备好了

对话框文件和“从word筛选器文件粘贴”按需加载

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

你可以尝试优化一些东西

您可以尝试用语言文件、对话框和PSW过滤器文件连接

ckeditor.js

，这样所有js文件都可以连接在一起

编辑器UI样式表文件可能会与页面的样式表连接在一起，但您必须找到一种方法防止编辑器自行加载它

内容样式表-即使使用框架编辑器，也可以删除它，但需要使用该功能设置内容样式（不推荐）

您不能将图标带与您的带合并

---

我想就这些吧。我认为默认情况下，CKEditor构建优化得非常好。您可以改进某些功能，但不会节省大量时间，还会丢失一些功能，如自动语言识别。

我从中实现了建议2和建议3-我是这样做的：

“编辑器UI样式表文件可能可以与您的 页面的样式表，但您必须找到一种方法来阻止编辑器 不允许自己加载它”

然后我将

editor.css

绑定到我的绑定文件中

内容样式表-即使使用框架编辑器，也可以删除它，但需要使用fullPage功能设置内容样式（不推荐）

这两项都是在初始化时完成的（在我的代码中，它们位于调用

ckeditor.replace

的函数中，如图3所示）

这些都是最可靠的攻击，但对于我目前的使用，这些攻击所带来的优化是值得的

---

另外，为了代替实施建议1，我通过在配置中设置

customConfig:'

和

stylesSet:false

来阻止其他

js

文件的加载。

@Reinmar在开发模式下，你能解释一下如何加载内核和插件的未统一（大的'n慢的）版本吗？检查示例。包含

ckeditor.js

，就足够了，剩下的就交给它了。谢谢你，帮我省去了很多挫折@Reinmar，嘿，你能看看我关于CKEditor的简单问题吗？您好，我使用online builder下载了发布（构建）模式。

ckeditor.js

文件已最小化，但

contents.css

文件未最小化。另外，您提到的其他一些东西（如单一语言文件）不存在（我有两个单独的语言文件）。这种情况改变了吗？还是我构建的编辑器不正确？（我在生成器页面上按了“优化”）。

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

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