OBOUT - ASP.NET HTML Editor - Server side

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

OboutInc.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

OboutInc.Editor.Toggle

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

OboutInc.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

OboutInc.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

OboutInc.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

OboutInc.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

OboutInc.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.

OboutInc.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" >

<ed:Method Name="Undo" />

<ed:Method Name="Redo" />

<ed:HorizontalSeparator />

<ed:Method Name="ClearStyles" />

</Buttons>

</ed:Editor>

See also working example.

"Your help has been amazing, and I really appreciate your quick help in fielding all my questions. My end product will be better because of it! Thank you!"

Drew Forward | Business Process Architect

HeadCount Corporation

Random testimonial All testimonials