All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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:
More information is available in the following help article: Getting familiar with Client-Side API.
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.ClientsideAPI.DefaultVB" %> <%@ 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>