Rich Text, Poor Me

It seems that I’ve come across my first little hiccup in my little DIY project.  The ugly cross-browser compatibility issue has shown itself.  Actually, in this case it’s less cross-browser compatibility and more cross-browser consistency.

As I said before in the article introducing the overall plan for Mashed Bits, one of the features that I’d like to include in addition to all the proposed social networking fare is a full-featured blog (or as close to it as I can manage given my DIY mentality).  Of course, no blog worth its salt will ask a blogger to type out articles in a simple text box.  Text box? Ridiculous.  It’s all about the rich text editor.

Yes.  Before you start, I know about CKEditor, TinyMCE, YUI and the various other great, customizable and already full-featured possibilities I could choose from.  But remember, DIY.

Really, the problem started when I discovered how difficult Firefox can be with the contentEditable property (You’re only able to apply it to the whole page… really Mr Mozilla?).  But that’s not the big problem.  Introduce an iframe and you’re good to go on that little .  No, the real problem shows up when you try to add formatting to the text within  the make-shift text editor.

There are two ways to add formatting styles to the text being edited: use your keyboard shortcuts (eg. CTRL + B for bold) or add a little toolbox with buttons that do the job for you.  To give these buttons the power to perform these actions, you need to implement the javascript execCommand() method.  Sadly, it seems that not all browsers use the same mark-up when applying formatting.

Just using them as an example, let us look at Google Chrome and Mozilla Firefox.  In Chrome (my browser of choice, by the way), if you try to make a selection bold it will surround the text with the <b></b> tags.  Firefox will do otherwise.  It will, instead, surround the text with the following: <span style=”font-weight: bold;”></span>.  To the user they look identical but I’d like some better consistency.  Even more, I’d like to not have any in-line styling in my HTML.

Can  I fix this? Will I eventually give In?  I don’t know.  I’m currently considering implementing some fancy javascript that plays around with text ranges and inserts only the tags I want.  Right now options are being weighed and I suppose time will tell how this one moves forward.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>