Get Enhanced Contributor Editing!

My contributors can add headings, delete rows and auto-insert image ALT text. Can yours? No? Ha!

Well, now they can too, using these replacement HTML Object Properties forms. I have rewritten the standard forms and bundled them together for you to download.

List of new functionality:

• Apply "auto-styles" (CSS class) to text, paragraphs & tables
• Convert or remove text formatting (FONT, SPAN, BOLD etc)
• Convert paragraphs from/to headings (H1 to H6, P, DIV etc)
• Convert table cells from/to table header cells (TD or TH)
• Edit or delete table rows
• Calculate image download size & time (popup alert for oversized images)
• ALT text for image auto-inserted from the image's "Title" metadata
• Set image dimensions & keep aspect ratio
• Set type of numbered list & starting number

Note that no core CS or SS code is modified.

I included a readme.txt file with instructions, disclaimers and other fancy words. Enjoy!

• Download Replacement HTML Object Properties forms (ZIP, 19kb)

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.