SharePoint Rich Text Box (InputFormTextBox) Control

Источник http://amitkumarmca04.blogspot.ru/2010/10/sharepoint-rich-text-box.html

Use of Rich Text Box (InputFormTextBox) Control in SharePoint:

Objective:

In this article, I am going to explain use of RichTextField (InputFormTextBox) control in SharePoint.

Requirement:

Take an example of one requirement: We need to create newsletter on the basis of user input. The user input can be a normal text or html format text.

Resolution:

In this scenario, we can use SharePoint Rich Text Box (InputFormTextBox) control in a custom webpart/usercontrol. Check the screen shot below:





Ways of using SharePoint Rich Text Box (InputFormTextBox) control:

1. The following code illustrates how to use SharePoint Rich Text Box (InputFormTextBox) control in user control:

i. Add the required directive at the top of the ascx page (if you're using a web user control):

view plainprint?

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

ii. For creating instance of SharePoint Rich Text Box (InputFormTextBox) control in your ascx (if you're using a web user control):

view plainprint?

1. <amitkumarspcontrols:inputformtextbox id="txtNotes" runat="server" maxlength="8000" richtext="true" richtextmode="FullHTML" rows="21" style="height: 270px; width: 700px;" textmode="MultiLine" width="700px">  
2. </amitkumarspcontrols:inputformtextbox>  

2. You can also create this type of control completely in code:

i. This is available under Microsoft.SharePoint.WebControls namespace (if you're using a custom web part):

view plainprint?

1. InputFormTextBox richMessage = new InputFormTextBox();  
2. richMessage.RichText = true;  
3. richMessage.RichTextMode = SPRichTextMode.FullHtml;  

You may also use following useful properties:

view plainprint?

1. richMessage.AllowHyperlink = true;  
2. richMessage.TextMode = TextBoxMode.MultiLine;  
3. richMessage.Wrap = true;  
4. richMessage.Rows = 10;  
5. richMessage.Width = System.Web.UI.WebControls.Unit.Percentage(100);  

There are a number of properties/attributes that you can set:

•ID: control id.
•Text: the string within the control.
•ErrorMessage: you can define a custom error message that will be displayed when an error occurs.
•ErrorMessageLabelControl: you can specify a control id of a control on the page in which the error message will be rendered.
•TextMode: accepts a value of type TextBoxMode. Possible values are MultiLine, SingleLine and Password. The default is SingleLine.
•Columns: indicates the width of the text box.
•Rows: indicates the number of rows that will be displayed. This is only applied if the TextMode property is set to MultiLine.
•RichText: indicates if a normal text box or a rich text box will be displayed. The default value is false. The text box will only be rendered as a rich text box if the TextMode property is set to MultiLine.
•RichTextBoxMode: accepts a value of type SPRichTextMode. Possible values are Compatible, FullHtml and HtmlAsXml. The default value is Compatible. this property only applies if the RichText property is set to true.
•AllowHyperlink: this property only applies if the RichtText property is set to true. The necessary controls to insert hyperlinks and images will be added to the tools pane.
•Direction: This orders the controls in the tools pane from left to right or from right to left. The value is of type ContentDirection having values NotSet, LeftToRight, RightToLeft. The default value is NotSet. This property only applies if the RichText property is set to true.





Example:

The following code illustrates how to use SharePoint Rich Text Box (InputFormTextBox) control in user control. In this example, I am also validating, value in SharePoint Rich Text Box (InputFormTextBox) control is empty or not using JavaScript.

RichTextBoxControl.ascx Code:

view plainprint?

1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="RichTextBoxControl.ascx.cs" Inherits="RichTextBoxControl" %>  
2. <%@ Register Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"  
3.     Namespace="Microsoft.SharePoint.WebControls" TagPrefix="AmitKumarSPControls" %>  
4.       
5.     <style>  
6.   
7. .blackborder_NoneTop{  
8.  border:1px solid black;  
9.  border-top:none;  
10. }    
11.   
12.     
13.   
14. .blackTxtLeft {  
15.  font-family: Verdana, Arial, Helvetica, sans-serif;  
16.  font-size: 11px;  
17.  font-weight: bold;  
18.  color: #000000;  
19. }  
20. .redMsg { color: #ff0000;  
21. }  
22.    .btn{  
23.   background-image:url('/_layouts/Amit/images/btn.jpg');  
24.   height:22px;  
25.   font-family:Arial;  
26.   padding:0px;  
27.   border:0px;  
28.   color:white;  
29.   font-size:11px;  
30.   font-weight:bold;  
31.   background-repeat:repeat-x;  
32.   padding-left:5px;  
33.   padding-right:5px;  
34.  }    
35.    
36. .bottomBorder {  
37.  border-bottom-width: 1px;  
38.  border-bottom-style: solid;  
39.  border-bottom-color: #000000;  
40. }                                                                     
41. .bottomBorder TH{                                                                                          
42. border-bottom: 1px solid black;  
43. }    
44.   
45. .HeadingWhite {  
46.  font-family: Arial, Helvetica, sans-serif;  
47.  font-size: 12px;  
48.  font-weight: bold;  
49.  color: #FFFFFF;  
50.  padding:5px;  
51.  text-transform:uppercase;  
52. }  
53.      .blueBG {  
54.  background-color: #093a80;  
55.  font-family:Verdana, Arial, Helvetica, sans-serif;  
56.  color:white;  
57. }                                                                                                                                                                                   
58.     </style>  
59.       
60.     <script type="text/javascript">  
61.       
62. function NormalizeTxt(m)  
63. {  
64.     str=""  
65.       
66.     va=m.length  
67.   
68.     tt=0  
69.     while(tt<va)  
70.     {  
71.         if(m.substring(tt,tt+1)=='<')  
72.         {  
73.          while(m.substring(tt,tt+1)!='>' && tt<va)  
74.           tt++;  
75.         }  
76.         str+=m.substring(tt,tt+1)  
77.         tt++;  
78.     }  
79.     newStr=str.replace(/>/g,'');  
80.     return newStr;  
81. }  
82.       
83.       
84. function TextBoxMessageCheck(refNotesId,refNotesClientId)  
85. {  
86.  var objNotes= document.getElementById(refNotesClientId);  
87.   
88.    //Rich text box for template content  
89.     var strHtml = RTE_GetEditorDocument(refNotesClientId).body.innerHTML;  
90.       
91.      var plaintext = strHtml;  
92.      plaintext = plaintext.replace(/<[\w]*>/gi,'');          
93.      plaintext = plaintext.replace(/<\/[A-Z]*>/gi,'');   
94.      plaintext = plaintext.replace(/ /gi,'');  
95.      plaintext = plaintext.replace(/\n/gi,'');  
96.      plaintext = plaintext.replace(/\t/gi,'');  
97.      plaintext = plaintext.replace(/\r/gi,'');   
98.        
99.      var resultText = NormalizeTxt(plaintext);  
100.      if(resultText == '')  
101.         {  
102.             alert("Please enter value in rich text box");  
103.             return false;  
104.          }  
105.       
106.   
107.   
108.  return true;  
109. }  
110.     </script>  
111.       
112.   
113.   
114.   
115.   
116.   
117.   
118.   
119.   
120.   
121.   
122.   
123.   
124.   
125.   
126. <table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">  <tbody><tr>    <td height="12"> </td>  </tr>  <tr></tr>  <tr>    <td class="blueBG HeadingWhite "><span class="HeadingWhite">Rich Text Box Control</span></td>  </tr>  <tr>    <td class="blackborder_NoneTop ">  
127.   
128.   
129.   
130.   
131.   
132.   
133.   
134.   
135.   
136.   
137.   
138.   
139. <table width="98%" border="0" align="center" cellpadding="3" cellspacing="1">      <tbody><tr>        <td valign="top">  
140.   
141.   
142.   
143.   
144.   
145.   
146. <table width="100%" border="0" align="center" cellpadding="0" cellspacing="5">            <tbody><tr>              <td valign="top" nowrap="" class="blackTxtLeft" colspan="2">Enter Text:<span class="redMsg">*</span></td>            </tr>            <tr>              <td colspan="2" valign="top" class="blackTxtLeft">  
147.                      
148.   
149.   
150.   
151. <table>                        <tbody><tr>                            <td>  
152.                                 <amitkumarspcontrols:inputformtextbox id="txtNotes" runat="server" maxlength="8000" <br="">                                    RichText="true" RichTextMode="FullHTML" Rows="21" Style='height: 270px; width: 700px;'  
153.                                     TextMode="MultiLine" Width="700px">  
154.                                 </amitkumarspcontrols:inputformtextbox>  
155.                             </td>                        </tr>                   </tbody></table>  
156.               </td>            </tr>        </tbody></table></td>      </tr>        <tr>            <td class="bottomBorder" valign="top">  
157.                 <!-- label for displaying error message start-->  
158.                 <asp:label id="lblMessage" runat="server" visible="false"></asp:label>  
159.                 <!--Error label end-->  
160.             </td>        </tr>        <tr>        <td align="center" valign="top" class="bottomBorder"> </td>      </tr>      <tr>        <td align="center" valign="top">  
161.             <asp:button id="btnDisplay" runat="server" cssclass="btn" text="Display" onclick="btnDisplay_Click">  
162.         </asp:button></td>      </tr>    </tbody></table></td>  </tr>  <tr>    <td> </td>  </tr></tbody></table>                    

RichTextBoxControl.ascx.cs Code:

view plainprint?

1. using System;  
2. using System.Data;  
3. using System.Configuration;  
4. using System.Collections;  
5. using System.Web;  
6. using System.Web.Security;  
7. using System.Web.UI;  
8. using System.Web.UI.WebControls;  
9. using System.Web.UI.WebControls.WebParts;  
10. using System.Web.UI.HtmlControls;  
11. using System.Text;  
12. using Microsoft.SharePoint;  
13.   
14. public partial class RichTextBoxControl : System.Web.UI.UserControl  
15. {  
16.  
17.     #region Render Controls and Handle Controls Event  
18.  
19.  
20.     #region Handle Page Load Event  
21.     protected void Page_Load(object sender, EventArgs e)  
22.     {  
23.         if (!IsPostBack)  
24.         {  
25.             SetAttibutes();  
26.         }  
27.     }  
28.     #endregion  
29.  
30.     #region Handle Display Button Click Event  
31.     protected void btnDisplay_Click(object sender, EventArgs e)  
32.     {  
33.         if (!string.IsNullOrEmpty(txtNotes.Text))  
34.         {  
35.            SetMessage(txtNotes.Text.Trim(), lblMessage);  
36.         }  
37.   
38.     }  
39.     #endregion  
40.  
41.  
42.     #endregion  
43.  
44.     #region Helper  
45.  
46.     #region set controls attributes  
47.     private void SetAttibutes()  
48.     {  
49.         //Add JS to the Display button  
50.         btnDisplay.Attributes.Add("OnClick", "return TextBoxMessageCheck('" + txtNotes.ID + "','" + txtNotes.ClientID + "');");  
51.         //  
52.   
53.   
54.     }  
55.     #endregion  
56.  
57.     #region Show message on the screen  
58.     /// <summary>  
59.     /// This method makes the lblMessage object visible to the page and set its Text property to the message provided.  
60.     /// </summary>  
61.     /// <param name="message">The string value assigned to the Text property of the lblMessage object.  
62.     private void SetMessage(string message, Label lblMessage)  
63.     {  
64.         if (lblMessage != null)  
65.         {  
66.             lblMessage.Visible = true;  
67.             lblMessage.Text = message;  
68.         }  
69.         else  
70.         {  
71.             Page.Response.Write(message);  
72.         }  
73.     }  
74.     #endregion  
75.  
76.     #endregion  
77. }  

You can deploy custom user control in SharePoint with the help of SonofSmartPart Web part.