Lately, I’ve been quite amazed by this one HTML attribute I’ve been ignoring all these years: ContentEditable. While it has been around for years as the preferred way of implementing WYSIWYG rich text editors, I’ve always stuck with the boring textarea.
All this changed last week as I was coding a Chrome extension to do dynamic content insertion into the Gmail composition area. As textareas must contain well… text, there would be no way to decide on using images or hyperlinks anytime in the future if I restricted myself to ASCII. I ended up using a single fixed-dimension
<div> with “contenteditable” set to true.
Working with ContentEditable is a whole new beast. I’m not sure yet whether all browsers implement the same standard tags for formatting but Chrome uses
<div><br /></div> for double-line breaks and wraps paragraphs in
<div>...</div>. Translating from plain text to this format meant I had do the parsing/splitting and tag insertion myself. The Gmail composition area formats its contents in a very specific way and I had to adhere to this standard.
Another thing about Gmail. Don’t bother trying to add classes and/or IDs to any of your inserted elements. Gmail strips them out. I found this out the hard way after saving and refreshing an email caused all my custom styles to be lost, despite the CSS being injected correctly. Now I understand the pain newsletter writers have to go through to get their content formatted and styled with inline-CSS. I haven’t had to write such ugly markup since 1997.