Working with the HTMLEditor WYSIWYG ASP.net AJAX Control

Original content alert! Most of what I’ve posted so far has been links to blog postings and articles by other authors.  I’ve decided I’d post something cool I just figured out myself.  You could figure this out too but maybe I can save you a few minutes.  Onward and upward…

htmleditordefaultThe latest version of the ASP.net AJAX Control Toolkit (May 2009 as of this writing) added a WYSIWYG HTML editor control (similar to FreeTextBox, or Telerik’s RadEditor, etc).  It’s free, and open source so you can muck with it if you see fit.  However, you don’t necessarily have to alter it at all to customize it somewhat.  By default, it looks a lot like the image shown here. The first time I looked at the control on the HTMLEditor sample page, I thought to myself “cool! but I’d want to hide some of those buttons”.

htmleditorlite Then I noticed they have other examples of the grid on that same page, including a “Lite” version.  It was closer to what I wanted, but still not quite right. I wanted to remove any font/colour/size options, and provide the basics like bold and italics, bullets and numbered lists, and that’s about it.

Here’s what I ended up with:

htmleditormine

It suits my needs perfectly.  So, how do you accomplish this?  The secret lies in the HTMLEditor.Samples.cs file in the App_Code directory of the SampleWebSite project that comes with the AJAX Control Toolkit (hint–don’t download the binary zip file, get the source zip file which contains the excellent samples project).

What you do is create a class that inherits from HTMLEditor, like this:

public class MyCustomHTMLEditor: AjaxControlToolkit.HTMLEditor.Editor
{
    protected override void FillTopToolbar()
    {
        Collection<AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption> options;
        AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption option;

        //bold, italics, etc

        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Underline());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator());

        //button to clear any formatting from the text
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.RemoveStyles());

        //control of formatting of pasted text

        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Cut());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.Copy());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PasteText());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PasteWord());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator());

        //text justification

        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyLeft());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyCenter());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyRight());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.JustifyFull());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.RemoveAlignment());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator());

        //lists

        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.OrderedList());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.BulletedList());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DecreaseIndent());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.IncreaseIndent());
        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator());

        //add a horizontal line to the text

        TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.InsertHR());

        //TODO: add any other controls you want to use!
    }
}

(link to code)

Adding things like a font and font size dropdown require an options list, such as shown here:

AjaxControlToolkit.HTMLEditor.ToolbarButton.FontName fontName = new AjaxControlToolkit.HTMLEditor.ToolbarButton.FontName();
TopToolbar.Buttons.Add(fontName);

options = fontName.Options;
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "";
option.Text = "";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "arial,helvetica,sans-serif";
option.Text = "Arial";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "courier new,courier,monospace";
option.Text = "Courier New";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "georgia,times new roman,times,serif";
option.Text = "Georgia";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "tahoma,arial,helvetica,sans-serif";
option.Text = "Tahoma";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "times new roman,times,serif";
option.Text = "Times New Roman";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "verdana,arial,helvetica,sans-serif";
option.Text = "Verdana";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "impact";
option.Text = "Impact";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "wingdings";
option.Text = "WingDings";
options.Add(option);

TopToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator());
AjaxControlToolkit.HTMLEditor.ToolbarButton.FontSize fontSize = new AjaxControlToolkit.HTMLEditor.ToolbarButton.FontSize();
TopToolbar.Buttons.Add(fontSize);

options = fontSize.Options;
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "";
option.Text = "";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "8pt";
option.Text = "1 ( 8 pt)";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "10pt";
option.Text = "2 (10 pt)";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "12pt";
option.Text = "3 (12 pt)";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "14pt";
option.Text = "4 (14 pt)";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "18pt";
option.Text = "5 (18 pt)";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "24pt";
option.Text = "6 (24 pt)";
options.Add(option);
option = new AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption();
option.Value = "36pt";
option.Text = "7 (36 pt)";
options.Add(option);

(link to code)

Note that you can also override the FillBottomToolBar() method to customize the row of buttons at the bottom of the Editor:

protected override void FillBottomToolbar()
{
    // reverse
    BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode());
    BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.HtmlMode());
    BottomToolbar.Buttons.Add(new AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode());
}

(link to code)

Now naturally your mileage will vary!  The beauty is that you get full IntelliSense on the ToolbarButton namespace so you can see the list of all available buttons from there.

Advertisements

11 Responses to “Working with the HTMLEditor WYSIWYG ASP.net AJAX Control”


  1. 1 Hichem October 19, 2009 at 12:00 pm

    thank you lot but i hope to put the usings

  2. 2 dev42 October 19, 2009 at 12:33 pm

    Good question.

    I believe the only one required for the code shown above is:

    using AjaxControlToolkit.HTMLEditor;

    You will of course need a reference to the May 2009 (or newer, such as the Sept 2009) release of the AjaxControlToolkit.dll. You can download the toolkit installer from http://www.asp.net/ajax/AjaxControlToolkit/Samples/, and you’ll find the DLL in the Sample Website’s bin folder.

    You might be wondering about the “options” object used in the 2nd code snippet above. In fact, I forgot to include the declaration, which looks like this:

    Collection options;

    And to do that, you’ll need an additional couple of using statements:

    using System.Collections;
    using System.Collections.ObjectModel;

    I hope that helps!

  3. 3 dev42 October 19, 2009 at 12:38 pm

    Okay that one line of the declaration of the options collection is wrong above and I can’t get it to accept the way it is. That’s supposed to be a generic collection of type AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption.

  4. 4 Jeff November 9, 2009 at 12:26 pm

    Thanks for this long article on the new control, but all I can say is: Typical Microsoft… to do something as simple as hide a few buttons we have to write 600 lines of code.

  5. 5 Gabriel McAdams February 9, 2010 at 9:34 pm

    I just added a tip to my blog showing how to set the default state of the editor’s toolbar buttons. http://www.thecodepage.com/post/Change-the-default-state-of-an-AJAXControlToolkit-HTMLEditor-Toolbar-Button.aspx

  6. 7 Zia Bashar June 4, 2010 at 7:59 am

    Thanks for the post. It certainly help us to customize HTMLEditor. I would like to have a solution for “InsertLink” popup window. There is a field in this popup as “Target”. Currently the default option for this field is “Current Window”. How can I change this default setting to “New Window”?

  7. 8 Wes July 1, 2010 at 7:29 am

    Great article, thanks. We like Microsoft for making us write code.

  8. 9 Mahendra Bonde July 27, 2011 at 12:15 am

    Please Provide how to apply stylesheet to HtmlEditor ? Also provide one css example.

    • 10 dev42 July 15, 2013 at 10:27 am

      I hope you already found an answer to that somewhere else… sorry I never got back to you but I stopped working with the control a couple of years before your question.

  9. 11 roulette July 13, 2013 at 8:54 pm

    I have been exploring for a little bit for any high-quality articles or weblog posts on this kind of
    space . Exploring in Yahoo I eventually stumbled upon this site.
    Studying this information So i am satisfied to exhibit that I have a very excellent uncanny feeling I discovered just
    what I needed. I so much for sure will make certain to don?
    t fail to remember this site and give it a look
    on a relentless basis.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Scott’s recent tweets…


%d bloggers like this: