$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
HtmlEditor Client Side Event in ASP.NET
Home > How to > HtmlEditor Client Event

Information to HtmlEditor Client-side Events

With the purpose to help developers to customize the behavior of the html editor, the PerHtmlEditor Control offers a list of client side events. Using these client side events, developers can easily create an html editor that has the ability to respond to the actions performed by the end users.
Here we just list these client side events that are supported by the PerHtmlEditor Control.
  • OnClientInit
  • OnClientLoad
  • OnClientCommandExecuted
  • OnClientDomChange
  • OnClientPasteHtml
  • OnClientSelectionChange
If you want to know the detailed functions and methods for activating above mentioned html editor client side events, you can read the descriptions listed in later section.

Description for HtmlEditor Client-side Events

In this section, we aim to answer two questions that what are these client side events used for?
  • OnClientInit: this event is raised before the initialization of the editor content area. Developer can use this client side event to override the methods or filters of the html editor. For instance, you can use this event to fix the width of the PerHtmlEditor for ensuring the width of the editor is the same as expected.
  • OnClientLoad: this event is triggered after the content is set in the editor content area. And this event is subsequent to OnClientInit event and right before the editor is about to be used.
  • OnClientCommandExecuted: this event is raised when a command is executed.
  • OnClientDomChange: this event is often used for developers to customize the link object that is returned by Hyperlink, Document Manager and Insert Link dialog. You can use this event to apply or remove style or other html elements to/from the returned object.
  • OnClientPasteHtml: if you want to use an editor tool for examining the HTML that is to be pasted before it is inserted into the content area, you can trigger this event. For instance, you can modify a link before it is inserted.
  • OnClientSelectionChange: this event occurs when the selection in the content area has changed. To put it in another way, you can use this client side event to alert the editor content when user makes a selection within the editor content area.

Programming Examples for HtmlEditor Client-side Events

In this section, we will offer programming examples to guide developers how to use these client side events in ASP.NET web application.

How to Use These Client Side Events via Javascript

<script type="text/javascript">
var messageDiv = $get('CommandMessage');
var contentViewer = $get('contentViewer');
var counter = $get('counter');

function OnClientLoad(editor, args) {
counter.innerHTML = editor.get_html().length;

messageDiv.innerHTML = "OnClientLoad executed";
editor.attachEventHandler("onkeydown", function (e) {
counter.innerHTML = editor.get_html().length;

function OnClientSelectionChange(editor, args) {
contentViewer.innerHTML = editor.getSelectionHtml();

function OnClientCommandExecuting(editor, args) {
//The command name
var commandName = args.get_commandName();
//The tool that initiated the command
var tool = args.get_tool();
//The selected value [if command is coming from a dropdown]
var value = args.get_value();

//Perform some action
var message = "OnClientCommandExecuting.\nSelected value: " + value;
var answer = confirm(message + "\nExecute command " + commandName + "?");

//Cancel the command execution by calling args.set_cancel(true);

function OnClientCommandExecuted(editor, args) {
messageDiv.innerHTML = "OnClientCommandExecuted. Command name:" + args.get_commandName();

function OnClientModeChange(editor) {
messageDiv.innerHTML = "OnClientModeChange executed";

function OnClientSubmit(editor, args) {
messageDiv.innerHTML = "OnClientSubmit executed";
alert("OnClientSubmit executed");


How to Use These Client Side Events in Aspx Web Page

<kettic:PerHtmlEditor ID="PerHtmlEditor1" runat="server" SkinID="DefaultSetOfTools" 
OnClientCommandExecuted="OnClientCommandExecuted" OnClientCommandExecuting="OnClientCommandExecuting"