How I got H1 Headings into Site Studio pages

One of the biggest frustrations of our users in the inability to insert a standard HTML heading.

"I beg your pardon" you say, "no headings?"

Yep, the Site Studio Contributor application window allows you to only write paragraphs. You can insert tables, horizontal rules, bold text and even classes*, but not headings.

To get around this deficiency, I started by modifying the HTML Object Properties Forms. Being the logical programmer that I am, I tried to create a function that allowed me to replace a <p> tag with a <h1> tag, using the standard HTML replaceChild() method. Unfortunately this throws an error.

It turns out that any attempt to insert a new node in the HTML DOM will be rejected... oddly enough it didn't mind me deleting nodes though. After a while I gave up and forgot about it.

Then the other night as I was trying to sleep I thought "instead of being a nice boy and respecting the DOM, why not just treat code as dirty text and do a simple string replace?" and vola! it works.

I simply grab the node I want to work with and replace its outerHTML with its innerHTML , wrapped in my heading tags. Like this:

g_obj.outerHTML='<h1>'+g_obj.innerHTML+'</h1>';

Now if only I'd thought of that last year...

Oh there's one final twist... you can't use outerHTML on table cells, which sucks when you need to change a TD into TH. To get around this problem you need to replace the entire table!

* When applying a class it uses a FONT tag!? Crazy.