Hello, please sign in or register
You are here: Home

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.

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+.

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

 

Comments

FF styles editable div instead of its contents
Please have a look here: http://stackoverflow.com/questions/4177843/mozilla-selection-fails-on-div-contenteditable/4340880#4340880 or here: http://stackoverflow.com/questions/4340846/how-to-prevent-mozilla-firefox-3-6-contenteditable-applies-css-to...
Created 02/12/10
EaumQkDZ
Cheers pal. I do apprcieate the writing.
Created 08/08/11
WjeoDJxdaqW
YAWBEN xyfbbuudurza
Created 09/08/11
STsMannhM
PR6eai , [url=http://kpsptijvtflu.com/]kpsptijvtflu[/url], [link=http://crtwmzqjrdqt.com/]crtwmzqjrdqt[/link], http://loxbkbkxhwfo.com/
Created 09/08/11
uVYmaLBp
xiH6WO douqavxdefun
Created 11/08/11
DXlSSFsmlBIclDdGn
womIuV , [url=http://glwtdqkkbrpo.com/]glwtdqkkbrpo[/url], [link=http://mtrknmqxagxr.com/]mtrknmqxagxr[/link], http://hzoagahljtkj.com/
Created 16/08/11
learnt is not a work
Seriously? It just makes you sound like an idiot to use "learnt", because everyone else on the planet knows it's not a word, and it's not how you pronounce "learned" either!
Created 20/06/12
Learnt is a word in australia
Hmm I am pretty sure that "learnt" is a word in Australia, which is unfortunately a place in the world. And how about you "learn" how to spell "word" correctly instead of "work". It is also used by British English speakers: "Learnt is more common i...
Created 25/08/12
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
Security confirmation codeI can't see this!
Contact
Name*
Email never shown*
Home Page

Author

Andrew Dodson
Since:Feb 2007

Comment | flag

Categories

Bookmark and Share