contentEditable cross browser WYSIWYG

I'm a long time adopter of the FCKeditor javascript WYSIWYG editor. But i'm a bit impatient waiting for it to load, upto 15 seconds off a snail server... and more recently i've learnt how it works.This document shows how we can all create our own text editors.

FCKeditor has a plethora of features, more than i need, and although it is customisable. It does not tick all the boxes. Mostly it doesn't tick these...

• Simple and lightweight (<30kb)
• Non-Conflicting with other scripts (written with closures)
• Multiple instances on same page
• Degrages to a <textarea>, on devices it doesn't support (mobiles)

I'll have a working copy up here soon, but here are a few examples of WYSIWYG editors under critisism.

• CKEditor supplants the FCKEditor as a non-intrusive editor which degrades
• RTE, lightweight, endorsed by Mozilla
• Quirksmode's Example, lightweight, not a dynamic solution
  

Building the editor is very simple: when you know how. The rest of this document tries to put it together.

Make an element writeable.

By this i mean a selected item on the page becomes editable.

I am editable text

<div contenteditable="true">I am editable text</div>

You can attach the "contentEditable" attribute to any node, however in practice i noticed most editors will put the editor in an Iframe. I've created the same level of functionality using a div element (with only breaking the page down button in Firefox, which i attrbute to a CSS problem)

Editable Heading

<h3 contenteditable="true">Editable Heading</h3>

Adding Format Buttons

The document.execCommand method inserts html into the current focus of a document. It is supported by the top five browsers, and atleast IE6+.

Bold

Select me and click the Bold button

<button onclick="document.execCommand('bold',null,false);">
<b>Bold</b>
</button>

In the above example we've used the command identifier 'bold', more command identifiers at MSDN will help you create other effects.

Undo & Redo

Currently Undo and Redo is not built into IE. Mozilla and Chrome support the shortcut keys we've become accustomed to CTRL+z and CTRL+y.

@todo: Store changes to the document and create bespoke undo and redo keys.

Text Selection

Text selection allows us to apply the formatting for a current text. However it should also allow us to find the formatting of the selected text too. Unfortunatly this is not particulary easy to do and all browsers handle the text selection object rather differently.

IE for instance uses: window.document.selection.createRange()

Firefox and Webkit browsers use: window.getSelection()

Unfortunatly Firefox does not always give the correct focusNode selected. I'll write more on this in another document. See http://www.perplexed.co.uk/1020_text_selector_jquery_plugin.htm

Conclusion

Hopefully this document has shown you how easy it is to create your own WYSIWYG editor for the web. 

For a good example i recommend the very simple implementation over at Quirksmode's ExecCommand

References

• https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
• http://www.kevinroth.com/rte/demo.htm
• http://msdn.microsoft.com/en-us/library/ms537834(VS.85).aspx

Comments

	Title* Comment Prove you are not a robot To prove you are not a robot, please type in the six character code you see in the picture below I can't see this! Contact Name* Email never shown* Home Page Send