We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to display full toolbar items of the Rich Text Editor?

The Rich Text Editor control provides a number of tool items that provide a rich look to the text entered in the editing area. It brings to the Web popular editing features found in the desktop word processors such as the Microsoft Word and the OpenOffice.org Writer.

To enable the standard toolbar items:

The Rich Text Editor control has a list of toolbar items to format the content of the Rich Text Editor and also to add the custom tool in the RTE toolbar to achieve your own functionality in the Rich Text Editor control. You can enable the list of built-in toolbar items in the RTE control through the tools option present in the RTE control.

List of Standard Toolbar Items:

  1. Alignment Formatting Tools: Left, right, center, and justify.
  2. Color palette:
  • Fore-color: To change the color of the text in the editing area.
  • Back-color: To change the background color of the editing area.
  1. Bulleting: Ordered and unordered list.
  2. Style: Bold, Italic, Underline, and Strikethrough.
  3. Subscript and Superscript.
  4. Text with subscript and superscript placed after or before the baseline respectively.
  5. Font options.
  • Font Name - Typeface that is applied to the document text.
  • Font Size - Determines how big or small the text should be.
  1. Format.    
  2. Predefined sets of formatting features that can be applied to block and to make elements of the document inline.
  3. Upper and lower case conversion.
  4. Indent.
  5. Undo and Redo operations.

To enable the Custom toolbar items:

In the Rich Text Editor, toolbars are customizable. When you want to include a new tool item with a new function that is not available in the existing RTE toolbar items, create a new tool item by using the custom tool option in the RTE control and enable this custom toolbar item through the tools option present in the RTE control.

             // Custom Toolbar Items.

                 customTool: [{

                        name: "saveTool",

                        tooltip: "Save Button",

                        css: "saveButton",

                        action: function () {

                           // Writes your action code block.

                           alert("Values Saved Successfully");

                        }

                    }]

Custom Toolbar item:

  • Save operation

In the following section, the way to enable the RTE standard toolbar items along with the custom toolbar items in the RTE control is explained.

HTML

JavaScript

CSHTML

Script

    <script>

        function onSave() {

            alert("Values Saved Successfully");

        }

    </script>

A sample of the standard toolbar items along with the custom toolbar items in the RTE control is available in the following location:

Sample Location

Article ID: Published Date: Last Revised Date: Platform: Control:
4319 03/25/2015 03/25/2015 JavaScript ejRTE
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon