HTML Logo by World Wide Web Consortium ( Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS. ocPortal 9 is superseded by Composr 10.

Head over to for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.

Improving WYSIWYG editing

Improving WYSIWYG editing WYSIWYG editing is very important to users, but frankly the current state of WYSIWYG editing just isn't good enough for 2015.

I decided to spend the day reviewing the main problems, and trying to get some momentum going in the wider web community.

If you're not already aware, we have used CKEditor for WYSIWYG for quite a while now. CKEditor is by far the best WYSIWYG editor but I think they can still make it better. I have logged a number of issues on the CKEditor bug tracker. On our side, improvements have been made, will be made, and might be made if we can get some sponsorship for it in the future. I think it's my responsibility to set a roadmap for all this.

So, let's talk specifics…

Accurate pasting

If you copy&paste something into the editor, it should match the styling of what you copied from.
This was not fully the case, and I narrowed this down to a setting we need to activate. This will be resolved in the next v9 patch release.
I have also filed a bug report with CKEditor, as their documentation seemed to be inaccurate here.

Direct pasting

When you click the paste button, it pops up a dialog asking you to paste again using a direct keypress. This is due to browsers blocking JavaScript connection to the paste function, and can't be worked around in any modern browser.
I have identified the webkit/Firefox issues holding this back, and asked the CKEditor guys if they want to try and organise some momentum to get the browser makers to sort this out, because I think it's really important.

I have separately made a number of suggestions to the CKEditor guys on how they can make their UI a little nicer:

Better style management

Once you copy&paste stuff in, you may have a whole load of intended inline styles come through, such as line spacings, borders, or over-specificity of font settings. This is a kind of catch-22: you want this stuff to come through in general (see above), but also need to be able to remove it easily.
Fortunately CKEditor has a great button to paste plain text, and also a button to remove styles from the selection.
I also think CKEditor would be well served with a better style cleanup UI:


Users are constantly confused on how to correct misspellings, given right-clicking activates the CKEditor context menu rather than the browser one. We have worked out a good resolution, pending sponsorship:
0001737: Improve WYSIWYG spellchecking - ocPortal feature tracker

Better integration with Comcode

We are planning to make a number of improvements to better integrate Comcode with the CKEditor HTML editing:
0001735: Better Comcode WYSIWYG editing - ocPortal feature tracker
We are very grateful that this has already been sponsored.

Improved attachment/media integration and upload

A whole host of improvements have already been made for v10.

Drag and drop

Drag and drop of images directly into the editor was implemented for v10 quite a while back.

Table of contents generation

The Comcode 'contents' tag can be inserted into the editor and used to generate an automatic table of contents. However, it is not very user-friendly, with lots of over-complex options and non-clear explanation. I have improved this for the next patch release.


I have refreshed our WYSIWYG tutorial for v10, specifically going into a lot more detail about how copy&paste works, and how to manage styles. I've made the tutorial more approachable to regular users, as it is currently a bit tech-heavy.

Other changes

Here are a few more possible improvements, but would need sponsorship. I am including for completeness, as I don't think they are as important as the above.
0001794: Add ocPortal 'preview' toolbar button to CKEditor - ocPortal feature tracker
0001793: Bundle CKEditor imagepaste plugin - ocPortal feature tracker
0001500: Filedump integration with ckeditor and add-block - ocPortal feature tracker
I have set up a 'CKEditor' tag on the tracker to better manage all these ideas in the future.

Do you have any other ideas on how WYSIWYG should be improved? Please chime in.

View all


There have been no trackbacks yet