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

Built-in Dialogs

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

This demo demonstrates all the available built-in dialogs. You can examine their descriptions by following this list:

  •   Insert Select dialog offers a way to easily create or edit <select> dropdowns in RadEditor. Using the "Add Option" and "Remove Option" buttons inside the dialog, the user can add or remove options. It is also possible to change the different dropdown's settings in the provided Properties panel. To edit an already selected dropdown in the content area, press the Insert Select toolbar button and the dropdown's properties and items will be loaded inside the Insert Select dialog.  
  •   Thumbnail View mode for Image Manager - Starting from Q1 2012, the Image Manager has a new thumbnail mode, which is enabled by default. All images are loaded and displayed as icons in the central area of the dialog. The old grid mode could be restored by setting the ViewMode property to "Grid", e.g.

    <telerik:RadEditor runat="server" ID="RadEditor1">
            <ImageManager ViewMode="Grid" ViewPaths="~/images"  />
    </     telerik:RadEditor>
     
  •   Insert External Video dialog offers a way to easily embed a YouTube or Vimeo video providing just the URL. Additional options for video customization are available as well.
     
  •   Paste Html dialog allows you to paste HTML code in to the editor's current selection and render it. It is helpful when you need to enter predefined HTML code such as media embed source.
     
  •   Paste Markdown dialog allows you to paste markdown code in to the editor's current selection and render it.
     
  •   Insert Table Light dialog is a light version of Table Wizard. When enabled, its content is rendered on page load and as a result the content is immediately loaded when the dialog is shown without any delay. In order to have it decorated you should put a RadFormDecorator on the main page.
     
  •   Insert Link dialog is a light version of Hyperlink Manager. When enabled, its content is rendered on page load and as a result the content is immediately loaded when the diaolg is shown without any delay. In order to have it decorated you should put a RadFormDecorator on the main page.
     
  •   Insert Image dialog is a light version of SetImageProperties. When enabled, its content is rendered on page load and as a result the content is immediately loaded when the diaolg is shown without any delay. In order to have it decorated you should put a RadFormDecorator on the main page.
     
  •   XhtmlValidator dialog uses the W3C XHTML Validator Page to perform validation of the current editor content. The W3C service returns a compliancy report right within the editor dialog. This feature liminates the need for manual copy/pasting of the HTML and validation in a separate browser window.
     
  •   FormatCodeBlock dialog provides the ability to edit and format code blocks of text whether they be HTML, CSS, JavaScript as well as C# and VB code. You simply click the Format Code Block button, paste the corresponding lines of text or code into the upper pane of the appearing dialog, then select the Code Language format from the dropdown provided and finally click Insert to paste the formatted content into the editor.

    The dialog also provides a Preview button which allows you to see how the formatted content will look (depending on the selected Code Language item in the dropdown) before insertion into the content area.
     
  • The Image Editor tab of the Image Manager provides the ability to resize, flip, rotate, crop the selected image element as well as set its opacity. This tool is based on the standalone RadImageEditor control.
     
  •   StyleBuilder dialog - improved performance and appearance.

    The StyleBuilder dialog box provides options to define cascading style sheet (CSS) style attributes. A CSS style combines individual formatting and positioning attributes into an attribute set that you can apply all at one time.

    The StyleBuilder dialog box is divided into two panes. The left pane lists the following general categories (Font, Background, Text, Layout, Edges and Lists). When you select a category, the right pane shows the options for the selected category. As you select style options, the Style Builder dialog box creates CSS style that will be applied to the selected element in the content area of RadEditor..

Related Resources

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"Inherits="Telerik.Web.Examples.Editor.Dialogs.DefaultVB"  %>

<%@ 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" ID="RadEditor1" runat="server" CssClass="centered-editor">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="InsertFormSelect" Text="Insert Select"></telerik:EditorTool>
                    <telerik:EditorTool Name="PasteHtml" Text="Paste Html"></telerik:EditorTool>
                    <telerik:EditorTool Name="PasteMarkdown" Text="Paste Markdown"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertTableLight" Text="Insert Table Light"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertLink" Text="Insert Link Dialog"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertImage" Text="Insert Image Dialog"></telerik:EditorTool>
                    <telerik:EditorTool Name="ImageManager" ShortCut="CTRL+M" Text="ImageManager with ImageEditor"></telerik:EditorTool>
                    <telerik:EditorTool Name="StyleBuilder" Text="Style Builder"></telerik:EditorTool>
                    <telerik:EditorTool Name="XhtmlValidator" Text="Xhtml Validator Dialog"></telerik:EditorTool>
                    <telerik:EditorTool Name="FormatCodeBlock" Text="Format Code Block Dialog"></telerik:EditorTool>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="SetImageProperties"></telerik:EditorTool>
                    <telerik:EditorTool Name="ImageMapDialog"></telerik:EditorTool>
                    <telerik:EditorTool Name="FlashManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="SilverlightManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="MediaManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="InsertExternalVideo" Text="Insert External Video"></telerik:EditorTool>
                    <telerik:EditorTool Name="DocumentManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="TemplateManager"></telerik:EditorTool>
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="FindAndReplace"></telerik:EditorTool>
                    <telerik:EditorTool Name="TableWizard"></telerik:EditorTool>
                    <telerik:EditorTool Name="LinkManager"></telerik:EditorTool>
                    <telerik:EditorTool Name="PageProperties"></telerik:EditorTool>
                    <telerik:EditorSeparator></telerik:EditorSeparator>
                    <telerik:EditorTool Name="AboutDialog"></telerik:EditorTool>
                    <telerik:EditorTool Name="Help"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <ImageManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></ImageManager>
            <FlashManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></FlashManager>
            <SilverlightManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></SilverlightManager>
            <MediaManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></MediaManager>
            <DocumentManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></DocumentManager>
            <TemplateManager ViewPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"
                UploadPaths="~/Editor/images/UserDir/Marketing,~/Editor/images/UserDir/PublicRelations"></TemplateManager>
            <Content>
            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                    <title>This is s sample title</title>
                    <meta content="This is a sample description" name="Description"></meta>
                    <meta content="Editor,Dialogs" name="Keywords"></meta>
                </head>
                <body>
                    <h2 style="background-color:rgb(104, 154, 5);color:#ffffff;font-family:segoe ui;text-align:center;">RadEditor for ASP.NET AJAX</h2>
                    <p style="text-align: justify;">
                        <span style="font-size: 19px; color: #4f6128;"><strong>RadEditor</strong></span><span style="color: #4f6128;"> </span>is not simply an HTML
                        <a href="#HTMLDescription">
                            <sup>1</sup>
                        </a> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in
                        <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong> output, fast rendering, widest cross-browser support, and
                        <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx">tons of features</a>: <br />
                        <br />
                        <img src="../../images/editor.jpg" alt="product logo" style="margin-top: 25px; float: left; margin-right: 15px;" />
                    </p>
                    <ul style="width: 350px; float: left;">
                        <li>
                            <em>Out-of-the-box XHTML-enabled Output...</em>
                        </li>
                        <li>
                            <em>Unmatched Loading Speed and Performance</em>
                        </li>
                        <li>
                            <em>Microsoft Word-like Spell-checking</em>
                        </li>
                        <li>
                            <em>Seven Ways for Pasting from Word</em>
                        </li>
                        <li>
                            <em>Multilevel Undo/Redo with Action Trails</em>
                        </li>
                        <li>
                            <em>Extended Functionality Through Integrated Controls</em>
                        </li>
                    </ul>
                    <table width="500" style="margin: 0pt auto;clear:both;">
                        <thead>
                            <tr>
                                <th style="background-color: #ebf1dd;">Browser/OS</th>
                                <th style="background-color: #ebf1dd;">Windows</th>
                                <th style="background-color: #ebf1dd;">Mac OS</th>
                                <th style="background-color: #ebf1dd;">Linux</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td align="center" style="text-align: left; vertical-align: middle;">
                                    <img src="../../images/BrowserIcons/ie.gif" alt="ie" style="float: left;" />&nbsp; Internet Explorer
                                </td>
                                <td valign="top" style="background-color: #f2f2f2;">6.0+</td>
                                <td valign="top" style="background-color: #e5e0ec;">- </td>
                                <td valign="top" style="background-color: #dbeef3;">- </td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="../../images/BrowserIcons/ff.gif" alt="ff" style="float: left;" />&nbsp; Firefox
                                </td>
                                <td style="background-color: #f2f2f2;">1.5+</td>
                                <td style="background-color: #e5e0ec;">1.5+</td>
                                <td style="background-color: #dbeef3;">1.5+</td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="../../images/BrowserIcons/chrome.gif" alt="chrome" style="float: left;" />&nbsp; Google Chrome
                                </td>
                                <td style="background-color: #f2f2f2;">0.2+</td>
                                <td style="background-color: #e5e0ec;">5.0+</td>
                                <td style="background-color: #dbeef3;">5.0+</td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="../../images/BrowserIcons/opera.gif" alt="opera" style="float: left;" />&nbsp; Opera
                                </td>
                                <td style="background-color: #f2f2f2;">9.0+</td>
                                <td style="background-color: #e5e0ec;">9.0+</td>
                                <td style="background-color: #dbeef3;">-</td>
                            </tr>
                            <tr>
                                <td>
                                    <img src="../../images/BrowserIcons/safari.gif" alt="safari" style="float: left;" />&nbsp; Safari
                                </td>
                                <td style="background-color: #f2f2f2;">3.0+</td>
                                <td style="background-color: #e5e0ec;">3.0+</td>
                                <td style="background-color: #dbeef3;">-</td>
                            </tr>
                        </tbody>
                    </table>

                    <p style="border-top: 1px solid #555;padding-top: 10px;">
                        <sup><sup>
                        <a id="HTMLDescription">1.</a>
                        </sup>The computer language used to create world-wide-web pages which are read by browsers.</sup>
                    </p>
                </body>
            </html>
            </Content>
        </telerik:RadEditor>
    </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance