Editor - OnClientPasteHtml

  • 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 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

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

<%@ 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" ID="RadEditor1" Width="800px"
             OnClientPasteHtml="TelerikDemo.OnClientPasteHtml">
            <Tools>
                <telerik:EditorToolGroup Tag="FileManagers">
                    <telerik:EditorTool Name="InsertTime"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertDate"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertTable"></telerik:EditorTool>
                    <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="ImageManager"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></ImageManager>
            <FlashManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></FlashManager>
            <MediaManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></MediaManager>
            <DocumentManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></DocumentManager>
            <TemplateManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></TemplateManager>
            <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?