How to display full toolbar items of JavaScript RichTextEditor?
Description
The JavaScript 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.
Solution
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:
- Alignment Formatting Tools: Left, right, center, and justify.
- 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.
- Bulleting: Ordered and unordered list.
- Style: Bold, Italic, Underline, and Strikethrough.
- Subscript and Superscript: Text with subscript and superscript placed after or before the baseline respectively.
- Font options.
Font Name - Typeface that is applied to the document text.
Font Size - Determines how big or small the text should be.
- Format Style: Predefined sets of formatting features that can be applied to block and to make elements of the document inline.
- Order list and unorder list
- Clipboard actions like cut, copy, paste
- Clear format and clear content
- Insert hyperlink, image, video
- Adding and customizing the table
- Upper and lower case conversion.
- Indent.
- Undo and Redo operations.
- Full screen mode
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 customTools option in the RTE control and enable this custom toolbar item through the tools option present in the RTE control.
// Custom Toolbar Items. customTools: [{ text: "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
<textarea id="rteSample" rows="10" cols="30" style="width: 740px; height: 440px"> <p><b>Description:</b></p> <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> <p><b>Functional Specifications/Requirements:</b></p> <ol><li><p>Provide the tool bar support, it’s also customizable.</p></li><li><p>Options to get the HTML elements with styles.</p></li><li><p>Support to insert image from a defined path.</p></li><li><p>Footer elements and styles(tag / Element information , Action button (Upload, Cancel))</p></li><li><p>Re-size the editor support. </p></li><li><p>Provide efficient public methods and client side events.</p></li><li><p>Keyboard navigation support.</p></li></ol> </textarea>
JavaScript
$("#rteSample").ejRTE({ toolsList: ["formatStyle", "font", "style", "scripts", "alignment", "lists", "indenting", "copyPaste", "doAction", "clear", "links", "images", "tables", "casing","customTools"], tools: { font: ["fontName", "fontSize", "fontColor", "backgroundColor"], style: ["bold", "italic", "underline", "strikethrough"], alignment: ["justifyLeft", "justifyCenter", "justifyRight", "justifyFull"], lists: ["unorderedList", "orderedList"], copyPaste: ["cut", "copy", "paste"], doAction: ["undo", "redo"], clear: ["clearFormat", "clearAll"], links: ["createLink"], images: ["image", "video"], tables: ["createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable"], scripts: ["superscript", "subscript"], casing: ["upperCase", "lowerCase"], paragraph: ["paragraph"], // Custom Toolbar Items. customTools: [{ name: "saveTool", tooltip: "Save Button", css: "saveButton", text:"saveButton", action: function () { // Writes your action code block. alert("Values Saved Successfully"); } }] } });
CSHTML
@{List<String> font = new List<string>() { "fontName", "fontSize", "fontColor", "backgroundColor" }; List<String> style = new List<string>() { "bold", "italic", "underline", "strikethrough" }; List<String> alignment = new List<string>() { "justifyLeft", "justifyCenter", "justifyRight", "justifyFull" }; List<String> lists = new List<string>() { "unorderedList", "orderedList" }; List<String> copyPaste = new List<string>() { "cut", "copy", "paste" }; List<String> doAction = new List<string>() { "undo", "redo" }; List<String> clear = new List<string>() { "clearFormat", "clearAll" }; List<String> tables = new List<string>() { "createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "deleteTable" }; List<String> links = new List<string>() { "createLink" }; List<String> images = new List<string>() { "image", "video" }; List<String> scripts = new List<string>() { "superscript", "subscript" }; List<String> casing = new List<string>() { "upperCase", "lowerCase" }; List<String> formatStyle = new List<string>() { "format" }; } @{Html.EJ().RTE("rteSample").Width("100%").ContentTemplate(@<p> <p><b>Description:</b></p> <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> <p><b>Functional Specifications/Requirements:</b></p> <ol><li><p>Provide the tool bar support, it’s also customizable.</p></li><li><p>Options to get the HTML elements with styles.</p></li><li><p>Support to insert image from a defined path.</p></li><li><p>Footer elements and styles(tag / Element information , Action button (Upload, Cancel))</p></li><li><p>Re-size the editor support. </p></li><li><p>Provide efficient public methods and client side events.</p></li><li><p>Keyboard navigation support.</p></li></ol> </p>).ShowFooter(true) .Tools(tool => tool.Clear(clear) .FormatStyle(formatStyle) .Tables(tables) .Links(links) .Images(images) .Effects(scripts) .Casing(casing) .Font(font) .Styles(style) .Alignment(alignment) .Lists(lists) .Clipboard(copyPaste) .DoAction(doAction) .CustomTools(custom => custom.Name("saveTool") .Tooltip("Save Button") .Css("saveButton").Text("Save Button") .Action("onSave").Add())) .Render();}
Script
<script> function onSave() { alert("Values Saved Successfully"); } </script>
Output of the customTools in RTE control.
Live demo in JS Playground: https://jsplayground.syncfusion.com/0dcujapa
Conclusion
I hope you enjoyed learning about how to display full toolbar items of JavaScript RichTextEditor.
You can refer to our JavaScript RichTextEditor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript RichTextEditor example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!