HTML Editor for ASP.NET AJAX
Frequently Asked Questions
How do I modify the toolbars?
The editor property
Toolbars is a string that defines the elements displayed in each toolbar, in which toolstrip, in what order, etc.
- Each toolbar element has a type and name
- Buttons are the default type, so only their name is required
- Multiple toolbars can be defined
- Related toolbar elements may be grouped into toolstrips
- Separator bars can be added to group related elements within a toolstrip
- To have no toolbars, set the property to an empty string
The internally supported element names are:
||Save, New, Print, Cut, Copy, Paste, Bold, Italic, Underline, Left, Center, Right, Justify, OrderedList, BulletedList, Rule, Indent, Outdent, Subscript, Superscript, StrikeThrough, Emotions, Link, Unlink, Image, Symbol, ForeColor, BackColor, Table, RemoveFormat, Undo, Redo
||Design, Html, View
||Format, Font, Size
The following delimiters are used in the definition:
||Semi-colon ends a toolbar (not required for last toolbar)
||Colon ends a toolstrip (not required for last toolstrip in a toolbar)
||Comma separates toolbar elements
||Vertical bar defines a separator
||Pound sign separates an element type from its name
In your client-side code use the Microsoft AJAX "$find" syntax to get a reference to the editor's client-side object.
return $find('<%= Editor.ClientID %>');
Why do some tags and attributes not "stick"?
The editor constrains tags and attributes to those explicitly "allowed":
OutputXHTML is set to true (the default) the editor ignores all tags and attributes that are not on the allowed lists
- Two properties,
AllowedAttributes, define what is allowed
- The default allowed tags and attributes include only those required to support the normal expected usage of the editor
- To add or remove allowed tags and attributes modify the properties in the Properties View in Visual Studio
Why are my changes to the text not saved?
AutoSave functionality works automatically as part of the client-side ASP.NET validation process when the page is submitted. All controls with their
CausesValidation property set to true (the default) trigger this behavior. If the standard client-side validation process does not take place on postback the editor's client-side
Save method should be triggered through one of two methods:
How do I change the default font in Design mode?
To apply developer-specified style rules during Design mode editing set the
DesignModeCss property to the path of the appropriate css file.
Set the property declaratively in the HtmlEditor tag:
DesignModeCss = "~/Styles/HtmlEditor.css"
Example css file:
How should I handle a user click on the toolbar Save button?
To handle the click, attach to the Event property
- Switch to Design mode in Visual Studio
- Examine the Event properties in the Properties View
- Double-click on the
Save property shown there
- Visual Studio will automatically create the skeleton for the appropriate handler in your code-behind file and will connect it to the editor by adding an
OnSave attribute in the tag
- Save the
Text property of the event arguments object to a database or other form of persistence
protected void Editor_Save(object sender,
Why does nothing happen when a user clicks on the toolbar Emotions button?
A default set of emotion image files is included in the Images/Emotions folder of the sample site.
The emotion image files must be copied to a folder on your site and two editor properties must then be set or modified:
EmotionsFolder property should be set to the folder location where the files were copied (e.g. "~/Images/Emotions").
Emotions property should be modified if the image files copied are not the default set. The
Emotions property defines the filenames and descriptions of the image files.