Michael Hofer – SharePoint Blog

UPDATE 2009-06-25:

As I've hoped somebody pointed me to a much more "standardized" solution for achieving this: Use the Microsoft.SharePoint.WebControls.InputFormTextBox if you want the SharePoint RichText/HTML-Editor in your WebPart or control, so you don't have to worry about JavaScripts and ServicePack/Migration-Issues (i hope at least….).

My implementation is now very smooth:

<%@ Register Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"
    Namespace="Microsoft.SharePoint.WebControls" TagPrefix="sharepoint" %>

<sharepoint:InputFormTextBox TextMode="MultiLine" Title="Email Body" class="ms-input" Rows="6" ID="txtEmailBody"
        RichText="true" RichTextMode="Compatible" Runat="server"  />

Thanks go to the commenters below who pointed me very quickly to the above control, especially to"Dissing // Ameq"  from the "SharePoint Bruger Gruppe"

————————————————-

Did you ever wanted to provide your users the ability to enter RichText/HTML in your input controls within a WebPart or Server Control? This post will show you (conceptionally) how this can be achieved using the standard SharePoint RTE.

Scenario: We've got a textarea that should allow users to enter RichtText/HTML, for instance:

<asp:TextBox ID="txtEmailBody" runat="server" TextMode="MultiLine" Rows="10" />

 please note that "MultiLine" is mandatory, because we need a <textarea> to be rendered.

If we want to make this control to show the formatted RichText/HTML and provide a toolbar that allows for formatting, there are 4 steps required (I do them in the PreRender event):

Step1: Adjust the text that is passed to the <textarea>

In order to render you exisiting field content, you must ajust the text that is set to the textbox like this:

 if(!string.IsNullOrEmpty(txtEmailBody.Text))
    txtEmailBody.Text = txtEmailBody.Text.Replace("x00a0", "&nbsp;");

Step 2: Ensure that "forms.js" is present on the page

This javascript-File contains especially "RTE_ConvertTextAreaToRichEdit" and "RTE_TransferIFrameContentsToTextArea".

// Only needed if the page does not include forms.js anyway
if (!Page.ClientScript.IsClientScriptIncludeRegistered("forms")) {
   Page.ClientScript.RegisterClientScriptInclude("forms", "/_layouts/" + SPContext.Current.RegionalSettings.LocaleId + "/form.js"); 

Step 3: Add the client-side script that converts the TextArea to the RichText/HTML Editor

For the conversion, you need to add a javascript after(!) your TextBox. I did this by adding a <span>:

<span id="rteScript" ="server" /></span> 

 Now add the BLOCKED SCRIPT

// Registers the client-script that converts the text-area to the richt-text editor
string script1 = "<script>if (browseris.ie5up && browseris.win32 && !IsAccessibilityFeatureEnabled()){RTE_ConvertTextAreaToRichEdit(""
   + SPHttpUtility.EcmaScriptStringLiteralEncode(txtEmailBody.ClientID) + "", true, true, "", ""
   + SPContext.Current.RegionalSettings.LocaleId + "", null, null, null, null, null, "FullHtml", ""
   + SPHttpUtility.EcmaScriptStringLiteralEncode(SPContext.Current.Web.ServerRelativeUrl)
   + "",null,null,null,null);}else{document.write("&nbsp;<br><SPAN class=ms-formdescription>"
   + "<a href='BLOCKED SCRIPTHelpWindowKey(\"nsfullrichtext\")'>Click for help about adding HTML formatting.</a></SPAN>&nbsp;<br>")};</Script>";
rteScript.InnerHtml = script1;

Step 4: Register the OnSubmit client-side script

 // Registers the OnSubmit client-script that transfers the contents of the richt-text editor back to the text area

string script2 = "if (browseris.ie5up && browseris.win32) RTE_TransferIFrameContentsToTextArea('"
   + SPHttpUtility.EcmaScriptStringLiteralEncode(txtEmailBody.ClientID) + "');";
Page.ClientScript.RegisterOnSubmitStatement(typeof(SPUtility), "RTE_" + txtEmailBody.ClientID, script2);

There you go!

Some thoughts about this solution:

• Don't even think about this as "standard solution": You must check after every service pack etc. if the scripts are still the same etc. Not even thinking about the migration to SharePoint 2010.
• If you need validators on your field, make sure you disable client-side validation and do it on the server.
• I have not checked this, but I believe that the text entered by the user is not filtered on the client side. This could be used to include new functionalities such as "insert movie" which inserst <object> and other tags that the standard RichTextField-Control would filter out. But don't forget to implement an XSS-Filter to prevent scripting attacks.
• If you need more details on how it is done for the RichTextField control have a look at Microsoft.SharePoint.dll with .NET Reflector

Filed under: Uncategorized