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>