ASP.NET HTML Editor - Main functions and interfaces

When a page with obout HTML Editor component is loaded, client-side HTML Editor object is available. You can get it:

      var editorObject = oboutGetEditor("editor");

      "editor" here is the obout HTML Editor component Id you used in your ASPX page.

Also you can get it using Client ID:

      var editorObject = oboutGetEditorByClientId("ctl0_splitter1_ctl0_editor");

      "ctl0_splitter1_ctl0_editor" here is the obout HTML Editor component's client ID.

User can define a function that will be executed on HTML Editor load. This function should have name EditorOnLoad.

  function EditorOnLoad(editor)
   {
     editor.chMode("text");  // set initial HTML text mode
   }

User can define a function that will be executed before HTML Editor activation. This function should have name EditorBeforeActivate.

  function EditorBeforeActivate(editor)
   {
     editor.defaultStyles += " body { color: blue;}";  // change default color for content
   }

User can also define a function for Submit validation. This function should have name EditorOnSubmit and return true on success or false on fail. HTML Editor's content will not be submited if this function returns false.

  function EditorOnSubmit(editor)
   {
     if(editor.getContent().length > 1000)
     {
       setTimeout(function(){alert("Content's length is more than 1000 characters!");},0);
       return false;
     }
     return true;
   }

Another example of EditorOnSubmit function use. It calls Spell Checker, and submits if OK was clicked.

   function EditorOnSubmit(editor)
   {
     function checkResult(ok)
     {
       if(ok) editor.submit(); 
     }
     editor.spellCheck(checkResult);
     return false;
   }



Methods of client-side HTML Editor object
Name Description
methodgetHeight() Get current Editor component's height.

var height = oboutGetEditor("editor").getHeight();
methodsetHeight(height) Set Editor component height to height px.

oboutGetEditor("editor").setHeight(700);
methodContentChanged() Returns true if Editor's content was modified, overwise - false.

var changed = oboutGetEditor("editor").ContentChanged();
methodgetWindow() Get Editor's inner iframe content window as a Window object.

var win = oboutGetEditor("editor").getWindow();
win.print();
methodgetDocument() Get inner Editor's document as a HTMLDocument object.

var doc = oboutGetEditor("editor").getDocument();
methodTextSelected() Returnstrueif some text is selected (highlighted) in Editing panel, otherwisefalse.

if(!oboutGetEditor("editor").TextSelected()) alert("Select some text");

See also working example.
methodSelectedTextNodes() Returns array of selected (highlighted)TextNodesin Editing panel.

var nodes = oboutGetEditor("editor").SelectedTextNodes();
var output= "Selected Text Nodes content:\n\n";

for(var i=0; i<nodes.length; i++) output +="["+nodes[i].data+"]\n";
alert(output);

See also working example.
methodgetContent([pr]) Get current Editor's HTML content as a string.
Ifprparameter is set and istruethen result string will be formatted (containing"\n"characters).

var oldContent = oboutGetEditor("editor").getContent();

See also working example.
methodgetContentWait(fn[,pr]) The function get current Editor's HTML content as a string and passes it to postback function fn as argument. This function uses "EasyBox" while executing.
Parameterpr has the same meaning as in getContent() function.

function EditorOnSubmit(editor)
{
  function check(str)
  {
    if(str.length > 1000)
    {
      setTimeout(function(){alert("Content is too large!");},0);
    }
    else
      editor.submit();
  }

  editor.getContentWait(check);
  return false;
}
methodsetContent(HTML[,org]) Set new Editor's HTML content. If org parameter is defined and is true, this new content will be considered as original and ContentChanged() function call will return false after new Editor's HTML content set. Otherwise ContentChanged() returns true.
If HTML parameter is not a string parameter, Editor's content will not be updated. In this case, if org parameter is defined and is true, current Editor's content will be considered as original.

oboutGetEditor("editor").setContent("<span style='color:blue'>Hello</span>");

See also working example.
methodfocusEditor() Set focus to editing panel.

oboutGetEditor("editor").focusEditor();
methodInsertHTML(HTML) Inserts HTML at the current selection/caret position.
Returns true on success and false otherwise.

var retVal = oboutGetEditor("editor").InsertHTML("<span style='color:blue'>Hello</span>");

See also working example.
methodSurroundHTML(S1,S2) Surrounds the currently selected text with the given strings.
Returns true on success and false otherwise.

var retVal = oboutGetEditor("editor").SurroundHTML("<i>","</i>");

See also working example.
methodAssignClassName(CN) Assigns the class name to the currently selected text or element.
Returns true on success and false otherwise.

var retVal = oboutGetEditor("editor").AssignClassName("alert");

See also working example.
methodExecCommand(cmd,val) Executes specified command at the current selection/caret position.

Available commands are:
 forecolor   set foreground color to val
 backcolor   set backgound color to val
 fontname   set font family to val
 fontsize   set font size to val (1,2,3,...)
 bold   toggle bold style
 italic   toggle italic style 
 underline   toggle underline style
 strikeThrow  toggle strikeThrow style
 subScript  toggle subScript style
 superScript  toggle superScript style
 justifyLeft  justify to left
 justifyCenter  justify to center
 justifyRight  justify to right

oboutGetEditor("editor").ExecCommand("forecolor","#0000FF");

If the specified command doesn't use val, the second parameter can be omitted:

oboutGetEditor("editor").ExecCommand("bold");

See also working example.
methodQueryCommand(cmd) Returns value of specified query command at the current caret position.

Available query commands are:
 forecolor   foreground color value
 backcolor   backgound color value
 fontname   font family value
 fontsize   font size value
 bold   bold style status (true/false)
 italic   italic style status (true/false)
 underline   underline style status (true/false)
 strikeThrow  strikeThrow style status (true/false)
 subScript  subScript style status (true/false)
 superScript  superScript style status (true/false)

var curColor = oboutGetEditor("editor").QueryCommand("forecolor");

See also working example.
methodchMode(Mode) Set editing mode. Mode is a string and can have next values:
  • text - HTML text mode
  • html - Design mode
  • preview - Preview mode
oboutGetEditor("editor").chMode("text");

See also working example.
methodnoContextMenuAttributeName() Returns name of special attribute used by Editor's Context Menu processor. This feature is used in functions for custom defined Context Menu Items.

var aName = oboutGetEditor("editor").noContextMenuAttributeName();

See CustomCM.aspx example in downloaded zip file.
methodattachedIdAttributeName() Returns name of special attribute used by Editor's Context Menu processor. This feature is used in functions for custom defined Context Menu Items.

var aName = oboutGetEditor("editor").attachedIdAttributeName();

See CustomCM.aspx example in downloaded zip file.
methodsetVisibility(Visibility) Set Editor's component visibility (true/false).

oboutGetEditor("editor").setVisibility(false); // hide editor's component
...
oboutGetEditor("editor").setVisibility(true); // show editor's component

See also working example.
methodsubmit() Submits the form without Editor's validation.

oboutGetEditor("editor").submit();
methodSaveContent() Saves Editor's content for undo operation. It is called automatically in SurroundHTML and InsertHTML functions.

oboutGetEditor("editor").SaveContent();
methodRestoreContent() Executes undo operation.

oboutGetEditor("editor").RestoreContent();
methodDeleteNode() Removes node from Editor's content.

oboutGetEditor("editor").DeleteNode(someNode);
methodgetRange() Get current range(caret position or selection) in Editor's content.

var savedRange = oboutGetEditor("editor").getRange();
methodsetRange(range) Restores previously saved range with focusing in Editor's content.

var savedRange = oboutGetEditor("editor").getRange();
 ...

oboutGetEditor("editor").setRange(savedRange);
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