It seems that DIY rich text is not just far from impossible but it’s cross-browser compliant as well. With the World Cup giving me more down-time between matches, I’ve had some time to tinker with my homework; and with the only match today at 1:30 (that’s 2:30 for those of us on DST), I’ve also got a little time to share it.
Starting from a base example at http://html5demos.com/, I’ve generated something that caters a little bit more to my needs. Not to belittle the work of the original author but after testing the example, I was a little surprised that he claimed it was fully cross-browser compliant. In a sense it was; the text could be manipulated by simply selecting it and typing away, but the way it behaved in Firefox was suspect.
While in Chrome it performed admirably (all the CTRL + B/U/I/… shortcuts worked fantastically), this was not so in Firefox. So there was no way to truly apply formatting to the text. Additionally,
designmode was applied to the whole document instead of only the element that was to be editable. This meant that the whole document was editable. It’s true that nothing behaves perfectly across every browser and compromises must be made but, in this case, I believe the editor’s cross-browser behaviour can be fairly consistent across them all.
Before I get into the details, see what I’ve done so far with Rich Text Editor 0.1.