Toolbar Configuration

27 Apr 201810 minutes to read

The editor’s toolbar contains a collection of tools such as bold, italic and text alignment buttons that are used to format the content.

However, in most integrations, it’s desirable to change the toolbar configuration to suit needs. Fortunately, that’s quite easy to do too.

Property

Description

toolsList



The toolsList option allows you to choose which tools appear on the toolbar, as well as the order and grouping of those items

tools



The toolsList property is used to get the root group order and tools property is used to get the inner order of the corresponding groups displayed.

NOTE

By default, when you tab from the textbox to the RTE, the first tools in the Toolbar of RTE will get focus not in the text area.

But we can able to focus the RTE text area by setting the tab index attribute as -1 to avoid the focus on RTE toolbar when we tab from textbox to RTE - <p>Demo</p>

Toolbar Items

The following table lists the available buttons and dropdowns on the toolbar:

Name
Summary
Initialization
isDefault?
Font
Applies font type, size, and color to the content
List<String> toolsList = new List<string>() {" font"};
List<String> font = new List<string>() { "fontName", "fontSize", "fontColor", "backgroundColor" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Font(font)).Render();}
No
Font style
Applies bold, italic, underline, and strikethrough formatting to the content
List<String> toolsList = new List<string>() { " style"};
List<String> style = new List<string>() { "bold", "italic", "underline", "strikethrough" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Styles(style)).Render();}
yes
Alignment
Align the content with left, center, and right margin.
List<String> toolsList = new List<string>() { " alignment"};
List<String> alignment = new List<string>() { "justifyLeft", "justifyCenter" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Alignment (alignment)).Render();}
yes
List
Create a new list item (bulleted/numbered).
List<String> toolsList = new List<string>() { "lists"};
List<String> lists = new List<string>() { "unorderedList", "orderedList" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Lists(lists)).Render();}
yes
Indents
Allows to increase/decrease the indent level of the content.
List<String> toolsList = new List<string>() { "indenting"};
List<String> indenting = new List<string> { "outdent", "indent" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Indenting(indenting)).Render();}
yes
Undo/Redo Action
Allows to undo/redo the actions
List<String> toolsList = new List<string>() {"doAction"};
List<String> doAction = new List<string>() { "undo", "redo" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. DoAction (doAction)).Render();}
yes
Hyperlink
Creates a hyperlink to a text or image to a specific location in the content.
List<String> toolsList = new List<string>() {"links"};
List<String> links = new List<string>() { "createLink", "removeLink" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Links (links)).Render();}
yes
Images
Inserts an image from an online source or local computer.
List<String> toolsList = new List<string>() {"images"};
List<String> images = new List<string>() { "image" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Images (images)).Render();}
yes
Media
Allows to embed a video into the document.
List<String> toolsList = new List<string>() {"media"};
List<String> media = new List<string>() { "video" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool.Media (media)).Render();}
yes
Table
Allows to add or modify Tables
List<String> toolsList = new List<string>() {"tables"};
List<String> tables = new List<string>() { "createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Tables(tables)).Render();}
yes
Casing
Change the case of selected text in the content
List<String> toolsList = new List<string>() {"casing"};
List<String> casing = new List<string>() { "upperCase", "lowerCase" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Casing(casing)).Render();}
no
Scripts
Makes the selected text as superscript (higher) or subscript (lower).
List<String> toolsList = new List<string>() {"effects"};
List<String> effects = new List<string>() { "superscript", "subscript" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool. Effects(effects)).Render();}
no
Format
Clears the formatting options like bold, italic, underline and more.
List<String> toolsList = new List<string>() {"formatStyle"};
List<String> formatStyle = new List<string>() { "format" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool.FormatStyle(formatStyle)).Render();}
yes
Clipboard Actions
Controls the clipboard actions by applying specific action on the selected content.
List <String> toolsList = new List<string>() {"clipboard"};
List<String> clipboard = new List<string>() { "cut", "copy", "paste" };
@{Html.EJ().RTE("rteSample").ToolsList(toolsList).Tools(tool => tool.Clipboard(clipboard)).Render();}
no

Rearrange Group

The toolbar contains groups, which are similar or related functionalities of toolbar items for efficient access. By default, the groups are arranged using the following order:

  • HTML
  • List<String> toolsList = new List<string>() { "formatStyle", "font", "style", "effects", "alignment", "lists", "indenting", "clipboard", "doAction", "clear", "links", "images", "media", "tables", "casing", "customTool","view" };

    The group can be rearranged on customization using the ToolsList property.

  • HTML
  • @{
        List<String> toolsList = new List<string>() { "style", "lists", "doAction", "links", "images" };
        List<String> style = new List<string>() { "bold", "italic", "underline", "strikethrough" };
        List<String> lists = new List<string>() { "unorderedList", "orderedList" };
        List<String> doAction = new List<string>() { "undo", "redo" };
        List<String> links = new List<string>() { "createLink" };
        List<String> images = new List<string>() { "image" };
    
    }
    @{Html.EJ().RTE("rteSample").Width("100%").ContentTemplate(@<p>
        The Rich Text Editor
        (RTE) control is an easy to render in client side. Customer easy to edit the contents
        and get the HTML content for the displayed content. A rich text editor control provides
        users with a toolbar that helps them to apply rich text formats to the text entered
        in the text area.
    </p>)
        .ShowFooter(true)
        .ToolsList(toolsList)
        .Tools(tool => tool.Links(links).Images(images).Styles(style).Lists(lists).DoAction(doAction)).Render();}

    NOTE

    If you are not specifying any group in ToolsList property, the editor will create the toolbar with default group.

    Undo and Redo

    Undo and Redo buttons allow you to editing the text by disregard/cancel the recently made changes and restore it to previous state. It is a useful tool to restore the performed action which got changed by mistake. Up to 50 actions can be undo/redo in the editor by default.

    To undo and redo operations, do one of the following:

    • Press the undo/redo button on the toolbar
    • Press the Ctrl + Z , Ctrl + Y combination on the keyboard
  • HTML
  • @{
        List<String> toolsList = new List<string>() { "doAction" };
        List<String> doAction = new List<string>() { "undo", "redo" };
    }
    @{Html.EJ().RTE("rteSample").Width("800px").ContentTemplate(@<div>
        The Rich Text Editor
        (RTE) control is an easy to render in client side. Customer easy to edit the contents
        and get the HTML content for the displayed content. A rich text editor control provides
        users with a toolbar that helps them to apply rich text formats to the text entered
        in the text area.
    </div>)
            .ToolsList(toolsList).Tools(tool => tool.DoAction(doAction))
            .Render();}
    <br />

    Clipboard Operations

    The editor provides support for the clipboard operations (cut, copy, and paste) in all text and images using the toolbar buttons and the keyboard shortcuts. Toolbar includes buttons through which the clipboard operations, such as Cut, Copy, and Paste can be accessed.

    You can use the keyboard shortcuts to perform the clipboard operations.

    • Cut - CTRL + X
    • Copy - CTRL + C
    • Paste - CTRL + V

    Some browsers block the clipboard access from JavaScript. If you want to use the Cut, Copy, and Paste buttons on the toolbar, you need to allow JavaScript to use the clipboard. If you don’t want to do this configuration, use CTRL+C, CTRL+X, and CTRL+V keyboard commands.

  • HTML
  • @{
        List<String> toolsList = new List<string>() { "clipboard" };
        List<String> clipboard = new List<string>() { "cut", "copy", "paste" };
    }
    @{Html.EJ().RTE("rteSample").Width("800px").ContentTemplate(@<div>
        The Rich Text Editor
        (RTE) control is an easy to render in client side. Customer easy to edit the contents
        and get the HTML content for the displayed content. A rich text editor control provides
        users with a toolbar that helps them to apply rich text formats to the text entered
        in the text area.
    </div>)
        .ToolsList(toolsList).Tools(tool => tool.Clipboard(clipboard))
        .Render();}

    Specify Custom Tools

    Beside the available built-in tools, the RichTextEditor’s toolbar functionality can be extended through custom tools, defined in the tools through the customTools options, which renders the custom toolbar items along with the built-in toolbar items.

    The example below demonstrates how to add a custom tool button

  • HTML
  • @{
            List<String> toolsList = new List<string>() { "customTools" };
        }
    
        @{Html.EJ().RTE("rteSample").Width("100%").ContentTemplate(@<p>
            The Rich Text Editor
            (RTE) control is an easy to render in client side. Customer easy to edit the contents
            and get the HTML content for the displayed content. A rich text editor control provides
            users with a toolbar that helps them to apply rich text formats to the text entered
            in the text area.
        </p>).ShowFooter(true).ToolsList(toolsList).Tools(tool => tool.CustomTools(customTools => customTools.Text("Insert - O").Tooltip("Special Characters").Css("insert-special-character").Action("CustomTool").Add())).Render();}

    Upon clicking the “Insert” button, the special character will be added to the RTE’s content.

  • HTML
  • <script>
        var rteObj =  $("#rteSample").data("ejRTE");
        $(".insert-special-character").ejButton();
        $("#specialCharacter").ejDialog({ enableResize: false, enableModal: true, showOnInit: false, width: "auto", position: { X: 218, Y: 38 } });
        $(".special-table tbody tr td" ).addClass("special-td").on( "click", customTdClick);
        function customTdClick(args) {
            rteObj.executeCommand("inserthtml", args.currentTarget.innerText);
            $("#specialCharacter").ejDialog("close");
        }  
        function CustomTool(args){
            $("#specialCharacter").ejDialog("open");   
        }
    </script>

    Define the CSS that will be applied to the custom tool.

  • HTML
  • <style>
        .special-table tr td
        {
            border:1px solid #c8c8c8;
        }
        .special-td:hover
        {
            background-color:#86bcea;
            cursor:pointer;
        }
    </style>

    NOTE

    The CSS class that defined for custom tool is directly applies to the newly added toolbar item.

    IMPORTANT

    The custom buttons get a insert-special-character CSS class to allow styling, where name is the name specified in the custom tool configuration.

    Types of responsive toolbar

    Two types of toolbar modes are available for RTE in responsive mode. This includes “inline” and “popup”. Toolbar Type can be set through API toolbarOverflowMode whose default value is “popup”.

  • HTML
  • @{Html.EJ().RTE("rteSample").Width("100%").ContentTemplate(@<p>The Rich Text Editor
            (RTE) control is an easy to render in client side. Customer easy to edit the contents
            and get the HTML content for the displayed content. A rich text editor control provides
            users with a toolbar that helps them to apply rich text formats to the text entered
            in the text area.
            </p>).ToolbarOverflowMode(ToolbarOverflowMode.Inline).IsResponsive(true).Render();}

    NOTE

    If you are not specifying toolbarOverflowMode, responsive RTE will be rendered with default popup toolbar.