HtmlEditor Client Side Event |UI Control for ASP.NET AJAX, C#, VB.NET

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">
        //<![CDATA[
        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);
            args.set_cancel(!answer);
        }

        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");

        }
        //]]>
</script>

How to Use These Client Side Events in Aspx Web Page

<kettic:PerHtmlEditor ID="PerHtmlEditor1" runat="server" SkinID="DefaultSetOfTools" 
OnClientLoad="OnClientLoad"
OnClientCommandExecuted="OnClientCommandExecuted" OnClientCommandExecuting="OnClientCommandExecuting"
OnClientSelectionChange="OnClientSelectionChange" 
OnClientModeChange="OnClientModeChange"
OnClientSubmit="OnClientSubmit">
</kettic:PerHtmlEditor>

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control ASP.NET AJAX Color Editor UI Control ASP.NET AJAX ComboBox UI Control ASP.NET AJAX DataPager UI Control ASP.NET AJAX Dock UI Control ASP.NET AJAX DropDownList UI Control ASP.NET AJAX DropDownTree UI Control

ASP.NET AJAX HtmlEditor UI Control

Overview Getting Started

ToolBars

Introduction Modes and Docking Button

DropDowns

Font Paragraph Styles Colors CSS Styles Insert Table

Dialogs

Introduction Format Code Block XHTML Validator Spellchecker Modules

Features

Edit modes Editor Showing Track Changes Comments Import and Export

Managing Content

Formatting

Client Prpgramming

HtmlEditor Event

ASP.NET AJAX FileManager UI Control ASP.NET AJAX Filter UI Control ASP.NET AJAX Input UI Control ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control