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)
<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+.
Select me and click the Bold 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 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
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