New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Context Menus

  • Cut
  • Copy
  • Paste
  • Align Left
  • Align Center
  • Align Right
  • Justify
  • 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
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

The RadEditor can include ContextMenus tag, which allows you to change the default context menus and specify custom ones for the various HTML elements. You can also disable the context menu for certain elements (e.g. for tables).

< ContextMenus >
    < telerik:EditorContextMenu  TagName ="A"  Enabled ="false"></ contextMenu >
    < telerik:EditorContextMenu  TagName ="IMG">
       < telerik:EditorTool  name ="Cut"/>
      < telerik:EditorTool  name ="Copy"/>
      < telerik:EditorTool  name ="Paste"/>
   </ telerik:EditorContextMenu >
    < telerik:EditorContextMenu  TagName ="P">
       < telerik:EditorTool  name ="JustifyLeft"/>
      < telerik:EditorTool  name ="JustifyCenter"/>
      < telerik:EditorTool  name ="JustifyRight"/>
      < telerik:EditorTool  name ="JustifyFull"/>
   </ telerik:EditorContextMenu >
</ ContextMenus >

Here is the default context menu configuration of RadEditor:

< telerik:RadEditor  ID ="RadEditor1"  runat ="server">
   < ContextMenus >
     < telerik:EditorContextMenu  TagName ="IMG">
       < telerik:EditorTool  Name ="SetImageProperties"   />
      < telerik:EditorTool  Name ="ImageMapDialog"   />
    </ telerik:EditorContextMenu >
     < telerik:EditorContextMenu  TagName ="TABLE">
       < telerik:EditorTool  Name ="ToggleTableBorder"   />
      < telerik:EditorTool  Name ="SetTableProperties"   />
      < telerik:EditorTool  Name ="DeleteTable"   />
    </ telerik:EditorContextMenu >
     < telerik:EditorContextMenu  TagName ="TD">
       < telerik:EditorTool  Name ="InsertRowAbove"   />
      < telerik:EditorTool  Name ="InsertRowBelow"   />
      < telerik:EditorTool  Name ="DeleteRow"   />
      < telerik:EditorTool  Name ="InsertColumnLeft"   />
      < telerik:EditorTool  Name ="InsertColumnRight"   />
      < telerik:EditorTool  Name ="MergeColumns"   />
      < telerik:EditorTool  Name ="MergeRows"   />
      < telerik:EditorTool  Name ="SplitCell"   />
      < telerik:EditorTool  Name ="DeleteCell"   />
      < telerik:EditorTool  Name ="SetCellProperties"   />
    </ telerik:EditorContextMenu >
     < telerik:EditorContextMenu  TagName ="A">
       < telerik:EditorTool  Name ="SetLinkProperties"   />
      < telerik:EditorTool  Name ="Unlink"   />
    </ telerik:EditorContextMenu >
     < telerik:EditorContextMenu  TagName ="BODY">
       < telerik:EditorTool  Name ="Cut"   />
      < telerik:EditorTool  Name ="Copy"   />
      < telerik:EditorTool  Name ="Paste"   />
      < telerik:EditorTool  Name ="PasteFromWord"   />
      < telerik:EditorTool  Name ="PastePlainText"   />
      < telerik:EditorTool  Name ="PasteAsHtml"   />
    </ telerik:EditorContextMenu >
   </ ContextMenus >
</ telerik:RadEditor >

As of R2 2016 RadEditor uses the RadContextMenu as a default context menu. If you want to use the older context menu you can set the UseRadContextMenu property to false.

Related Resources

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

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<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" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" SkinID="MinimalSetOfTools" Height="400px"
                Width="680px" CssClass="centered-editor">
                <ContextMenus>
                    <telerik:EditorContextMenu Enabled="false" TagName="A">
                    </telerik:EditorContextMenu>
                    <telerik:EditorContextMenu TagName="IMG">
                        <telerik:EditorTool Name="Cut"></telerik:EditorTool>
                        <telerik:EditorTool Name="Copy"></telerik:EditorTool>
                        <telerik:EditorTool Name="Paste"></telerik:EditorTool>
                    </telerik:EditorContextMenu>
                    <telerik:EditorContextMenu TagName="P">
                        <telerik:EditorTool Name="JustifyLeft"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyCenter"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyRight"></telerik:EditorTool>
                        <telerik:EditorTool Name="JustifyFull"></telerik:EditorTool>
                    </telerik:EditorContextMenu>
                </ContextMenus>
                <Content>
            Right-click on image to see custom menu
            <img src="../../images/productLogoLight.gif" /><br /><br />
            <p>Right-click here to see the custom Paragraph menu.<br /><br /></p>
            Right-click on the link to see the default link menu disabled: <a href="/">www.telerik.com</a>. 
                </Content>
            </telerik:RadEditor>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance