ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - Client side

Obout.Ajax.UI.HTMLEditor.DesignPanel class

 Inheritance Hierarchy

Object of this type is an inner part of the Obout.Ajax.UI.HTMLEditor.EditPanel Control.
The associated DOM element of this Control instance becomes visible when the activeMode property of the EditPanel Control is set to Obout.Ajax.UI.HTMLEditor.ActiveModeType.Design.
Note Note
To get or set property values for client API properties, you must call property accessor methods that are named with the get_ and set_ prefixes. For example, to get or set a value for a property such as content, you call the get_content or set_content methods:
var editPanelObject = $find("<%= editPanel1.ClientID %>");
var activePanelObject = editPanelObject.get_activePanel();
var _content = activePanelObject.get_content();
...
activePanelObject.set_content("Some new content...");

Properties

Name Description
propertycontent string. Gets or sets the HTML content.
propertydoc object. Gets the Document DOM object of the associated iframe.
propertyelement string. Gets the DOM element that the current Control instance is associated with. (Inherited from Sys.UI.Control.)
propertyid string. Gets the identifier for the current Control object. The default is the id value of the associated Sys.UI.DomElement object. (Inherited from Sys.UI.Control.)

Methods

Name Description
property_createRange([selection]) Returns the Range object. This object's content depends on the browser.

Parameters:
selection - Selection object. If undefined, current selection is used.
property_getSelection() Returns the Selection object (current selection). This object's content depends on the browser.
property_getTextNodeCollection([total]) Returns an array of Text Nodes in the selected(highlighted) area if total is undefined. If total is defined, it returns an array of Text Nodes for the whole content.
property_saveContent() Saves content for 'Undo' operation.
property_selectRng(range) Forces selection(highlighting) on the Range object.

Parameters:
range - Range object.
property_setToEnd() Sets cursor to the end of the content.
propertyfocusEditor() Ensures focus in design panel.
propertygetSelectedHTML() Returns HTML code of the selected(highlighted) area in the content.
propertyinsertHTML(html[,range]) Inserts HTML code into content.

Parameters:
html - HTML code to be inserted.
range - Range object where to insert. If undefined, range of the current selection is used.
propertyisControl() Returns true if some control (image, table, object etc.) is selected(highlighted), otherwise (text selected or none) - false.
propertyisPopup() Returns true if any popup is currently opened, otherwise - false.
propertymoveToWord(number, mode) Moves cursor to the specified plain text word in the content.

Parameters:
number - order number of the word, 0 starting.
mode - how to set cursor:
    0 - set cursor to the start of the word;
    1 - set cursor to the end of the word;
    2 - select(highlight) the whole word.

See online example.
propertyonContentChanged() This fuction is called on every content change.
Call it if you change the content with your custom JavaScript code.
propertyredo() Perfoms 'Redo' operation.
propertyRestoreContent() Restores previously saved by SaveContent() content.
propertySaveContent() Saves content for 'Undo' operation.
propertysurroundHTML(lHtml,rHtml) Surrounds selected content with HTML text.

Parameters:
lHtml - HTML code to be added from the left side of the selected content.
rHtml - HTML code to be added from the right side of the selected content.

Returns true on success, otherwise (nothing selected) - false.

See online example.
propertyTextSelected() Returns true if some text is selected(highlighted), otherwise (control selected or none) - false.
propertyundo() Perfoms 'Undo' operation.
Note Note
To add or remove handler functions for client API events, you must call methods that are named with the add_ and remove_ prefixes. For example, to add or remove a handler function for an event such as activated, you call the add_activated or remove_activated methods:
function activatedHandler(sender, args) {
}
...
var editPanelObject = $find("<%= editPanel1.ClientID %>");
var designMode = Obout.Ajax.UI.HTMLEditor.ActiveModeType.Design;
var designPanelObject = editPanelObject.get_modePanels()[designMode];
designPanelObject.add_activated(activatedHandler);
...
designPanelObject.remove_activated(activatedHandler);

Events

Name Description
propertyactivated Raised when the associated edit mode activating is completed.
Event's argument has type Sys.EventArgs.Empty.
propertycontentChanged Raised after every content change.
Event's argument has type Sys.EventArgs.Empty.
propertyprePaste Raised before something be pasted into the design panel.
Event's argument has type Obout.Ajax.UI.HTMLEditor.PrePasteArgs.

"Just to add to the chorus of supporters, I really enjoy working with your products! As a non-professional developer I sometimes find myself in over my head, but overall your controls have been easy to use and very nice."

David Ross

Random testimonial   All testimonials

Products Downloads