24

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

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

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

4

2 回答 2

46

CKEditor 在两种模式下工作：

  1. 在开发（源）模式下：

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

  2. 在发布（构建）模式下，您可以使用在线 builder或直接在dev repo中可用的预设构建器或 dev 构建器创建，事情得到了优化：

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

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

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

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

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

于 2013-03-08T23:29:19.100 回答
1

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

两者都是在初始化时完成的（在我的代码中，它们位于调用 的函数中ckeditor.replace，如图 3 所示）。

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

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

于 2017-03-18T02:27:51.910 回答