Toolbar Types in TypeScript Rich Text Editor
The Rich Text Editor toolbar provides formatting, styling, and editing tools. Use the type field in the toolbarSettings property to change the toolbar layout.
To create Rich Text Editor with Toolbar feature, inject the toolbar module to the Rich Text Editor using the
RichTextEditor.Inject(Toolbar)method.
Toolbar types
The accepted values for type are Expand (default), MultiRow, Scrollable, and Popup. Use the value that matches the layout you need.
Expanding the toolbar
Setting the type to Expand in toolbarSettings groups the toolbar items so that they fit on a single row. Items that do not fit are collapsed into an expand menu.
import { RichTextEditor, Toolbar, HtmlEditor, ToolbarType, Image, Table, Link } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, HtmlEditor, Image, Table, Link);
let editor: RichTextEditor = new RichTextEditor({
height: 340,
value: ` <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul><li><p>Provides <IFRAME> and <DIV> modes</p></li>
<li><p>Capable of handling markdown editing.</p></li>
<li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p>Provides a fully customizable toolbar.</p></li>
<li><p>Provides HTML view to edit the source directly for developers.</p></li>
<li><p>Supports third-party library integration.</p></li>
<li><p>Allows preview of modified content before saving it.</p></li>
<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
</ul>`,
toolbarSettings: {
type: ToolbarType.Expand,
items: [
'Undo',
'Redo',
'|',
'Bold',
'Italic',
'Underline',
'StrikeThrough',
'InlineCode',
'SuperScript',
'SubScript',
'|',
'FontName',
'FontSize',
'FontColor',
'BackgroundColor',
'|',
'LowerCase',
'UpperCase',
'|',
'Formats',
'Alignments',
'Blockquote',
'|',
'NumberFormatList',
'BulletFormatList',
'|',
'Outdent',
'Indent',
'|',
'CreateLink',
'Image',
'CreateTable',
'|',
'ClearFormat',
'SourceCode',
],
}});
editor.appendTo('#editor');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/35.1.37/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='editor'>
</div>
</div>
</body>
</html>Configuring a multi-row toolbar
Setting the type to MultiRow in toolbarSettings arranges the toolbar items across multiple rows, displaying every configured toolbar item without collapsing.
import { RichTextEditor, Toolbar, HtmlEditor, ToolbarType, Image, Table, Link } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, HtmlEditor, Image, Table, Link);
let editor: RichTextEditor = new RichTextEditor({
height: 340,
value: ` <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul><li><p>Provides <IFRAME> and <DIV> modes</p></li>
<li><p>Capable of handling markdown editing.</p></li>
<li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p>Provides a fully customizable toolbar.</p></li>
<li><p>Provides HTML view to edit the source directly for developers.</p></li>
<li><p>Supports third-party library integration.</p></li>
<li><p>Allows preview of modified content before saving it.</p></li>
<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
</ul>`,
toolbarSettings: {
type: ToolbarType.MultiRow,
items: [
'Undo','Redo','|','Bold','Italic','Underline','StrikeThrough','InlineCode','SuperScript',
'SubScript','|','FontName','FontSize','FontColor','BackgroundColor','|','LowerCase','UpperCase',
'|','Formats','Alignments','Blockquote','|','NumberFormatList','BulletFormatList','|','Outdent',
'Indent','|','CreateLink','Image','CreateTable','|','ClearFormat','SourceCode',
],
}});
editor.appendTo('#editor');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/35.1.37/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='editor'>
</div>
</div>
</body>
</html>Implementing a scrollable toolbar
Setting the type to Scrollable in toolbarSettings will display the toolbar items in a single line, enabling horizontal scrolling in the toolbar.
import { RichTextEditor, Toolbar, HtmlEditor, ToolbarType, Image, Table, Link } from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, HtmlEditor, Image, Table, Link);
let editor: RichTextEditor = new RichTextEditor({
height: 340,
value: ` <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul><li><p>Provides <IFRAME> and <DIV> modes</p></li>
<li><p>Capable of handling markdown editing.</p></li>
<li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p>Provides a fully customizable toolbar.</p></li>
<li><p>Provides HTML view to edit the source directly for developers.</p></li>
<li><p>Supports third-party library integration.</p></li>
<li><p>Allows preview of modified content before saving it.</p></li>
<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
</ul>`,
toolbarSettings: {
type: ToolbarType.Scrollable,
items: [
'Undo','Redo','|','Bold','Italic','Underline','StrikeThrough','InlineCode','SuperScript','SubScript',
'|','FontName','FontSize','FontColor','BackgroundColor','|','LowerCase','UpperCase','|','Formats',
'Alignments','Blockquote','|','NumberFormatList','BulletFormatList','|','Outdent','Indent','|',
'CreateLink','Image','CreateTable','|','ClearFormat','SourceCode',
],
}});
editor.appendTo('#editor');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/35.1.37/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='editor'>
</div>
</div>
</body>
</html>Configuring a popup toolbar
Setting the type to Popup in toolbarSettings will display overflowing toolbar items into a popup container, optimizing the toolbar layout for limited space and smaller screens.
import { RichTextEditor, Toolbar, HtmlEditor, ToolbarType, Image, Table, Link, QuickToolbar, PasteCleanup} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, HtmlEditor, Image, Table, Link, QuickToolbar, PasteCleanup);
let editor: RichTextEditor = new RichTextEditor({
height: 340,
value: ` <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul><li><p>Provides <IFRAME> and <DIV> modes</p></li>
<li><p>Capable of handling markdown editing.</p></li>
<li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p>Provides a fully customizable toolbar.</p></li>
<li><p>Provides HTML view to edit the source directly for developers.</p></li>
<li><p>Supports third-party library integration.</p></li>
<li><p>Allows preview of modified content before saving it.</p></li>
<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
</ul>`,
toolbarSettings: {
type: ToolbarType.Popup
}});
editor.appendTo('#editor');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/35.1.37/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='editor'>
</div>
</div>
</body>
</html>Creating a sticky toolbar
By default, the toolbar remains fixed at the top of the Rich Text Editor when the page is scrolled. You can enable or disable this behavior using the enableFloating property of toolbarSettings. The default value is true.
To control the vertical distance (in pixels) between the sticky toolbar and the top of the viewport, set floatingToolbarOffset to a numeric value. The default is 0.
Additionally, you can enable or disable the floating toolbar using the enableFloating property.
import { RichTextEditor, Toolbar, HtmlEditor } from '@syncfusion/ej2-richtexteditor';
import { CheckBox, ChangeEventArgs } from '@syncfusion/ej2-buttons';
RichTextEditor.Inject(Toolbar, HtmlEditor);
let editor: RichTextEditor = new RichTextEditor({
height: 340,
toolbarSettings: {
enableFloating: false
},
value: ` <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul><li><p>Provides <IFRAME> and <DIV> modes</p></li>
<li><p>Capable of handling markdown editing.</p></li>
<li><p>Contains a modular library to load the necessary functionality on demand.</p></li>
<li><p>Provides a fully customizable toolbar.</p></li>
<li><p>Provides HTML view to edit the source directly for developers.</p></li>
<li><p>Supports third-party library integration.</p></li>
<li><p>Allows preview of modified content before saving it.</p></li>
<li><p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p></li>
</ul>`});
editor.appendTo('#editor');
let float: CheckBox = new CheckBox({
// set false for enable the checked state at initial rendering
checked: false,
label: 'Enable Floating',
// bind change event
change: (args: ChangeEventArgs) => {
editor.toolbarSettings.enableFloating = (args as any).checked;
editor.dataBind();
}
});
float.appendTo('#float');<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 Rich Text Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/35.1.37/tailwind3.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='editor'>
</div>
<input type="checkbox" id="float" checked="false">
</div>
</body>
</html>