Html Editor Control for SharePoint Web parts

By:   |   Updated: 2010-07-13   |   Comments   |   Related: > Sharepoint


The scope of this article is to explain how to create SharePoint web parts with HTML text editing input controls. We will go through the creation of an email sending web part with a message field enabled for HTML formatting.


We are going to utilize the InputFormTextBox Class that is available under the namespace Microsoft.SharePoint.WebControls for the creation of HTML editing control.

Letís start creating an email sending Web Part with the message field enabled for HTML editing. Follow the steps below to create this web part. For SharePoint component development, I use WSPBuilder to a large extent. You can download it from this location:  WSPBuilder

Follow the below steps to develop the webpart.

  • Open Visual Studio 2008/2005. Go to File Menu --> New-->Project -->WSPBuilder --> WSPBuilder Project
  • Name the Project "EmailSenderWSP".
  • From the Solution Explorer, Right Click on the Project and select the "Add new item" option. From the window choose the option "WebPart Feature" and name the feature "EmailSenderWebpart".
  • Switch to the code behind the EmailSenderWebPart .
  • Find the "CreateChildControls" event for creating the controls/Layout of the web part, then add the following code to the "CreateChildControls" event
  • :
TextBox txtMailTo;
TextBox txtSubject;
InputFormTextBox ifTxtBox;

protected override void CreateChildControls()
    if (!_error)


            Table tbl = new Table();
            tbl.ID = "tblEmailSender";
            tbl.Width = Unit.Percentage(100);
            //tbl.Height = Unit.Percentage(100);
            tbl.CellPadding = 2;
            tbl.CellSpacing = 2;

            TableRow tr1 = new TableRow();
            TableCell tc11 = new TableCell();
            tc11.Width = Unit.Percentage(25);
            tc11.Text = "Mail To:";
            TableCell tc12 = new TableCell();
            tc12.Width = Unit.Percentage(75);

            TableRow tr2 = new TableRow();
            TableCell tc21 = new TableCell();
            tc21.Width = Unit.Percentage(25);
            tc21.Text = "Subject:";
            TableCell tc22 = new TableCell();
            tc22.Width = Unit.Percentage(75);

            TableRow tr3 = new TableRow();
            TableCell tc31 = new TableCell();
            tc31.Text = "Message:";
            tc31.Width = Unit.Percentage(25);
            TableCell tc32 = new TableCell();
            tc32.Width = Unit.Percentage(75);
            tc32.VerticalAlign = VerticalAlign.Top;

            TableRow tr4 = new TableRow();
            TableCell tc41 = new TableCell();
            tc41.Width = Unit.Percentage(25);                    
            TableCell tc42 = new TableCell();
            tc42.Width = Unit.Percentage(75);

            txtMailTo = new TextBox();
            txtMailTo.ID = "txtMailTo";
            txtMailTo.Width = Unit.Percentage(100);

            txtSubject = new TextBox();
            txtSubject.ID = "txtSubject";
            txtSubject.Width = Unit.Percentage(100);

        //This part of this code snippet creates 
//the HTML Editing Input Control ifTxtBox = new InputFormTextBox(); ifTxtBox.ID = "ifTxtBox"; ifTxtBox.RichText = true; ifTxtBox.RichTextMode =SPRichTextMode.FullHtml; ifTxtBox.TextMode = TextBoxMode.MultiLine; ifTxtBox.Rows = 10; ifTxtBox.Width = Unit.Percentage(100); ifTxtBox.Height = Unit.Percentage(20); tc32.Controls.Add(ifTxtBox); Button btnSend = new Button(); btnSend.ID = "btnSubmit"; btnSend.Text = "Send"; btnSend.Click += new EventHandler(btnSend_Click); btnSend.Width = Unit.Pixel(50); tc42.Controls.Add(btnSend); tbl.Rows.Add(tr1); tbl.Rows.Add(tr2); tbl.Rows.Add(tr3); tbl.Rows.Add(tr4); this.Controls.Add(tbl); } catch (Exception ex) { HandleException(ex); } } }
  • The above code will create the UI interface as shown and also give an emphasized look on the InputFormTextBox Class instantiation.
  • Find the Click event of the Button "btnSend" that is handled on the "CreateChildControls "event and add the logic for sending the email, which is not the scope of this article.
  • Build the code.
  • Build the WSP and Deploy the WSP to your site
  • Activate the Feature and add the webpart to your page.

After doing these steps you can see a webpart with an input text field enabled for HTML formatting as per the image below.

Next Steps
  • Check out for great information about Microsoft SQL Server.

Last Updated: 2010-07-13

get scripts

next tip button

About the author
MSSQLTips author Abin Jaik Antony Abin Jaik Antony

View all my tips

More SQL Server Solutions

Post a comment or let the author know this tip helped.

All comments are reviewed, so stay on subject or we may delete your comment. Note: your email address is not published. Required fields are marked with an asterisk (*).

Email me updates

Signup for our newsletter

I agree by submitting my data to receive communications, account updates and/or special offers about SQL Server from MSSQLTips and/or its Sponsors. I have read the privacy statement and understand I may unsubscribe at any time.


Recommended Reading

Developer Dashboard in SharePoint 2010

Taking Control of Checked Out Documents in SharePoint

Understanding SharePoint Exports to Excel

Recover a deleted SharePoint site or site collection with the *New* Site Recycle Bin

Learn to Query the SharePoint List Data Service with LinqPad

get free sql tips
agree to terms

Learn more about SQL Server tools