AJAX Control Toolkit | Dev42 - Scottie's Developer Blog

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…

htmleditordefault The 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.

Dev42 – Scottie's Developer Blog

Posts Tagged 'AJAX Control Toolkit'

Working with the HTMLEditor WYSIWYG ASP.net AJAX Control

Scott’s recent tweets…