CKEditor 4构建（minify和丑陋） [英] CKEditor 4 build (minify and uglify)

问题描述

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

In our build process (using grunt), we concatenate, minify and uglify all our scripts into a single one (also meaning a single request only).

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

Now CKEditor 4 seems to be using a module style loading approach.

任何人都可以告诉我如何将CKEditor 4包含到项目中，所有的源代码都是必需的，所以不会有动态加载后？

Can anybody tell me how to include CKEditor 4 into a project with all the sources necessary, so there will be no dynamic loading later?

推荐答案

CKEditor有两种模式：

CKEditor works in two modes:

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

1. In the development (source) mode:

1. 包括 ckeditor .js 档案，


2. 载入所有核心档案，


3. 载入 config.js （您可以通过设置 config.customConfig 到假的值），


4. 它会加载样式集文件，除非您设置 config.stylesSet 到 false （自4.1RC以来）或样式数组（直接设置），


5. 它检查应加载哪些插件，


6. 加载这些插件的插件和依赖关系，


7. 加载插件的语言文件， / li>
   
8. 它初始化所有插件，


9. 同时还有一堆样式表文件（少数用于编辑器UI和一个用于内容，除非是内联编辑器）和图标文件（每个按钮一个），


10. 就可以了！


11. 但是如果打开一个对话框， ;相同。根据需要加载的字过滤器的粘贴;

1. you include the ckeditor.js file,
2. it loads all core files,
3. it loads config.js (you can switch that off by setting config.customConfig to a falsy value),
4. it loads styles set file unless you set config.stylesSet to false (since 4.1RC) or an array of styles (direct setting),
5. it checks which plugins it should load,
6. it loads plugins and dependencies of these plugins,
7. it loads plugins' language files,
8. it initialises all plugins,
9. in the meantime a bunch of styleheet files (few for the editor UI and one for contents unless that's an inline editor) and icon files (one per button) are loaded,
10. and it's ready!
11. but if you open a dialog it will load the dialog's JS file; the same about e.g. the paste from word filter which is loaded on demand; the idea is that these things are not required at the beginning and they are pretty heavy, so it's better to load them later.

p>在发布（构建）模式下，您可以使用在线构建器或预设创建器或可直接在 dev repo 中使用的开发人员构建器，事情被优化：

In release (build) mode, which you can create using the online builder, or the presets builder or the dev builder available directly in the dev repo, things are optimized:

1. 您包括 ckeditor.js 文件， li>
   
2. 它包含您的构建中包含的所有核心文件和所有插件文件


3. config.js styles.js 文件是单独下载的，但像开发模式一样，您可以保存这两个HTTP请求，


4. 一个语言文件加载了包含在版本中的所有插件的翻译，


5. 所有插件都已初始化，


6. 一个样式表文件用于编辑器UI，除非是内联编辑器）加载一个图标条，


7. ，它已准备就绪！


8. 对话框文件和粘贴从字过滤器文件加载

1. you include the ckeditor.js file,
2. it contains all core files and all plugin files included in your build
3. config.js and styles.js files are downloaded separately, but like in the development mode you can save these 2 HTTP requests,
4. one language file is loaded with translations for all plugins included in the build,
5. all plugins are initialised,
6. one stylesheet file for the editor UI and one for contents (unless that's an inline editor) are loaded plus one icons strip,
7. and it's ready!
8. dialog files and paste from word filter file are loaded on demand.

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

Note: all JS and CSS files are minified in the release mode.

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

You can try to optimize few things.

1. 将 ckeditor.js 与语言文件，对话框和PSW过滤器文件连接在一起 - 因此所有JS文件可以连接在一起AFAIK。


2. 样式表文件可能会与您的页面样式表连接，但是您必须找到一种方法来阻止编辑器自行加载。


3. 内容样式表 - 即使您使用框架编辑器，但您需要使用 fullPage 功能（

1. You can try to concatenate ckeditor.js with language file, dialogs and PSW filter files - so all JS files may be concatenated together AFAIK.
2. Editor UI stylesheet file can be perhaps concatenated with your page's stylesheets, but you'll have to find a way to prevent editor from loading it by itself.
3. Contents stylesheet - you can remove it even if you use framed editor, but you'll need to style contents using the fullPage feature (not recommended).
4. You can't merge icons strip with your strip.

这是所有，我猜。我认为，默认情况下CKEditor构建是非常好的优化。您可以改善一些事情，但不会节省大量的时间，您会失去一些功能，例如自动语言识别。

That's all, I guess. I think that by default a CKEditor build is optimized very well. You can improve some things but you will not save a lot of time and you'll lose some features like automatic language recognition.

这篇关于CKEditor 4构建（minify和丑陋）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！