Editor - Custom Modules

  • 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 example shows how to create a simple module that displays the count of tables and images in the content area.

To create a custom module register its tag in the Modules inner-tag of RadEditor. Please, note that at least one of the built-in modules should be registered when creating a custom module, because due to optimization purposes the editor will not register its modules javascript code if some of the built-in modules is not declared:

<telerik:radeditor runat="server" ID="RadEditor1" Height="700px">
   <Modules>
      <telerik:EditorModule Name="MyModule" Enabled="true" Visible="true"/>
      <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="true"/>
   </
Modules >
</ telerik:radeditor >

and after that implement the initializeBase function, e.g.

<script type = "text/javascript" >
MyModule
= function (element)
{
     MyModule.initializeBase(
this , [element]) ;
}

MyModule.prototype
=
{
    initialize :
function ()
    {
        MyModule.callBaseMethod(
this , 'initialize' ) ;
        var
selfPointer = this;
        this
.get_editor().add_selectionChange( function (){ selfPointer.doSomething() ; }) ;
        this
.doSomething() ;
    },

    //A method that does the actual work - it is usually attached to the "selection changed" editor event
    doSomething : function ()
    {
        var span = document .createElement ( "SPAN" ) ;
        span.innerHTML = this .get_editor().get_html() ;

        var
imageCount = span.getElementsByTagName( "IMG" ).length ;
        var
tableCount = span.getElementsByTagName( "TABLE" ).length ;

        var
element = this .get_element() ;
        element.innerHTML = "<b>CUSTOM MODULE: Images: " + imageCount + " Tables: " + tableCount + "</b>" ;
        element.style.border = "1px solid red" ;
        element.style.backgroundColor = "yellow" ;
        element.style.color = "red" ;
    }
}
;

MyModule.registerClass( 'MyModule' , Telerik.Web.UI.Editor.Modules.ModuleBase) ;
</script>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page Language="C#" Theme="Default" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"Inherits="Telerik.Web.Examples.Editor.BuiltinCustomModules.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" type="text/javascript"></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" SkinID="DefaultSetOfTools" runat="server" ID="RadEditor1" Width="800px" OnClientInit="telerikDemo.editor_onClientLoad">
            <Modules>
                <telerik:EditorModule Name="telerikDemo.MyModule" Enabled="true" Visible="true"></telerik:EditorModule>
                <telerik:EditorModule Name="RadEditorStatistics" dockingzone="bottom" Visible="true"
                    Enabled="true"></telerik:EditorModule>
            </Modules>
            <Content>
            <table style="WIDTH: 650px; HEIGHT: 305px" cellspacing="2" border="1">
                <tbody>
                    <tr>
                        <td> <img alt="product logo" src="../../images/productLogoLight.gif" /></td>
                        <td>
                        <p align="justify"><span style="COLOR: 111111;FONT-SIZE: 11px; FONT-FAMILY: MS Sans Serif">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: </span></p>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        <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>
                        </ul>
                        </td>
                        <td>
                        <ul>
                        <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>
                        <li><em>Full keyboard accessibility</em> </li>
                        </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
            </Content>
        </telerik:RadEditor>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?