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.

Zend Framework

As I wrote yesterday, today I gave a lecture at JAMK about PHP application architecture and Zend Framework. Last two Tuesdays were more theory-based, but today we concentrated more on actually doing something. Therefore I don't have as many slides available in the Zend Framework set as there are in Modern Web Technologies.

The slides start by introducing some common problems which I've encountered while doing PHP application development. This was followed by some useful practices and design patterns for solving those issues. After problems and design patterns are out of the way, there are few slides about Zend Framework, what it is, why it makes sense to use it and some basic principles how Zend Framework based application works.

Rest of the time we concentrated on doing Zend Framework 1 Getting Started tutorial. Because of some security policy issues and problems with virtual environments some students didn't have a complete development environment available and we couldn't make Apache configurations for everyone. That's why going through the tutorial took a while, but finally we were able to get the demo application up and running for all students.

As with Modern Web Technologies, I decided to share the slides via SlideShare.

Updated Modern Web Technologies Slides

About 8 months ago I wrote about my lectures at JAMK. I got good feedback from this JavaScript, HTML 5 and CSS 3 set and was asked to do the same two lecture set again.

Before giving those lectures I revised and updated the slides. Here are the major changes I made to the slides.

• JavaScript singleton pattern usage is now fixed to use Douglas Crockford's module pattern.
• Section about web sockets is updated.
• Some examples are added, such as the basic HTML 5 doctype example page.
• JavaScript has now few slides about debugging which was placed just before introducing jQuery.

Tomorrow I will also give a lecture at JAMK about PHP application architecture and Zend Framework. I'll update those materials to SlideShare too, but first thing's first - here are the updated Modern Web Technologies slides.