Friday, July 13, 2012

SharePoint Rich Text Input Control

SharePoint 2010 has inbuilt text box control that can be used to create rich text strings including images, hyperlinks, can use your own html tags in this.




Let's see how to use this control

The control tag is defined below

 <SharePoint:InputFormTextBox ID="txtmsg" runat="server" Rows="10" TextMode="MultiLine"
                RichText="true" RichTextMode="FullHtml">

There are properties that turns this simple text box to rich text box control and those are "RichTextMode" and "RichText"

Set "RichText" property value to true to and "RichTextMode" to "FullHtml". You can set height and width of this control using the "Columns" and "Rows" properties respectively.

Known Issues

This control does not work with firefox and chrome browsers. Only works with IE.

Sometimes this control does not render properly and only html text is displayed, to overcome this issue use the below function on the html part of page where you are using this control.


This function converts the text area to rich text control using function"RTE_ConvertTextAreaToRichEdit"

that is defined in the "/_layouts/1033/form.js" file.


<script type="text/javascript">

function CreateRichEdit(id) {

if (browseris.ie5up && browseris.win32 && !IsAccessibilityFeatureEnabled()) {

g_aToolBarButtons = null;

g_fRTEFirstTimeGenerateCalled = true;

RTE_ConvertTextAreaToRichEdit(id, true, true, "", "1033", null, null, null, null, null, "Compatible", "\u002f", null, null, null, null);

RTE_TextAreaWindow_OnLoad(id);

}

else {

document.write("&nbsp;<br><SPAN class=ms-formdescription><a href='javascript:HelpWindowKey(\"nsrichtext\")'>Click for help about adding basic HTML formatting.</a></SPAN>&nbsp;<br>");

};

}

    var id = "<%= txtmsg.ClientID %>";


"here use your own rich text control id and call the function like below;

    CreateRichEdit(id);
</script>

1 comment:

  1. Thank you for taking the time and writing this post. I am looking this type of information on Rich Text Edit Control. Great help for me!

    ReplyDelete