mozilla/kuma — pull request #2921 by Reinmar (2014-11-23 19:57:08+00:00)
Title: CKEditor upgrade

## Status

### What's done:

1. Sources of CKEditor 4 and necessary external plugins are added as submodules.
1. CKEditor builder is configured, so on the production server an optimised version of CKEditor can be used (it's much smaller and faster). More about the builder later.
1. Plugins were ported to CKEditor 4, some were rewritten or deeply changed. I also removed some strange things I found in the code, so if you notice anything important missing, let me know :).
1. Changes in CKEditor's plugins that had been done were extracted to separate plugins. None of the CKEditor plugins is now forked, hence CKEditor can be easily upgraded in the future. This was the hardest and most time consuming part of the task because there had been many changes made. This also were I might introduced most regressions or "features".
1. The Kuma's CKEditor skin was dropped. I don't think it makes sense to maintain a forked skin, since it takes time and the default skin is not that different from Kuma's theme.
1. The toolbar layout is generated mostly automatically by CKEditor (based on [toolbar groups](http://docs.ckeditor.com/#!/guide/dev_toolbar-section-toolbar-groups-configuration)). It can be changed of course, but I didn't want to make decisions.
1. My local Kuma installation has been provisioned, destroyed, totally removed, purged and provisioned again many, many times :D. (It's also happening right now, because even the fancy script I got from you didn't work. Edit: removing the repo didn't help too...) To be honest, that took around ~10-20% of my time so it would be great if it was improved.
1. I decided to go with the auto grow feature and a sticky toolbar. If you won't like it (because e.g. auto grow is a pain sometimes), we can think about a different solution or work on auto grow improvements.

### What needs to be done:

1. Icons. I created some, ported others, but it would be great if a designer made them. Especially because now CKEditor supports retina, but there were no hidpi versions of the old icons which I ported.
1. License headers in the files I created.
1. CKEditor's builder must be integrated with Kuma's build scripts.
1. I need to check the mdn-spell plugin (but first I must make my Kuma installation running again). Basically, it's not working right now.
1. Review and testing.

## CKEditor related tasks

### Building CKEditor:

1. Building takes around 30s so it cannot be done live by any watcher.
1. Builder requires Java.
1. [Some details about the source and build versions](http://stackoverflow.com/questions/15301099/ckeditor-4-build-minify-and-uglify/15305081#15305081).
1. To build CKEditor run: `cd media/js/libs/ckeditor/source/ && ./build.sh` (yes, it's not the finest Bash script ever, so feel free to improve it :P).
1. Currently the build version of CKEditor is kept in the repository but that's not necessary. On the other hand it's good to run the builder to see if everything build well and the build version works.

In order to switch between the build version and the source version of CKEditor comment and uncomment proper lines of code in `kuma/wiki/templates/wiki/includes/ckeditor_scripts.html`.

### Upgrading CKEditor:

1. Update the CKEditor related submodules. Currently this is:
* `media/js/libs/ckeditor/source/ckeditor`,
* `media/js/libs/ckeditor/source/plugins/scayt`,
* `media/js/libs/ckeditor/source/plugins/wsc`,
* `media/js/libs/ckeditor/source/plugins/descriptionlist`.

Revs of the SCAYT and WSC plugins can be found in the [ckeditor-presets](https://github.com/ckeditor/ckeditor-presets/tree/master/plugins) repository. Unfortunately this is not automated yet.

1. Change the CKEditor version in `media/js/libs/ckeditor/source/build.sh`.

### Adding a new CKEditor plugin:

1. Add the plugin name to the `config.plugins` list in `kuma/wiki/templates/wiki/ckeditor_config.js`
1. If this is an external plugin add its name in `kuma/wiki/templates/wiki/includes/ckeditor_scripts.html` (so CKEditor knows where to look for that plugin's source).
1. Add the plugin name in `media/js/libs/ckeditor/source/build-config.js` (so CKEditor includes this plugin in the build).

Example: https://github.com/Reinmar/kuma/commit/a212d60351ec10fa32cd084483093a44c0de3d5c

## The future

* Fixing bugs which I introduced.
* Toolbar layout improvements.
* Disabling unnecessary buttons/plugins.
* Pasted content filtering (especially important for Blink/Webkit based browsers which paste crappy HTML). By default CKEditor uses the [advanced content filter](http://docs.ckeditor.com/#!/guide/dev_acf) which does the job, but I couldn't enable it for Kuma, because it would also filter out content that was already created. It's simply hard to configure it now after the time. CKEditor 4.5 will perhaps introduce a separate filter for pasted content, but if not, I can implement it for Kuma.
* Maybe [MathJax](http://sdk.ckeditor.com/samples/mathjax.html) instead of the texzilla plugin?
* Maybe some more widgets like [code snippets](http://sdk.ckeditor.com/samples/codesnippet.html) or [captioned images](http://sdk.ckeditor.com/samples/captionedimage.html)?
* Other feasible improvements from your list :).

## Questions?