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

    Custom Modules

    Words: 265   Characters: 1630 
    CUSTOM MODULE: Images: 8 Tables: 3

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

    Support & Learning Resources

    Find Assistance