Rich Text Editor in Mootools
With the release of Firefox 3, we find all major browsers now support a single interface (mostly) for allowing the Browser to do all of our Rich Text editting needs. This allows us to set a single property, contentEditable, and then that element accepts rich text processing. No more loading in an iframe, having document.domain issues, and having little control over the style of the iframe. This, however, does mean Firefox 2 and below are excluded from the party.
What’s nice about the ease, is that we were able to use a similar solution in Prototype for our content editor , and it’s very easy to add a button that allows picture selection, instead of typing in a picture url.
Demo and code is hosted on github.
This is an early build, prompted by Chris, and isn’t perfectly polished. But it does get the job down. It could do with a nicer looking toolbar. And I’d like to get the Range and Selection API’s working, so that you don’t have to use the boring prompt box to insert links. If you try to use a modal prompt, since its the in the same window, the selection will change when the user types in the link, and will no longer insert the link around the (now un-)selected text.
Anyone can use it as is. And if you have suggestions, leave them in the comments and I’ll try to work them in.