ASP.NET HTML Editor - Custom toolbar

<%@ Register TagPrefix="ed" Namespace="OboutInc.Editor" Assembly="obout_Editor" %>

Inside the HTML Editor component you can define the HTML Editor's top toolbar schema using inner Buttons collection. In this collection you can list the buttons, separators and so on, that will fill the HTML Editor's top toolbar. If HTML Editor's Appearance property is full or lite, this collection will be added to the default collection. If HTML Editor's Appearance property is custom and the Buttons collection is not defined, the top toolbar will be empty.

The Buttons collection may contain the following HTML Editor's objects (inherited from abstract OboutInc.Editor.Button).

HTML Editor's objects for Buttons collection

Name Description
propertyOboutInc.Editor.Method This object has a single public property Name. The property defines what a button you want to insert into the toolbar. All possible values of the property are defined in OboutInc.Editor.Method.Names enumeration:

ForeColor  Sets foreground color
ForeColorClear  Clears foreground color
BackColor  Sets background color
BackColorClear  Clears background color
ClearStyles  Clears all styles in selected area
Undo  Undoes last document changing
Redo  Redoes last changing
CreateLink  Creates link instead selected text area
InsertTable  Inserts a table in current cursor position
InsertHR  Inserts horizontal rule
InsertIMG  Inserts Image
 InsertIcon  Inserts Icon
 InsertSpec  Inserts special character
Cut  Cuts selected area
Copy  Copies selected area
Paste  Pastes as HTML text
PasteText  Pastes as Plain text
PasteWord  Pastes from MS Word (with cleanup)
JustifyLeft  Align left
JustifyCenter  Align center
JustifyRight  Align right
JustifyFull  Justify
 RemoveAlignment  Remove alignment and paragraphs
OrderedList  Creates an ordered list on selected text
BulletedList  Creates a bulleted list on selected text
DecreaseIndent  Decreases indent
IncreaseIndent  Increases indent
GetFormat  Copies the format in caret positon
 ApplyFormat  Applies earlier copied format
 InsertAnchor  Inserts Anchor
 InsertPlaceHolder  Inserts PlaceHolder
 SelectAll
 Selects All
 SelectNone
 Selects None
 Print
 Prints Editor's content
 SpellCheck
 Run Spell checker
 IncreaseHeight
 Increase the editing panel
 DecreaseHeight
 Decrease the editing panel
 Preview
 Preview document appearance
 InsertForm
 Insert Form
 InsertCheckBox
 Insert/edit CheckBox
 InsertRadio
 Insert/edit Radio button
 InsertTextBox
 Insert/edit TextBox
 InsertPassword
 Insert/edit Password field
 InsertHidden
 Insert/edit Hidden field
 InsertButton
 Insert/edit Button
 InsertSubmit
 Insert/edit Submit button
 InsertReset
 Insert/edit Reset button
 InsertDiv
 Insert DIV
 ContextMenu  Get context menu for current position
 InsertFlash  Insert Flash
 InsertMedia  Insert Media
 ToUpperCase  Convert selected text to upper case
 ToLowerCase  Convert selected text to lower case
 MakeNotEditable  Mark selection as not editable
 Paragraph  Make paragraph

C# code sample.

OboutInc.Editor.Method but;

but = new OboutInc.Editor.Method();
but.Name = OboutInc.Editor.Method.Names.InsertIcon;
editor.Buttons.Add(but);  // add a new button
propertyOboutInc.Editor.Toggle This object has a single public property Name. The property defines what a button you want to insert into the toolbar. All possible values of the property are defined in OboutInc.Editor.Toggle.Names enumeration:

Bold  Toggles bold style
Italic  Toggles italic style
Underline  Toggles underline style
StrikeThrough  Toggles strikeThrough style
SubScript  Toggles subScript style
SuperScript  Toggles subScript style
 Ltr
 Sets/Toggles direction left to right
 Rtl
 Sets/Toggles direction right to left
 AnchorsOn
 Toggles Anchors indication
 PlaceHoldersOn  Toggles PlaceHolders indication

C# code sample.

OboutInc.Editor.Toggle but;

but = new OboutInc.Editor.Toggle();
but.Name = OboutInc.Editor.Toggle.Names.Bold;
editor.Buttons.Add(but);  // add a new button
propertyOboutInc.Editor.Select This object has a single public property Name. The property defines what a select you want to insert into the toolbar. All possible values of the property are defined in OboutInc.Editor.Select.Names enumeration:

 FontName  Selects(indicates) font name 
 FontSize  Selects(indicates) font size

C# code sample.

OboutInc.Editor.Select select;

select = new OboutInc.Editor.Select();
select.Name = OboutInc.Editor.Select.Names.FontName;
editor.Buttons.Add(select);  // add a new button
propertyOboutInc.Editor.HorizontalSeparator This object has no available public properties. It is used for horizontal separator inserting into the toolbar.

C# code sample.

OboutInc.Editor.HorizontalSeparator spec;

spec = new OboutInc.Editor.HorizontalSeparator();
editor.Buttons.Add(spec);  // horiz. separator inserted
propertyOboutInc.Editor.VerticalSeparator This object has no available public properties. It is used for vertical separator inserting into the toolbar.

C# code sample.

OboutInc.Editor.VerticalSeparator spec;

spec = new OboutInc.Editor.VerticalSeparator();
editor.Buttons.Add(spec);  // vert. separator inserted
propertyOboutInc.Editor.TextIndicator This object has no available public properties. It is used for "Current position indicator" inserting into the toolbar. Indeed, it is a small box containing text "Aa" represented in text style of the current cursor position.

C# code sample.

OboutInc.Editor.TextIndicator spec;

spec = new OboutInc.Editor.TextIndicator();
editor.Buttons.Add(spec);  // text indicator inserted
propertyOboutInc.Editor.Custom This object has the following public properties.
  • OnClientClick - String. Name of JavaScript function called on the button pressed
  • ImageName - String. Name of main image of the button
  • ToolTip - String. Tooltip of the button
C# code sample.

OboutInc.Editor.Custom button;

button = new OboutInc.Editor.Custom();
button.OnClientClick = "insertDate";
button.ImageName = "ed_date_n.gif";
button.ToolTip = "Insert current date";
editor.Buttons.Add(button);  // button inserted

See also Custom Buttons.
propertyOboutInc.Editor.CustomSelect New This object has the following public properties.
  • Handler - String. Name of JavaScript function called on select value changed and toolbar updating
  • Title - String. Title before select field
  • SelectStyle - String. CSS for select field
  • TitleStyle - String. CSS for title
  • Options - OboutInc.Editor.Option collection. Options for select field
OboutInc.Editor.Option class has the foolowing properties:
  • Value - String. Value of select option
  • Text - String. Text of select option
JavaScript function that is set in Handler property should have the following prototype:

function myHandler(editor, command, selectObject){...}

Where:
editor - client-side Editor's object
command - "change" when called on select value changed, "state" when called on toolbar updating
selectObject - HTMLSelect object

C# code sample.

OboutInc.Editor.CustomSelect button = new OboutInc.Editor.CustomSelect();
button.Handler = "myHandler";
button.Title = "My Select";
button.TitleStyle = "color:#0033CC;";
button.Options.Add(new OboutInc.Editor.Option("0","action 1"));
button.Options.Add(new OboutInc.Editor.Option("1","action 2"));
editor.Buttons.Add(button);  // button inserted

See Custom select button.
See also cs_custom_select_button.aspx and vb_custom_select_button.aspx files in downloaded Suite.
Sample ASP.NET

    <ed:Editor id="editor" runat="server" Appearance="custom" >
    <Buttons>
      <ed:Method Name="Undo" />
      <ed:Method Name="Redo" />
      <ed:HorizontalSeparator />
      <ed:Method Name="ClearStyles" /> 
    </Buttons> 
    </ed:Editor>

See also working example.


obout.com
obout.com Home
News
HTML Editor Home
HTML Editor Home
Why the best?
Download
Site Map
Examples - 80
Appearance - 10
Full button set
Lite button set
Custom button set
Design-mode textbox
How to fit into small space
Page maker
Default font
Initially without toolbar
Preview mode
"Read only" mode New
Content - 16
Read-only and custom tags
Shadow for Image
External image gallery
Upload images
Copy/paste formatting
Preview Document appearance
Keys used for editing
.NET validation
Documents Generator
Upload documents
Convert to PDF
FullHTML
Editor and database
Spell Checker - 3
Spell checking
Spell Checker dictionaries
Several dictionaries
Localization - 2
Localization
RTL support
Integration - 9
Inside Flyout
Inside Grid
Inside Window
With Color PickerNew
Google AJAX Language API New
Inside AJAX Page
Inside CallbackPanel
MultiView
Wizard
ASP.NET AJAX ControlToolkit - 5
Collapsible panel
Tabs
Editor in each TabPanel New
Timer
Modal popup
Server-Side API - 13
Content counters
Plain text length control
Show plain text
Enable editor on focus
Set caret position on load
Add CSS files New
Hide HTML Editor until needed
FixedToolBar
CSS file for quick format
Set HTML view on load
Enable browse button for images
Enable browse button for URLs
Disable Wait message New
Server-Side Events - 5
ClickSubmit event
ClickCancel event
ContentChanged event
CallbackContent
ClientCancel
Client-Side API - 10
Working with selected text
Set design/HTML view on load
Show/hide HTML Editor
Get/set content
Surround HTML
Insert HTML
Style selected content
Exec command
Query command
'Not Set' in dropdowns New
Customize - 17
Custom editor toolbar in VS
Custom fonts
Custom font sizes
How to add icons
Custom Popup Windows
Custom Buttons
Custom Context Menu
Popup Properties Disabling
Default Table Properties
Custom toggle button
Custom select button
Textarea popup
Custom 'Quote' button New
Show/hide submit button
Show/hide Design/HTML view
Show/hide quick format panel
Width & Height
Knowledge Base - 1
Knowledge Base
Documentation - 23
Server side
HTML Editor properties & events
HTML Editor inner properties
Custom toolbar
Custom fonts
Custom font sizes
Custom Context Menu
Dictionaries for spell checker
Hot keys definition
Disabling Context Menu items
Additional CSS files New
Client side
Main functions and interfaces
Custom Context Menu support
Custom Popup Window support
Top toolbar buttons' methods
State functions
Suppress Context Menu
Spelling dictionary
Dictionary structure
Affix rules
Phonetic rules
Generate phonetic code
How to add new word
Supported browsers
ChangeLog
Tutorials - 6
Using the correct path
Autosave implementation
Full custom buttons set
Editor_data for several sites
Use with database
Template XML file use New