The OnClientPasteHtml event is useful in scenarios where the developers need to examine or modify the HTML to be pasted by an editor tool before it is inserted in the editor content area. Some common cases where the event can be used are:
- Check whether user specified alt attribute for an image
- Make modifications to a table being inserted (e.g. set a specific classname, etc)
- Examine or modify a link before it is inserted
- Modify the pasted content before its insertion in the content area
The event allows the developer to cancel the event as well - then no content will be inserted. Many of the editor tools and dialogs use the pasteHtml method to perform their action - here is a list with the common ones:
Tools
- InsertTable
- InsertTab (in IE)
- InsertSnippet
- InsertFormElement
- InsertGroupbox
- InsertDate
- InsertTime
- InsertSymbol
- InsertHorizontalRule
- InsertCustomLink
- Paste
Dialogs
- ImageManager
- FlashManager
- MediaManager
- TemplateManager
- FormatCodeBlock
Example:
The code below demonstrates how to check whether the inserted image through the Image manager has an "
alt" attribute set and if it doesn't then urge the user to enter an "
alt" attribute name:
<script type="text/javascript">
function OnClientPasteHtml(sender, args)
{
var commandName = args.get_commandName();
var value = args.get_value();
if (commandName == "ImageManager")
{
//See if an img has an alt tag set
var div = document.createElement("DIV");
//Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
//This is a severe IE quirk.
Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div,value);
//Now check if there is alt attribute
var img = div.firstChild;
if (!img.alt)
{
var alt = prompt("No alt tag specified. Please specify an alt attribute for the image", "");
img.setAttribute("alt", alt);
//Set new content to be pasted into the editor
args.set_value(div.innerHTML);
}
}
}
</script>
<telerik:RadEditor runat="server"
OnClientPasteHtml="OnClientPasteHtml"
ImageManager-ViewPaths="~/"
ID="RadEditor1">
</telerik:RadEditor>
The OnClientPasteHtml event is also fired when the Paste (Ctrl+V) command is executed. It is useful in scenarios when the pasted content should be modified and inserted in the content area.
For example when copying and pasting a link or an image with a relative path in Internet Explorer, the browser automatically converts the path to absolute. The code below demonstrates how to attach to the OnClientPasteHtml event and strip the desired url path using the StripPathFilter content filter. The StripPathsFilter() method receives as a parameter an array of strings (devided by a white space) that will be stripped from the absolute path.
<script type="text/javascript">
function OnClientPasteHtml(sender, args)
{
var commandName = args.get_commandName();
var value = args.get_value();
if (commandName == "Paste")
{
// The StripPathsFilter() method receives as a parameter an array of strings (devided by a white space) that will be stripped from the absolute links.
var domainName = "http://" + window.location.host; //returns the hostname and port number of the current URL
var filter = new Telerik.Web.UI.Editor.StripPathsFilter([domainName]); //strip the domain name from the absolute path
var contentElement = document.createElement("SPAN");
contentElement.innerHTML = value;
var newElement = filter.getHtmlContent(contentElement);
alert(newElement.outerHTML);
args.set_value(newElement.outerHTML); //set the modified pasted content in the editor
}
}
</script>
Please, note that the OnClientPasteHtml event fires the Paste command only when the StripFormattingOnPaste property is not set to "NoneSupressCleanMessage". In this case the editor does not process the pasted content and pastes it without modifications.
Related Resources