Sharepoint Rich Content Editor munging HTML added from custom toolbar button

Question

Summary: What I'm trying to ask - are we going about this the completely wrong way, or, is there a way to stop Sharepoint, or its rich editor, from munging the HTML which gets added?

I've been 'dropped' into a project revolving around Sharepoint 2007 (trust me, I'm not entirely pleased about it), and one of the things that is sought after is a way to use a rich-content-area for the users to put in 'rich content' and then add certain 'extras' to the content, such as expandable content areas, dialogs etc.

The initial plan of attack was to add in a custom button to the Sharepoint rich content editor toolbar, which we have code to do this, and it works etc, and attach javascript event handlers to certain elements - which also works - to a point.

One thing we are doing is using an <a> element and a subsequent <div> to setup a dialog (using jQuery UI to do the magic). When the user clicks the 'insert dialog' button the following is inserted into the editor:

<a href="#" class="dialog-trigger">Click me to open the dialog</a>
<div class="dialog-content">
    this is some dialog content etc
</div>

When the page loads we hook onto the .dialog-trigger click method, grab the a element's sibling which is a .dialog-content and set that up as a dialog. This 'works' as long as you don't want to edit anything.

What I have found is that as soon as you start editing the content within the .dialog-content DIV the rich-content editor starts munging the HTML, for example, adding a list adds in the following HTML:

<li><div class=dialog-content>Some list item</div></li>
<li><div class=dialog-content>Some list item 2</div></li>
<li><div class=dialog-content>Another list item</div></li>

As you can imagine, this kind of breaks what we are trying to do.

To summarize what I'm trying to ask - are we going about this the completely wrong way, or, is there a way to stop Sharepoint, or its rich editor, from munging the HTML which gets added?

Answer 1

If you're just putting the HTML as it is into the editor content, you won't be able to stop the editor from messing with your HTML. If you have some content that must be kept intact then you need to store it somewhere else and have a placeholder for it in the editor that contains an ID for the actual piece of content (e.g. a placeholder image with the ID in the alt attribute). You'll need to replace such placeholders with the real HTML content when the editor saves and vice versa when the editor loads.

Answer 2

I feel your pain, SharePoint's rich text editor is not the best compared to other open source solutions out there. Anyhow, perhaps you can train your users to use predefined styles? Then use JQuery to do stuff.

If you do the following in your CSS

/*.ms-rteCustom-anything else you want*/
/*e.g.*/
.ms-rteCustom-DialogTrigger {
    color:#333333
}

Now the sharepoint editor will show you "DialogTrigger" under Styles and apply it as a div.

Alternatively, you could technically use another editor and post the data back to SharePoint using SPAPI or JQuery + SharePoint webservices.