Ckeditor 4 Combinate CSS

CKEditor 4 combinate css

Like I edited on the startpost, I found the answer myself:

Change config.js to:

CKEDITOR.editorConfig = function( config ) {
    config.bodyClass = 'content'; //class that body needs to refer to
    config.contentsCss = '/css/beheer.css'; //your stylesheet

CKeditor 4 skin's editor.css not appending on creating instance on different page

Unfortunately skins are registered globally for entire page. So one skin is shared with all instances of editor on page.

What you might try to do is a little hack approach. You can prepare custom skin which will combine few skins inside. Then use divarea editor type, which will inheritance css from your main page. Use 2 different div's with different class so your modification should be more specific than native css and overwrite it.

How to apply multiple styles to one element in ckeditor?

CKEditor does not currently support setting two styles on the same element from their dropdown. Have a look at this or this ticket in their tracker.

If adding the classes in the source view is not an option you may have to write your own plugin (like this SO user is doing for colors.

CKEditor 4 build (minify and uglify)

CKEditor works in two modes:

1. In the development (source) mode:

   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.

2. 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. 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.

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

You can try to optimize few things.

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.

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.

---

Related Topics