HTML Editor for ASP.NET AJAX

Professional Edition
Frequently Asked Questions


  1. 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:

    Standard Buttons Save, New, Print, 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
    Optional Buttons Design, Html, View
    Select Lists 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

  2. 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:

    • The EmotionsFolder property should be set to the folder location where the files were copied (e.g. "~/Images/Emotions").
    • The 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.


  3. How do I get a reference to the editor in my client-side JavaScript?

    In your client-side code use the Microsoft AJAX "$find" syntax to get a reference to the editor's client-side object.
    function GetHtmlEditor()
    {
        return $find('<%= Editor.ClientID %>');
    }
    
  4. How should I handle a user click on the toolbar Save button?

    To handle the click, attach to the Event property OnSave:

    • 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, 
                               HtmlEditor.SaveEventArgs e)
    {
        DataStore.StoreHtml(e.Text);
    }
    
    OnSave="Editor_Save"
  5. Why do some tags and attributes not "stick"?

    The editor constrains tags and attributes to those explicitly "allowed":

    • If OutputXHTML is set to true (the default) the editor ignores all tags and attributes that are not on the allowed lists
    • Two properties, AllowedTags and 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

  6. Why are my changes to the text not saved?

    The 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:

    • The ID of the button control(s) that should trigger the Save should be listed in the SaveButtons property. The editor finds the controls with the ID's listed and automatically modifies their OnClientClick property.
    • The appropriate client-side script can be manually added. In general, the OnClientClick property of the button control(s) should be modified to $find the client-side editor object and call Save.
      OnClientClick="GetHtmlEditor().Save()"