How to Add a Rich Text Editor to your Custom Application Pages

This article will talk specifically about how to add a Rich Text Editor to your custom application pages. When initially doing some research on this topic, I found a lot of information, but not anything useful that I could actually implement. Here are my steps for adding a control of this type to your pages:

  1. If you would like to leverage the default sharepoint rich text editor control within your own custom pages, there’s one class you need to get familiar with: InputFormTextBox
  2. The actual MSDN reference is not very helpful so to get started with a control of this type, you’ll need to know a couple things. Let’s begin by adding the control to our page as follows: 
    1
    2
    
    <wssawc:InputFormTextBox ID="iftxtDescription" runat="server" TextMode="MultiLine" Rows="20"
    RichTextMode="FullHtml" RichText="true"></wssawc:InputFormTextBox>
  3. The reason I know it’s wssawc is because at the top of the custom application page, Microsoft.SharePoint.WebControls namespace should be registered with a tagprefix of wssawc
    1
    
    <%@ Register TagPrefix="wssawc" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
  4. Some properties to be aware of:
    • ID – all controls need this. You’ll use the ID to work with the control in the code behind or the inline code
    • TextMode – this specifies whether the control is a Password control, a MultiLine control or SingleLine control. If you’re attempting to create a rich text editor, you’ll want to set this to MultiLine.
    • Rows – specifies the rows/height of this control
    • RichTextMode – specifies whether the mode for the rich text. Options are: Compatible, FullHtml, HtmlAsXml.
    • RichText – true or false. Don’t forget to set this to true!
  5. To save data from this type of control:
    calendarListItem["Job Description"] = iftxtDescription.Text;
  6. To read data from a rich text column into this control:
    1
    2
    
    SPFieldMultiLineText multiDescription = (SPFieldMultiLineText)listItem.Fields["Job Description"];
    iftxtDescription.Text = multiDescription.GetFieldValueForEdit(listItem["Job Description"]);

That should do it! I should point out that the multiDescription object that we created above actually has a couple useful methods beyond the one that I used. GetFieldValueForEdit() will grab the contents of the field in rich text and display it in my control quite nicely. I could also have used GetFieldValueAsHTML() for html or GetFieldValueAsText() for plain text.

Note: If you attempt to set the Enabled or ReadOnly properties of this control, they won’t work. I ran into this issue myself and confirmed it with several other users having the same problem. Microsoft has acknowledged this as a bug (37846) but I have yet to find any documentation on this bug. If you do find anything, please let me know!

,

5 Responses to “How to Add a Rich Text Editor to your Custom Application Pages”

  1. naveen February 21, 2012 at 3:30 am #

    This is working but only in IE. Do you have other solution which can work across browsers?

  2. shereen February 21, 2012 at 12:24 pm #

    Hi Naveen,

    Not that I know of no. SharePoint 2007 doesn’t really work well in other browsers anyways, 2010 is a lot better.

  3. kapil May 23, 2013 at 2:46 am #

    Hi shereen,

    I am new to sharepoint.I am using sharepoint2010. In an application i am using control but the tool bar above the control is repeating .
    Please let me know what to do.

  4. kapil May 23, 2013 at 2:54 am #

    Hi All,

    I am new to sharepoint 2010.the control sharepoint:Inputformtextbox which i used in my application but the tollbar above the control is repeating.Let me know friends what need to do.

Trackbacks/Pingbacks

  1. Links (2/1/2009) « Steve Pietrek - Everything SharePoint - February 1, 2009

    […] How to Add a Rich Text Editor to your Custom Application Pages […]

Leave a Reply