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.
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.
dch3
Member
447 Points
638 Posts
Customizing the AJAX HTML Editor Toolbar
Mar 28, 2011 05:18 PM|LINK
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 Namespacehtmleditor
AXEL BLAZE
Member
65 Points
110 Posts
Re: Customizing the AJAX HTML Editor Toolbar
Jul 20, 2012 02:56 AM|LINK
how do i use this......
htmleditor