Editor - RibbonBar

  • 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

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

This example demonstrates the easy automated integration between RadRibbonBar and RadEditor.

The RibbonBar member of the ToolBarMode enumeration property configures RadEditor to use a RadRibbonBar control as a container for its tools.

There are some RibbonBar related properties which are added for the tools and tool xml elements in the editor's ToolsFile file.
  • For the tools elements the "name" property sets the RibbonBarGroup control, in which the tool is loaded and the "tab" property sets the RibbonBarTab contorl, in which the group is loaded.
  • For the tool elements the "size" property sets the size of the buttons. You can review the tools.xml file in the "Source Code" section of this demo.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
  • tools.xml
<%@ Page Theme="Default" Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"    Inherits="Telerik.Web.Examples.Controls.Integration.RibbonBarAndEditor.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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="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" ToolbarMode="RibbonBar" _ToolsFile="tools.xml"
            SkinID="DefaultSetOfTools" CssClass="centered-editor" Height="580">
        </telerik:RadEditor>
    </div>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <telerik:RadComboBox RenderMode="Lightweight" AutoPostBack="true" ID="ChooseToolbarMode" runat="server" 
                    OnSelectedIndexChanged="ChooseToolbarMode_SelectedIndexChanged" Label="Choose Toolbar Mode">
                <Items>
                    <telerik:RadComboBoxItem runat="server" Text="RibbonBar" Value="RibbonBar" Selected="true"></telerik:RadComboBoxItem>
                    <telerik:RadComboBoxItem runat="server" Text="RibbonBarFloating" Value="RibbonBarFloating"></telerik:RadComboBoxItem>
                    <telerik:RadComboBoxItem runat="server" Text="RibbonBarPageTop" Value="RibbonBarPageTop"></telerik:RadComboBoxItem>
                    <telerik:RadComboBoxItem runat="server" Text="RibbonBarShowOnFocus" Value="RibbonBarShowOnFocus"></telerik:RadComboBoxItem>
                </Items>
                <CollapseAnimation Duration="200" Type="OutQuint"></CollapseAnimation>
            </telerik:RadComboBox>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?