CKEditor 4 构建（缩小和丑化）

Posted 2023-02-16

【中文标题】CKEditor 4 构建（缩小和丑化）

【英文标题】：CKEditor 4 build (minify and uglify)

【发布时间】：2013-02-24 10:00:13

【问题描述】：

在我们的构建过程中（使用 grunt），我们将所有脚本连接、缩小和丑化为一个脚本（也意味着仅单个请求）。

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

谁能告诉我如何将 CKEditor 4 包含到具有所有必要源的项目中，这样以后就不会动态加载了吗？

【参考方案1】：

我实施了来自 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 所示）。

这些确实是 hack，但就我目前的使用而言，这些 hack 启用的优化是值得的。

另外，代替实施建议 1.，我通过在配置中设置 customConfig: '' 和 stylesSet: false 来防止加载其他 js 文件。

【参考方案2】：

CKEditor 有两种工作模式：

在开发（源码）模式下：

您包含ckeditor.js 文件， 它会加载所有核心文件， 它会加载 config.js（您可以通过将 config.customConfig 设置为虚假值来关闭它）， 它会加载样式集文件，除非您将 config.stylesSet 设置为 false（自 4.1RC 起）或一组样式（直接设置）， 它会检查应该加载哪些插件， 它加载插件和这些插件的依赖项， 它加载插件的语言文件， 它初始化所有插件， 同时加载了一堆样式表文件（很少用于编辑器 UI，一个用于内容，除非是内联编辑器）和图标文件（每个按钮一个）， 准备好了！ 但是如果你打开一个对话框，它会加载对话框的 JS 文件；同样的，例如按需加载的单词过滤器中的粘贴；想法是这些东西一开始不需要，而且它们很重，所以最好稍后再加载。

在发布（构建）模式下，您可以使用online builder、presets builder 或直接在dev repo 中提供的开发构建器创建，优化：

您包含ckeditor.js 文件， 它包含构建中包含的所有核心文件和所有插件文件 config.js 和 styles.js 文件是分开下载的，但是和开发模式一样可以保存这2个HTTP请求， 一个语言文件加载了构建中包含的所有插件的翻译， 所有插件都已初始化， 加载了一个用于编辑器 UI 的样式表文件和一个用于内容的样式表文件（除非是内联编辑器），外加一个图标条， 准备好了！ 对话框文件和文字过滤器文件中的粘贴会按需加载。

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

你可以尝试优化一些东西。

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

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

【讨论】：

@Reinmar 在开发模式下，你能解释一下如何加载核心和插件的未缩小（Big 'n Slow）版本吗？

检查样品。包含 ckeditor.js 就足够了 - 它会处理其余的事情。

谢谢你，帮我省了很多挫折！

@Reinmar，嘿，你能看看我关于CKEditorhere的简单问题吗？

您好，我使用在线构建器下载了发布（构建）模式。 ckeditor.js 文件已最小化，但 contents.css 文件未最小化。此外，您提到的其他一些内容（如单一语言文件）不存在（我有 2 个单独的语言文件）。这改变了吗？还是我错误地构建了我的编辑器？ （我在构建器页面上按了“优化”）。