Editor - OnClientDomChange

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo illustrates how the OnClientDomChange event can help you customize the link object returned by the Hyperlink, Document Manager and Insert Link dialog before it is getting inserted in the content area. For example the developer can apply or remove styles, attributes and/or append other HTML elements to the returned by the dialog link.

The OnClientDomChange client event allows you to customize the default behavior of:

  • Hyperlink manager - Check whether the inserted link has a title attribute and if not, ask the user to specify a Tooltip, because it is an accessibility issue
  • Insert Link - the links inserted by this dialog are customized and have double underline
  • Document Manager - An icon is added before the link when it points to an MS Word document.
  • Table Wizard - The boreder of the inserted table is set to 1px solid red.
  • Insert Table Light - The boreder of the inserted table is set to 1px solid blue.

Content changes made via these tools fire the OnClientDomChange event:

  • DocumentManager
  • LinkManager
  • InsertLink
  • TableWizard
  • InsertTableLight

Example:
The code below demonstrates how to check whether the inserted link through the Link Manager has a "title" attribute set and if it doesn't then urge the user to enter a title via the browser's prompt dialog:

<script type="text/javascript">
    
function OnClientDomChange(editor, args) {
        
        
var commandName args.get_commandName();
        var value = 
args.get_value();
            
        if 
(commandName == "LinkManager") {
            
var link = value;
            
//See if the inserted link has a title attribute and if not prompt the user to set
            
if (!link.title) {
                
var titleAttribute prompt("No tooltip specified. Please specify a title attribute for the link""");
                
link.setAttribute("title", titleAttribute);
            
}
        }
    }
</script>
<telerik:RadEditor runat="server" OnClientDomChange="OnClientDomChange" ID="RadEditor1"></telerik:RadEditor>

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.OnClientDomChange.DefaultCS"  %>

<%@ Register Namespace="Telerik.QuickStart" TagPrefix="qsf" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
<link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" OnClientDomChange="TelerikDemo.OnClientDomChange" ID="RadEditor1" Height="400px" Width="800px">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="LinkManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertLink"></telerik:EditorTool>
                    <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="TableWizard"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertTableLight"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <DocumentManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></DocumentManager>
            <Content>
            <img alt="product logo" src="../../images/productLogoLight.gif" />is the successor of the well known industry standard Editor for ASP.NET. The tight integration with ASP.NET AJAX and the powerful new capabilities make Telerik's WYSIWYG Editor a flexible and lightweight component, turning it into the fastest loading Web Editor. Among the hottest features are: 
            <ul>
                <li><em>Single-file, drag-and-drop deployment</em></li>
                <li><em>Built on top of ASP.NET AJAX</em></li>
                <li><em>Unmatched loading speed with new semantic rendering </em></li>
                <li><em>Full keyboard accessibility</em></li>
                <li><em>Flexible Skinning mechanism</em></li>
                <li><em>Simplified and intuitive toolbar configuration</em></li>
                <li><em>Out-of-the-box XHTML-enabled output</em></li>
            </ul>
            </Content>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?