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

Client-side API

  • 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
  • Demo Configurator
  • Commands
  • Content

RadEditor provides a rich Client-Side API and event model. You can attach custom client-script code (JavaScript) to a number of client-side events fired by the editor. All client-side events are exposed as string properties to the RadEditor instance with the value being the name of the JavaScript function to be called. 
Below is a list of all client-side events and methods that are currently supported by RadEditor:

Events

  1. OnClientInit - fired before RadEditor initialization
  2. OnClientLoad  - fired after the RadEditor is loaded on the client
  3. OnClientCommandExecuting - fired just before a command is executed
  4. OnClientCommandExecuted - fired after a command is executed 
  5. OnClientSelectionChange - fired when the selection within the editor content area has changed
  6. OnClientModeChange - fired when the editor's mode is changed
  7. OnClientSubmit - fired when the editor saves its content just before a postback/ajax request 

Methods

  1. pasteHtml - Pastes HTML content to the cursor position.
  2. set_html - Replaces the current content with a new one.
  3. setFocus - Sets the focus on RadEditor.
  4. get_html - Returns the editor content as HTML.
  5. get_text - Returns the editor content as plain text.
  6. getSelection - Returns a reference to the current RadEditorSelection object.
  7. getSelectionHtml - Returns the HTML of the selection.
  8. fire - Executes RadEditor commands.
  9. getToolByName - Returns tool so for the purposes of client-side manipulation.
  10. get_contentArea - Returns a reference to the editor's content area.
  11. showExternalDialog - Shows a dialog with the supplied arguments.
  12. attachEventHandler - Attaches an event to its handler.

More information is available in the following help article: Getting familiar with Client-Side API.

Related Resources

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

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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" />
    <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" ID="RadEditor1" runat="server" Width="800px" OnClientLoad="TelerikDemo.editor_onClientLoad">
            <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>

    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server" Title="Commands">
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" Text="SelectAll" Value="SelectAll" OnClientClicked="TelerikDemo.executeCommand" Size="Medium" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li class="plainButton">
                            <qsf:Button runat="server" Text="Bold" Value="Bold" ButtonType="StandardButton" OnClientClicked="TelerikDemo.executeCommand" Size="Medium" AutoPostBack="false"></qsf:Button>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li class="plainButton">
                            <qsf:Button runat="server" Text="Italic" Value="Italic" ButtonType="StandardButton"  OnClientClicked="TelerikDemo.executeCommand" Size="Medium" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li class="plainButton">
                            <qsf:Button runat="server" Text="Underline" Value="Underline" ButtonType="StandardButton"  OnClientClicked="TelerikDemo.executeCommand" Size="Medium" AutoPostBack="false"></qsf:Button>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li class="plainButton">
                            <qsf:Button runat="server" Text="StrikeThrough" Value="StrikeThrough" ButtonType="StandardButton"  OnClientClicked="TelerikDemo.executeCommand" Size="Medium" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li class="plainButton">
                            <qsf:Button runat="server" Text="ConvertToUpper" Value="ConvertToUpper" ButtonType="StandardButton"  OnClientClicked="TelerikDemo.executeCommand" Size="Medium" AutoPostBack="false"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li class="plainButton">
                            <qsf:Button runat="server" Text="ConvertToLower" Value="ConvertToLower" ButtonType="StandardButton"  OnClientClicked="TelerikDemo.executeCommand" Size="Medium" AutoPostBack="false"></qsf:Button>
                        </li>
                        <li></li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View runat="server" Title="Content">
                <qsf:ConfiguratorColumn runat="server" Size="Wide">

                    <qsf:TextBox runat="server" TextMode="MultiLine" Height="300px" Width="500px" EmptyMessage="You can type some HTML content and update the RadEditor's content area.">
                        <ClientEvents OnLoad="TelerikDemo.TextBox_onLoad" />
                    </qsf:TextBox>


                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" Text="Get HTML Content" Size="Wide" AutoPostBack="false" OnClientClicked="TelerikDemo.getHtmlContent" />
                        </li>
                        <li>
                            <qsf:Button runat="server" Text="Update HTML Content" Size="Wide" AutoPostBack="false" OnClientClicked="TelerikDemo.updateHtmlContent" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance