ASP.NET HTML Editor - Properties and events

<%@ Register TagPrefix="ed" Namespace="OboutInc.Editor" Assembly="obout_Editor" %>
New: All properties can be used inside template XML files, except Template.

OboutInc.Editor.Editor properties

Name Description
propertyID String. Component Id.
propertyHeight Int. Editor component height in pixels. Default 400. Optional

See also working example.
propertyWidth Int. Editor component width in pixels. Default value is set in style.css file in HC_div class height property (top of the CSS file). Initialy it is set 100%. Optional

See also working example.
propertyMaxSuggestions Int. Maximum of suggestions for each incorrect word in Spell checker popup window. Default 25. Optional
propertySpellCheckAutoComplete Bool. Gets or sets a value indicating whether to close the SpellChecker popup on spell checking complete just after 'alert' window closed.
Default "false". Optional
propertyUpperSuggest Bool. Gets or sets a value indicating that suggestions of the spell checker should start with a letter in upper case.
Default "false". Optional
propertyContent String. Editor's HTML content. Default empty. Optional
Preferably this property should be set and retrieved in Page_Load method of the Page. If content can be changed on some callback events, use Page_PreRender method of the Page.

See also working example.
propertyPlainText String. Plain text of Editor's content. ReadOnly

See also working example.
propertyCallbackContent Bool. Indicates that Editor's HTML content should be replaced with a value passed on callback.
  • true - content is replaced with a value passed on callback
  • false - content callback is suppressed
Default "true". Optional

See also working example.
propertyLanguage String. Language name used in Editor component. Every accessible language name is corresponded with <name>.xml file located in LocalizationFolder directory.
User can take file en.xml as a template and create his own localization XML file for his native language (for example de.xml). Default "en". Optional

See also working example.
propertyLocalizationFolder String. Path to directory with localization XML files. Default "ed_localization". Optional
propertyScriptFolder String. Path to directory with JavaScript files. Default "ed_scripts". Optional
propertyQuickFormatFolder String. Path to directory with Quick Format CSS file. Default "ed_quickformat". Optional
propertyQuickFormatFile String. Name of Quick Format CSS file in QuickFormatFolder directory.
Default "QuickFormat.css". Optional

See also working example .
propertyStyleFolder String. Path to directory with Editor's style file and images. Default "ed_styles". Optional
propertyStyleFile String. Name of the Editor's style file in StyleFolder directory. Default "style.css". Optional
propertyIconFolder String. Path to directory with Editor's icons subdirectories. Every such subdirectory name appears in TABs of Insert Icon popup window. This window is opened on toolbar's Insert Icon button click. Icon images are contained in these subdirectories. Default "ed_icons". Optional
propertyDictionariesFolder String. Path to directory with Editor's spell checker dictionaries.
Default "ed_dictionaries". Optional
propertyCustomDictionaryOnServer Bool. This property specifies the place where custom dictionary will be stored for the spell checker.
  • true - the dictionary will be stored in the server's directory specified with the DictionariesFolder property. The name of the dictionary file is "user.dic", it will be common for all users.
  • false - the dictionary will be stored in client's cookie, so it will be available for this user only.
Default "false". Optional
propertyTemplateFolder String. Path to directory with Editor's templates XML files. Default "ed_templates". Optional
propertyPathPrefix String. Path prefix for QuickFormatFolder, StyleFolder, DictionariesFolder, IconFolder and ScriptFolder directories. Default empty. Optional

editor.PathPrefix = "../"

See also How to set PathPrefix correctly?
propertyTemplate String. Name (without extension) of Editor's template XML file in TemplateFolder directory.
If you set this property, it should be set after PathPrefix and TemplateFolder properties.

Note: This property is ignored if used inside template XML file.
By default no template is used. Optional

See also working example.
propertyModeSwitch Bool. Indicates that user can switch the editing mode.
  • true - user can use both Design and HTML text editing modes.
  • false - user can use Design editing mode only
Depending on this value the corresponding mode switch buttons will be shown or not in the editor's bottom bar. Default "true". Optional

See also working example.
propertySubmit Bool. Indicates that Submit button will be shown or not in the editor's bottom bar.
  • true - show the Submit button
  • false - don't show the Submit button
Default "true". Optional

See also working example.
propertyCancel Bool. Indicates that Cancel button will be shown or not in the editor's bottom bar.
  • true - show the Cancel button
  • false - don't show the Cancel button
Default "false". Optional

See also working example.
propertyClientCancel String. Name of client-side function that will be executed on Cancel button click.
This function has one parameter - client-side Editor object.
This function should return true if you want to continue Cancel operation (ClickCancel server-side event is set). If this function returns false the Cancel operation will be terminated.

See also working example.
propertyPreviewMode Bool. Indicates that Preview button will be shown or not in the editor's bottom bar.
  • true - show the Preview button
  • false - don't show the Preview button
Default "false". Optional

See also working example.
propertyShow Bool. Indicates that Editor component will be initially shown on client side.
  • true - component is shown initialy
  • false - component isn't shown initialy
Default "true". Optional

See also working example.
On client side the visibility of Editor's component can be changed by setVisibility method.
See For JavaScript Developers.
propertyShowQuickFormat Bool. Indicates that Quick Formatting panel will be shown in Editor.
  • true - is shown
  • false - isn't shown
Default "true". Optional

See also working example.
propertyShowAnchors Bool. Indicates that initialy special image will be shown in place of each Anchor in Editor's panel.
  • true - is shown
  • false - isn't shown
Default "true". Optional
propertyShowPlaceHolders Bool. Indicates that initialy special image will be shown in place of each PlaceHolder in Editor's panel.
  • true - is shown
  • false - isn't shown
Default "true". Optional
propertyAutoFocus Bool. Indicates initial Editor focusing.
  • true - get focus
  • false - get no focus
Default "true". Optional

See also working example.
propertyAjaxWait Bool. Indicates that "wait" image will appear in the middle of Editor on MS ASP.NET AJAX post back till the final rerendering.
  • true - "wait" image appears
  • false - "wait" image doesn't appear
Default "true". Optional
propertyAjaxCurrentContent Bool. Indicates that Server-Side will get the current Editor's content on MS ASP.NET AJAX post back when Editor component is outside any UpdatePanel.
  • true - current Editor's content will be sent to Server-Side.
              Some time will be spent for this operation on Client-Side.
              "Please wait..." message can appear in Editor
  • false - Server-Side will not get the current Editor's content
Default "true". Optional
propertyNoScript Bool. Indicates that any Java Script code will be suppressed in Editor's content.
  • true - Java Script code is suppressed
  • false - Java Script code is not suppressed
Default "false". Optional
propertyNoUnicode Bool. Indicates that Editor's content will contain Unicode characters.
  • false - Editor's content will contain Unicode characters
  • true - Editor's content will contain &#code; instead of Unicode characters
Default "false". Optional
propertySuppressTab Bool. Indicates that Editor will ignore Tab key in Design mode.
  • true - ignores Tab key
  • false - processes Tab key as a set of spaces
Default "false". Optional
propertyIgnoreTab Bool. Suppress Tab key navigation inside Editor control.
  • true - Tab key doesn't navigate inside Editor
  • false - navigation as usual
Default "false". Optional
propertyTabIndex Int. Value of 'tabindex' attribute to be used for editable panels ('Design', 'HTML text') of Editor control.

By default is not set. Optional
propertyFullHTML Bool. Indicates that Editor will generate its content as entire page HTML code with <HTML>, <HEAD> and <BODY> tags.
  • true - generates entire page HTML code
  • false - generates <BODY>'s content only
Default "false". Optional

See also working example.
propertyDefaultStylesInHtml New Bool. Indicates whether to add default styles into content when FullHtml is on.
Default "true". Optional
propertyRemainLfOnSubmit Bool. Indicates whether Editor remain Line feed characters in submitted content.
  • true - Line feed characters will be remained in content
  • false - Line feed characters will be removed
Default "false". Optional
propertyRtl Bool. Indicates that right to left direction of content is set initially.
  • true - right to left
  • false - left to right
Default "false". Optional

See also working example.
propertyScrollIntoView Bool. Indicates that the top of Editor component will be visible on Page load. It is usefull in large pages when Editor is far from page top.
  • true - page scrolls to Editor if it is invisible
  • false - page doesn't scroll to Editor if it is invisible
Default "false". Optional
propertyRelImgUrls Bool. Indicates manner of Images's src property representation when relative URL was setted in Image properties popup window.
  • true - relative URL
  • false - absolute URL
Default "false". Optional
propertyCaretPosition Bool. Indicates caret position in content on Editor loaded.
  • true - beginning of content
  • false - end of content
Default "false". Optional

See also working example.
propertyNoDrop Bool. Prohibits any dropping to Editor's panel.
  • true - dropping is prohibited
  • false - dropping is not prohibited
Default "false". Optional
propertyNoPaste Bool. Prohibits any pasting (except Plain Text) to Editor's panel in Design mode.
  • true - pasting is prohibited
  • false - pasting is not prohibited
Default "false". Optional
propertyKeyboardEnabled Bool. Enables/disables using of keyboard keys (and text typing too) for Editor's panel in Design mode.
  • true - enabled
  • false - disabled
Default "true". Optional
propertyClientValidation Bool. By default the RequiredFieldValidator validation control is supported with EnableClientScript="True" only.
  • true - enables supporting of all validation controls with EnableClientScript="True"
  • false - enables supporting of the RequiredFieldValidator validation control with EnableClientScript="True" only
Default "false". Optional
propertyModeHTML Bool. Sets initial editing mode on Editor loaded.
  • true - HTML text mode
  • false - Design mode
Default "false". Optional

See also working example.
propertyPreviewOnInit Bool. Sets Preview mode on Editor loaded. Default "false". Optional

See also working example.
propertyFixedToolBar Bool. Indicates Editor's Tool bar behavior on case, when buttons set can not be placed into the Tool bar in corpore. It may be happened when width of Editor component is too small.
  • true - area with extra buttons is hidden
  • false - Tool bar is stretching and all vertical separators are ignored
Default "true". Optional

See also working example.
propertyImageBrowse String. Specifies the name of page using for predefined images browsing. See myImageBrowse.aspx in downloaded zip file. Optional

See also working example.
propertyUrlBrowse String. Specifies the name of page using for predefined URL Links browsing. See myUrlBrowse.aspx in downloaded zip file. Optional

See also working example.
propertyButtons Collection of objects inherited from abstract OboutInc.Editor.Button.

See Custom toolbar.
propertyDictionaries Collection of OboutInc.Editor.Dictionary objects.

See Dictionaries for Spell checker.
propertyHotKeys Collection of OboutInc.Editor.HotKey objects.

See Hot Keys definition.
propertyFontNames Collection of OboutInc.Editor.FontNamesItem objects.

See Custom fonts.
propertyAddFontNames Collection of OboutInc.Editor.FontNamesItem objects.
This collection of custom font names will be added to default Fonts set.
propertyFontSizes Collection of OboutInc.Editor.FontSizesItem objects.

See Custom font sizes.
propertyAddFontSizes Collection of OboutInc.Editor.FontSizesItem objects.
This collection of custom font sizes will be added to default Font sizes set.
propertyOnClientContentChanged String. Name of client-side function called on each content change.
This function has one parameter, its members you can see in the following sample:

<ed:Editor id="editor" OnClientContentChanged="myFunc" runat="server" />
...

// Set values of some textboxes on each client-side Editor's content change
//

function myFunc(s)
{
  // total length of HTML before content changed
  document.getElementById("previousTotalHtml").value= s.previous.htmlTextLength;

  // total length of plain text before content changed
  document.getElementById("previousTotalPlain").value= s.previous.plainTextLength;

  // total length of HTML after content changed
  document.getElementById("currentTotalHtml")  .value= s.current.htmlTextLength;

  // total length of plain text after content changed
  document.getElementById("currentTotalPlain")  .value= s.current.plainTextLength;
}

Note: Use of this property makes Editor work a little slower for large content, especially in FireFox.

By default no client-side function is called. Optional

See also working example.
propertyContextMenu Collection of OboutInc.Editor.ContextMenuItem objects.

See Custom Context Menu.
propertyDefaultContextMenu Bool. Enables/disables using of default Editor's context menu.
  • true - enabled
  • false - disabled
Default "true".Optional
When disabled Custom Context Menu will be used only.
propertySuppressContextMenu Collection of OboutInc.Editor.SuppressContextMenuItem objects.

See Context Menu items disabling.
propertyInitialCleanUp Bool. Enables/disables inital(on load) cleanup of Editor's content like button do.
It is actual for client-side setContent() function too.
  • true - enabled
  • false - disabled
Default "false". Optional
propertyDefaultFontFamily String. Specifies the default font family used in editing panel of Editor.

By default for this purpose is used Editor_data/ed_styles/special/editor.css styles file.
Optional
See also working example.
propertyDefaultFontSize String. Specifies the default font size used in editing panel of Editor.

By default for this purpose is used Editor_data/ed_styles/special/editor.css styles file.
Optional
See also working example.
propertyInsideOboutWindow Bool. This property should be set to "true" when Editor is used inside obout Window.

Default "false". Optional
See also working example.
propertyFontNotSet Bool. If this property is set to "true", "Not set" will be shown in font dropdowns if font is not set manifestly.

Default "false". Optional
propertyShowWaitMessage Bool. To show or not "Wait" message in Editor while content is loading or edit mode switching.

Default "true". Optional
See also working example.
propertyCausesValidation Bool. Indicates whether the control's submit causes page validation to occur.

Default "true". Optional
propertyValidationGroup String. Name for the group of validation controls for which the control's submit causes validation when it posts back to the server.
This property has an effect only when the value of the CausesValidation property is set to true.

Default empty string (""). Optional
propertyAddCssFiles Collection of OboutInc.Editor.CssFile objects.

See Additional CSS files.
propertyAppearance OboutInc.Editor.Editor.AppearanceType enumeration. The Editor's appearance type. All possible values of the property:
  • full - Full buttons set
  • lite - Lite buttons set
  • custom - Custom buttons set
Default "full". Optional

See also working examples: full, lite, custom.

OboutInc.Editor.Editor events

Name Description
propertyClickSubmit OboutInc.Editor.ClickSubmitEventHandler event.
This event is raised when Editor's SUBMIT button is clicked (not any other submit button of the ASPX form).

C# code sample.

using OboutInc.Editor;
...
editor.ClickSubmit +=new ClickSubmitEventHandler(Editor_OnClickSubmit);
...
private void Editor_OnClickSubmit(object sender, EventArgs e)
{
   ...
}

See also working example.
propertyClickCancel OboutInc.Editor.ClickCancelEventHandler event.
This event is raised when Editor's Cancel button is clicked.

C# code sample.

using OboutInc.Editor;
...
editor.ClickCancel +=new ClickCancelEventHandler(Editor_OnClickCancel);
...
private void Editor_OnClickCancel(object sender, EventArgs e)
{
   ...
}

See also working example.
propertyContentChanged OboutInc.Editor.ContentChangedEventHandler event.
This event is raised when Editor's content is changed on Client side.

C# code sample.

using OboutInc.Editor;
...
editor.ContentChanged +=new ContentChangedEventHandler(Editor_OnContentChanged);
...
private void Editor_OnContentChanged(object sender, EventArgs e)
{
   ...
}

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