Customizing the AJAX HTML Editor Toolbar RSS

• • Reply
  

  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 Namespace

   

   

   

  htmleditor

  • Edited by dch3 on Mar 29, 2011 12:03 AM
  • Edited by dch3 on Mar 29, 2011 12:04 AM
  • Edited by dch3 on Mar 29, 2011 12:05 AM
  • Edited by dch3 on Aug 12, 2011 12:14 PM
• • Reply
  

  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