Customizing the AJAX HTML Editor Toolbar

Question

User865450124 posted

The code below is a demonstration on how to customize the editor. There's documentation and examples out there that show how to add/remove buttons, however it took a bit of digging to figure out how to add font names and sizes. Hopefully the next person won't have as big of a problem as I did figuring this out. Some of the examples that I was provided weren't as clear cut as they could have been.

This link will show you the conversions from point size (pt) to pixels (px). This'll come in most handy if you need to print the content and helps to give you an idea of the general sizes.

Convert Font Sizes

 This forum is not the appropriate forum to post problems/questions with programming. It is strickly for How To's. If you are having any issues, please post your response in the forum at this link.

http://forums.asp.net/1022.aspx/1?ASP+NET+AJAX+Ajax+Control+Toolkit

 

Imports AjaxControlToolkit.HTMLEditor

Namespace MercuryHTMLEditor

    Public Class MercuryHTMLEditor
        Inherits Editor
        Protected Overrides Sub FillTopToolbar()

            Dim MyFontName As New AjaxControlToolkit.HTMLEditor.ToolbarButton.FontName()
            Dim fontnameOptions As New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()

            fontnameOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontnameOptions.Value = "Tahoma"
            fontnameOptions.Text = "Tahoma"
            MyFontName.Options.Add(fontnameOptions)

            fontnameOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontnameOptions.Value = "Helvetica"
            fontnameOptions.Text = "Helvetica"
            MyFontName.Options.Add(fontnameOptions)

            fontnameOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontnameOptions.Value = "Arial"
            fontnameOptions.Text = "Arial"
            MyFontName.Options.Add(fontnameOptions)

            TopToolbar.Buttons.Add(MyFontName)

            Dim MyFontSize As New AjaxControlToolkit.HTMLEditor.ToolbarButton.FontSize()
            Dim fontsizeOptions As New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()

            '10pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "1"
            fontsizeOptions.Value = "13px"
            MyFontSize.Options.Add(fontsizeOptions)

            '12pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "2"
            fontsizeOptions.Value = "16px"
            MyFontSize.Options.Add(fontsizeOptions)

            '14pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "3"
            fontsizeOptions.Value = "19px"
            MyFontSize.Options.Add(fontsizeOptions)

            '16pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "4"
            fontsizeOptions.Value = "22px"
            MyFontSize.Options.Add(fontsizeOptions)

            '18pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "5"
            fontsizeOptions.Value = "24px"
            MyFontSize.Options.Add(fontsizeOptions)

            '20pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "6"
            fontsizeOptions.Value = "26px"
            MyFontSize.Options.Add(fontsizeOptions)
            TopToolbar.Buttons.Add(MyFontSize)

            '22pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "7"
            fontsizeOptions.Value = "29px"
            MyFontSize.Options.Add(fontsizeOptions)
            TopToolbar.Buttons.Add(MyFontSize)

            '24pt
            fontsizeOptions = New AjaxControlToolkit.HTMLEditor.ToolbarButton.SelectOption()
            fontsizeOptions.Text = "8"
            fontsizeOptions.Value = "32px"
            MyFontSize.Options.Add(fontsizeOptions)
            TopToolbar.Buttons.Add(MyFontSize)

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator())

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Undo())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Redo())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Cut())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.PasteText())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.PasteWord())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator())

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Bold())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.Italic())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.ForeColor())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.ForeColorClear())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator())

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.InsertHR())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.IncreaseIndent())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.DecreaseIndent())

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator())

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.OrderedList())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.BulletedList())

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HorizontalSeparator())

            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.InsertLink())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.RemoveLink())

        End Sub

        Protected Overrides Sub FillBottomToolbar()

            BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.DesignMode())
            BottomToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.PreviewMode())
            TopToolbar.Buttons.Add(New AjaxControlToolkit.HTMLEditor.ToolbarButton.HtmlMode())

        End Sub

    End Class

End Namespace

 

 

 

Answer 1

User-1760307156 posted

how do i use this......