CKEditor with Drupal WYSIWYG

CKEditor is a WYSIWYG editor (What You See Is What You Get) that works with Drupal through either a direct connection add-on module or the WYSIWYG add-on module. The WYSIWYG module offers a choice of editors and some nice configuration features. This article looks at CKEditor with the WYSIWYG module.

Modern HTML?

HTML used to have formatting elements to make text pretty but not to import information about the meaning of the text. HTML is now oriented toward meaning (the semantic web) and decoration is added through CSS, not HTML. WYSIWYG editors tend to display buttons that apply decoration because they want to look like word processors. A good editor replaces the common decorations with the closest semantic HTML and an appropriate CSS class. CKEditor does a good job here.

Bold

Many HTML editors and word processors have a bold button to produce bold text. Bold has no meaning outside of text decoration so the ancient <b> HTML tag was tossed in the bin and replaced by <strong> to indicate a strong emphasis. CKEditor has a bold button that produces the correct strong HTML element. Most Web browsers display strong text as bold and they may also do other things to make the text obvious.

Italic?

Italic went the way of bold. Many HTML editors and word processors have an italic button to produce italic text. Italic has no meaning outside of text decoration so the ancient <i> HTML tag was tossed in the bin and replaced by <em> to indicate an emphasis. CKEditor has an italic button that produces the correct em HTML element. Most Web browsers display emphasised text as italic and they may also do other things to make the text obvious. Low resolution devices might substitute something different if the resolution of the screen cannot reproduce italic text in a readable format.

Editing interactions

Try formatting some text then overlapping a different format. Every word processor, from the well developed Microsoft Word through to the monster open source OpenOffice application, produces some stupid results. Deleting an overlapping format often further fractures the results. Most WYSIWYG editors successfully apply simple formatting then fail when mixing multiple formats or deleting parts of complicated formats.

Multiple edits

Version 1 and 2 of CKEditor produced some weird results when applying multiple overlapping formats and deleting part of the formatting. A quick test of the current version 3 produced no errors. CKEditor appears to be the leading WYSIWYG editor for complex formatting.

CKEditor and Drupal filters

Some Drupal input filters fight with other types of filters including the ones in WYSIWYG editors. As a general rule, switch on the Drupal filters or the editor filters but not both.

I have web sites where content is mixed from WYSIWYG editors, plain text editing, and other sources but most of the input is from plain text editing. For those sites I leave the Drupal filters on and the filters in the WYSIWIG editors off.

For some other sites I switch off the Drupal filters and switch the WYSIWYG editor filters on. If you choose the WYSIWYG editor filters, you have to switch off the option that lets users switch off the WYSIWYG editor.

Drupal is supplied with two default input types, one is Filtered HTML and the other is Full HTML. The main difference is the filter to limit the type of HTML allowed in the content. If you use the Drupal HTML filter, it always runs and always limits the input. If you use an equivalent in a WYSIWYG editor, there is always a way to switch off the WYSIWYG editor and enter uncontrolled HTML. Leave the Drupal HTML filter on.

Drupal and WYSIWIG editors have filters to change the internal layout of content. These filters are almost irrelevant. Their main use is to make the HTML readable when you view the HTML outside of an editor. During development of a web site or a theme, when you view the raw content and HTML direct, set Drupal and your WYSIWIG editor to not change the internal layout or white space. When your web site is finally developed, consider options to switch on the removal of unneeded white space to reduce the length of the output.

Conclusion

I find HTML easy without an editor. Most people find HTML difficult and prefer an editor. Common editors add as many problems as they remove. CKEditor adds a lot of power with few complications. once you understand the interaction between Drupal filters and the WYSIWYG editor, you can set up a helpful reliable editor using WYSIWIG and CKEditor.