Solving WYSIWYG issues

Lately I have been solving some WYSIWYG editor issues at work. We are using CKEditor in our system and there were several issues we wanted to solve.

1. Content written in the editor should be valid XHTML markup
2. Users should not be able to input any malicious code in our system such as JavaScript or CSS properties like position: absolute
3. Content pasted in the editor contains <br /> elements as line breaks whereas we would want each line to be wrapper inside <div> element
4. When pasting simple data into the editor we noticed <div> elements started to get nested
5. We wanted to modify the way how CKEditor automatically indents the source code

First issue is partly solved by CKEditor itself. It creates valid XHTML, but we didn't want to rely just on client based implementation. To be on the safe side and to solve second issue we ended up using HTML Purifier to clean data from any malicious code and make sure that the code is valid XHTML. We have noticed that HTML Purifier provides great flexibility in terms of how it can be configured and it has been just the right tool for us to clean data inserted by user. For example, the default setup didn't allow user to embed Youtube videos, but we could specifically allow <iframe> elements where source would point to Youtube or Vimeo. Any other iframe src attribute content would be automatically removed.

CKEditor paste issues were bit tricky ones to be solved. CKEditor contains internal logic that single line breaks are replaced with <br /> tags and two line breaks are replaced with enterMode in case enterMode is either p or div. Once we got around this issue by doing custom paste event handling we noticed that div elements were nested in such cases where they shouldn't have been. The complete code how I solved issues three and four is available at StackOverflow.

Finally issue number five was an easy one to fix. CKEditor Developer Guide provides good documentation how to manipulate CKEditor's output formatting and we tweaked it to fit our preferences.