Jscript RichHTMLField control sharepoint Page Layouts

Article
03/13/2010

We are working on a Publishing portal (MOSS / Sharepoint 2007) and we had a requirement to allow the authors to enter Rich HTML content and that can contain javascript to popup some images that appear as small images in the content or just as a link. Now out of the box the RichHTMLField control rips off all javascript that you enter, but we wanted to allow the users to enter "onclick popup the page" kind of javascript in the content so that in DISPLAY mode the Jscript function could execute.

So we came up with a simple approach to add a client side handler (i.e. Java script that will find and replace the required tags) to replace a specific TAG on our page with the actual javascript tag (as our tags were constant). Following Java Script that we have added to the Master Page in the Head tag just before the </Head> tag should help understand how to overcome the limitation:

// Add an entry to the _spBodyOnLoadFunctionNames array
// so that our function will run on the pageLoad event.

_spBodyOnLoadFunctionNames.push("EnableLinks");

//onload=EnableLinks;

function EnableLinks()
{
if(!IsInDesignMode())
{
var cstIdentifier='id="ThisStringToReplace_onclick=';

// Create an array to store all the anchor elements in the page.
var anchors = document.getElementsByTagName("a");

// Loop through the anchors array.
for (var i=0; i<anchors.length; i++)
{
// Check if this anchor element contain cstIdentifier text.
if (anchors[i].outerHTML.indexOf(cstIdentifier) > 0)
{
//alert(anchors[i].outerHTML);

// Store the HTML for this anchor element.
oldText = anchors[i].outerHTML;

//rewrite the URL to remove our test text and add a target instead
newText = oldText.replace(cstIdentifier, 'onclick="');

// Write the HTML back to the browser.
anchors[i].outerHTML = newText;

//alert(newText);
}
}
}
}

function IsInDesignMode()
{
if(document.getElementById("MSOLayout_InDesignMode").value == '1') return true;
if(document.getElementById("MSOTlPn_SelectedWpId").value != "") return true;
return false;
}

</script>
------------------------------------------------------------------------------------------------------------

Ensure body tag in master page looks like:
<BODY scroll="yes" onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();">

otherwise
_spBodyOnLoadFunctionNames will come as ‘Undefined’ and code won’t execute.

And Following is the sample HTML (that you might add to the RICHHTMLFIELD):

<a href="https://blogs.msdn.com/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=5160&postid=9471322#" mce_href="https://blogs.msdn.com/controlpanel/blogs/posteditor.aspx?SelectedNavItem=Posts§ionid=5160&postid=9471322#" id="ThisStringToReplace_onclick=javascript:alert('hi');" >click here</a>

<tr>

</tr>

</table>

</div>

</td>

</td>

</tr>

</table>

By the way if you want to check on the client side whether the PAGE is in EDIT mode or DISPLAY Mode you can use the following:

Jscript RichHTMLField control sharepoint Page Layouts

Additional resources