Toolbar in React Rich text editor component
14 Oct 202424 minutes to read
The Rich Text Editor 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, you can customize the toolbar configurations easily to suit your needs.
To create Rich Text Editor with Markdown editing feature, inject the toolbar module to the RTE using the RichTextEditor.Inject(Toolbar) method.
The Rich Text Editor allows you to configure the different types of toolbar using the toolbarSettings.type property. The types of toolbar are:
- Expand
- MultiRow
Expand Toolbar
The default mode of toolbarSettings.type is Expand to hide the overflowing items in the next row. By clicking the expand arrow, view the overflowing toolbar items.
[Class-component]
/**
* Rich Text Editor - Expand Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
toolbarSettings = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'Expand'
};
render() {
return (<RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;/**
* Rich Text Editor - Expand Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public toolbarSettings: object = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'Expand'
}
public render() {
return (
<RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Expand Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let toolbarSettings = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'Expand'
};
return (<RichTextEditorComponent height={450} toolbarSettings={toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;/**
* Rich Text Editor - Expand Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App(){
let toolbarSettings: object = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'Expand'
}
return (
<RichTextEditorComponent height={450} toolbarSettings={toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;MultiRow toolbar
Set the toolbarSettings.type as MultiRow to hide the overflowing items in the next row. All toolbar items are visible.
[Class-component]
/**
* Rich Text Editor - MultiRow Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
toolbarSettings = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'MultiRow'
};
render() {
return (<RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;/**
* Rich Text Editor - MultiRow Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
private toolbarSettings: object = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'MultiRow'
}
public render() {
return (
<RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - MultiRow Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let toolbarSettings = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'MultiRow'
};
return (<RichTextEditorComponent height={450} toolbarSettings={toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;/**
* Rich Text Editor - MultiRow Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let toolbarSettings: object = {
items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
'LowerCase', 'UpperCase', '|',
'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
'Outdent', 'Indent', '|',
'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
],
type: 'MultiRow'
}
return (
<RichTextEditorComponent height={450} toolbarSettings={toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;Floating toolbar
By default, the toolbar is floating at the top of the Rich Text Editor on scrolling. It can be customized by specifying the offset of the floating toolbar from documents top position using floatingToolbarOffset.
Enable or disable the floating toolbar using enableFloating of the toolbarSetting property.
[Class-component]
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
checkboxObj;
rteObj;
toolbarSettings = {
enableFloating: false
};
onChange(args) {
this.rteObj.toolbarSettings.enableFloating = args.checked;
this.rteObj.dataBind();
}
render() {
return (<div>
<CheckBoxComponent checked={false} label='Enable Floating' ref={(scope) => { this.checkboxObj = scope; }} change={this.onChange = this.onChange.bind(this)}/>
<br />
<br />
<br />
<RichTextEditorComponent ref={(scope) => { this.rteObj = scope; }} height={450} toolbarSettings={this.toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>
</div>);
}
}
export default App;/**
* Rich Text Editor - Floating Toolbar Sample
*/
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public checkboxObj: CheckBoxComponent;
public rteObj: RichTextEditorComponent;
public toolbarSettings: object = {
enableFloating: false
}
public onChange(args: ChangeEventArgs): void {
this.rteObj.toolbarSettings.enableFloating = args.checked;
this.rteObj.dataBind();
}
public render() {
return (
<div>
<CheckBoxComponent checked={false} label='Enable Floating' ref={(scope) => { this.checkboxObj = scope! }} change={ this.onChange=this.onChange.bind(this) } />
<br />
<br />
<br />
<RichTextEditorComponent ref={(scope) => { this.rteObj = scope! }} height={450} toolbarSettings={this.toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
</div>
);
}
}
export default App;[functional-component]
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let checkboxObj;
let rteObj;
let toolbarSettings = {
enableFloating: false
};
function onChange(args) {
rteObj.toolbarSettings.enableFloating = args.checked;
rteObj.dataBind();
}
return (<div>
<CheckBoxComponent checked={false} label='Enable Floating' ref={(scope) => { checkboxObj = scope; }} change={onChange.bind(this)}/>
<br />
<br />
<br />
<RichTextEditorComponent ref={(scope) => { rteObj = scope; }} height={450} toolbarSettings={toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>
</div>);
}
export default App;/**
* Rich Text Editor - Floating Toolbar Sample
*/
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let checkboxObj: CheckBoxComponent;
let rteObj: RichTextEditorComponent;
let toolbarSettings: object = {
enableFloating: false
}
function onChange(args: ChangeEventArgs): void {
rteObj.toolbarSettings.enableFloating = args.checked;
rteObj.dataBind();
}
return (
<div>
<CheckBoxComponent checked={false} label='Enable Floating' ref={(scope) => {checkboxObj = scope! }} change={onChange.bind(this) } />
<br />
<br />
<br />
<RichTextEditorComponent ref={(scope) => {rteObj = scope! }} height={450} toolbarSettings={toolbarSettings}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
</div>
);
}
export default App;Toolbar items
The following table lists the tools available in the toolbar.
| Name | Icons | Summary | Initialization |
|---|---|---|---|
| Undo |  |
Allows to undo the actions. | toolbarSettings: { items: [‘Undo’] } |
| Redo |  |
Allows to redo the actions. | toolbarSettings: { items: [‘Redo’] } |
| Alignment |  |
Align the content with left, center, and right margin. | toolbarSettings: { items: [‘Alignments’] } |
| OrderedList |  |
Create a new list item (numbered). | toolbarSettings: { items: [‘OrderedList’] } |
| UnorderedList |  |
Create a new list item (bulleted). | toolbarSettings: { items: [‘UnorderedList’] } |
| Indent |  |
Allows to increase the indent level of the content. | toolbarSettings: { items: [‘Indent’] } |
| Outdent |  |
Allows to decrease the indent level of the content. | toolbarSettings: { items: [‘Outdent’] } |
| Hyperlink |  |
Creates a hyperlink to a text or image to a specific location in the content. | toolbarSettings: { items: [‘CreateLink’] } |
| Images |  |
Inserts an image from an online source or local computer. | toolbarSettings: { items: [‘Image’] } |
| LowerCase |  |
Change the case of selected text to lower in the content. | toolbarSettings: { items: [‘LowerCase’] } |
| UpperCase |  |
Change the case of selected text to upper in the content. | toolbarSettings: { items: [‘UpperCase’] } |
| SubScript |  |
Makes the selected text as subscript (lower). | toolbarSettings: { items: [‘SubScript’] } |
| SuperScript |  |
Makes the selected text as superscript (higher). | toolbarSettings: { items: [‘SuperScript’] } |
 |
Allows to print the editor content. | toolbarSettings: { items: [‘Print’] } |
|
| FontName |  |
Defines the fonts that appear under the Font Family DropDownList from the Rich Text Editor’s toolbar. | toolbarSettings: { items: [‘FontName’] } |
| FontSize |  |
Defines the font sizes that appear under the Font Size DropDownList from the Rich Text Editor’s toolbar. | toolbarSettings: { items: [‘FontSize’] } |
| FontColor |  |
Specifies an array of colors can be used in the colors pop-up for font color. | toolbarSettings: { items: [‘FontColor’] } |
| BackgroundColor |  |
Specifies an array of colors can be used in the colors pop-up for background color. | toolbarSettings: { items: [‘BackgroundColor’] } |
| Format |  |
An object with the options that will appear in the paragraph format drop-down from the toolbar. | toolbarSettings: { items: [‘Formats’] } |
| Blockquote |  |
Blockquotes visually highlight important text within an editor, emphasizing key information or quotations. | toobarSettings: { items: [‘Blockquote’]} |
| StrikeThrough |  |
Apply double line strike through formatting for the selected text. | toolbarSettings: { items: [‘StrikeThrough’] } |
| InlineCode |  |
Adds code-specific styling to selected text by highlighting it with a background color and using a monospace font for easy readability. | toolbarSettings: { items: [‘InlineCode’] } |
| ClearFormat |  |
The clear format tool is used to remove all formatting styles (such as bold, italic, underline, color, superscript, subscript, and more) from currently selected text. As a result, all the formatting text will be cleared and return to its default formatting styles. | toolbarSettings: { items: [‘ClearFormat’] } |
| FullScreen |  |
Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: [‘FullScreen’] } |
| SourceCode |  |
The RichTextBox includes the ability for users to directly edit the HTML code via Source View. If you made any modification in source view directly, synchronize with design view. | toolbarSettings: { items: [‘SourceCode’] } |
| NumberFormatList |  |
Allows to create list items with various list style types(numbered). | toolbarSettings: { items: [‘NumberFormatList’] } |
| BulletFormatList |  |
Allows to create list items with various list style types(bulleted). | toolbarSettings: { items: [‘BulletFormatList’] } |
| JustifyLeft |  |
Allows each line to begin at the same distance from the editor’s left-hand side. | toolbarSettings: { items: [‘JustifyLeft’] } |
| JustifyCenter |  |
There is an even space on each side of each line since the text is not aligned to the left or right margins. | toolbarSettings: { items: [‘JustifyCenter’] } |
| JustifyRight |  |
Allows each line to end at the same distance from the editor’s right-hand side. | toolbarSettings: { items: [‘JustifyRight’] } |
| JustifyFull |  |
The text is aligned with both right and left margins. | toolbarSettings: { items: [‘JustifyFull’] } |
| Bold |  |
Text that is thicker and darker than usual. | toolbarSettings: { items: [‘Bold’] } |
| Italic |  |
Shows a text that is leaned to the right. | toolbarSettings: { items: [‘Italic’] } |
| Underline |  |
The underline is added to the selected text. | toolbarSettings: { items: [‘Underline’] } |
| ClearAll |  |
Removes all styles that have been applied to the selected text. | toolbarSettings: { items: [‘ClearAll’] } |
| Cut |  |
Removes the text from its current location and places it into the clipboard. | toolbarSettings: { items: [‘Cut’] } |
| Copy |  |
The selected item is copied and pasted into the clipboard. | toolbarSettings: { items: [‘Copy’] } |
| Paste |  |
Allows you to insert a clipboard item into a specific location. | toolbarSettings: { items: [‘Paste’] } |
| OpenLink |  |
To open the URL link that is attached to the selected text. | toolbarSettings: { items: [‘OpenLink’] } |
| EditLink |  |
Allows you to change the URL that has been attached to a specific item. | toolbarSettings: { items: [‘EditLink’] } |
| CreateTable |  |
Create a table with defined columns and rows. | toolbarSettings: { items: [‘CreateTable’] } |
| RemoveTable |  |
Removes the selected table and its contents. | toolbarSettings: { items: [‘TableRemove’] } |
| Replace |  |
Replace the selected image with another image. | toolbarSettings: { items: [‘Replace’] } |
| Align | |
The image can be aligned to the right, left, or center. | toolbarSettings: { items: [‘Align’] } |
| Remove | |
Allows to remove the selected image from the editor. | toolbarSettings: { items: [‘Remove’] } |
| OpenImageLink | |
Opens the link that is attached to the selected image. | toolbarSettings: { items: [‘OpenImageLink’] } |
| EditImageLink | |
Allows to edit the link that is attached to the selected image. | toolbarSettings: { items: [‘EditImageLink’] } |
| RemoveImageLink |  |
Removes the link that is attached to the selected image. | toolbarSettings: { items: [‘RemoveImageLink’] } |
| InsertLink | |
Allows users to add a link to a particular item. | toolbarSettings: { items: [‘InsertLink’] } |
| Display |  |
Allows you to choose whether an image should be shown inline or as a block. | toolbarSettings: { items: [‘Display’] } |
| AltText |  |
To display image description when an image on a Web page cannot be displayed. | toolbarSettings: { items: [‘AltText’] } |
| Dimension |  |
Allows you to customize the image’s height and width. | toolbarSettings: { items: [‘Dimension’] } |
| Maximize | |
Stretches the editor to the maximum width and height of the browser window. | toolbarSettings: { items: [‘Maximize’] } |
| Minimize |  |
Shrinks the editor to the default width and height. | toolbarSettings: { items: [‘Minimize’] } |
| Preview |  |
Allows to see how the editor’s content looks in a browser. | toolbarSettings: { items: [‘Preview’] } |
| InsertCode | |
Represents preformatted text which is to be presented exactly as written in the HTML file. | toolbarSettings: { items: [‘InsertCode’] } |
| RemoveLink | |
Allows you to remove the applied link from the selected item. | toolbarSettings: { items: [‘RemoveLink’] } |
| TableHeader |  |
Allows you to add a table header. | toolbarSettings: { items: [‘TableHeader’] } |
| TableColumns |  |
Shows the dropdown to insert a column or delete the selected column. | toolbarSettings: { items: [‘TableColumns’] } |
| TableRows |  |
Shows the dropdown to insert a row ors delete the selected row. | toolbarSettings: { items: [‘TableRows’] } |
| TableCellHorizontalAlign | |
Allows the table cell content to be aligned horizontally. | toolbarSettings: { items: [‘TableCellHorizontalAlign’] } |
| TableCellVerticalAlign |  |
Allows the table cell content to be aligned vertically. | toolbarSettings: { items: [‘TableCellVerticalAlign’] } |
| TableEditProperties |  |
Allows you to change the table width, padding, and cell spacing styles. | toolbarSettings: { items: [‘TableEditProperties’] } |
By default, tools will be arranged in the following order.
items: ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'Blockquote', 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo']The tools order can be customized as our application requirement. If you are not specifying any tools order, the editor will create the toolbar with default items.
Custom tool
The Rich Text Editor allows you to configure your own commands to its toolbar using the toolbarSettings property. The command can be plain text, icon, or HTML template. The order and the group can also be defined where the command should be included. Bind the action to the command by getting its instance.
This sample shows how to add your own commands to the toolbar of the Rich Text Editor. The Ω command is added to insert special characters in the editor. By clicking the Ω command, it will show the special characters list, and then choose the character to be inserted in the editor.
The following code snippet illustrates custom tool with tooltip text which will be included in items field of the toolbarSettings property.
In the following sample, once Rich Text Editor control is created, the concern event will be created; the Dialog component can be rendered and target as RTE content.
{
template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div></button>',
undo: true,
click: this.onClick.bind(this),
tooltipText: 'Insert Symbol'
}[Class-component]
/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteObj;
// set the value to Rich Text Editor
template = `<div style="display:block;"><p style="margin-right:10px">The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p></div>`;
selection = new NodeSelection();
ranges;
dialogObj;
// Rich Text Editor items list
items = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div></button>',
undo: true,
click: this.onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
toolbarSettings = {
items: this.items
};
dlgButtons = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: this.onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: this.onCancel }
];
header = 'Special Characters';
target = document.getElementById('rteSection');
height = 'auto';
dialogCreate() {
const dialogCtn = document.getElementById('rteSpecial_char');
dialogCtn.onclick = (e) => {
const target = e.target;
const activeEle = this.dialogObj.element.querySelector('.char_block.e-active');
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
onInsert() {
const activeEle = this.dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
this.ranges.insertNode(document.createTextNode(activeEle.textContent));
}
this.dialogOverlay();
}
onClick() {
this.ranges = this.selection.getRange(document);
this.dialogObj.width = this.rteObj.element.offsetWidth * 0.5;
this.dialogObj.content = document.getElementById('rteSpecial_char');
this.dialogObj.dataBind();
this.dialogObj.show();
}
dialogOverlay() {
const activeEle = this.dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.dialogObj.hide();
}
onCancel(e) {
const activeEle = this.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.hide();
}
render() {
const hideDiv = { display: "none" };
return (<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { this.rteObj = scope; }} valueTemplate={this.template} toolbarSettings={this.toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]}/>
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { this.dialogObj = scope; }} buttons={this.dlgButtons} overlayClick={this.dialogOverlay = this.dialogOverlay.bind(this)} header={this.header} visible={false} showCloseIcon={false} target={'#rteSection'} height={this.height} created={this.dialogCreate = this.dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'}/>
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>);
}
}
export default App;/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public rteObj: RichTextEditorComponent;
// set the value to Rich Text Editor
public template: string = `<div style="display:block;"><p style="margin-right:10px">The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p></div>`;
public selection: NodeSelection = new NodeSelection();
public ranges: Range;
public dialogObj: DialogComponent;
// Rich Text Editor items list
public items: object = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div></button>',
undo: true,
click: this.onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
public toolbarSettings: object = {
items: this.items
};
public dlgButtons: any = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: this.onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: this.onCancel }
];
public header: string = 'Special Characters';
public target: Element = document.getElementById('rteSection') as any;
public height: any = 'auto';
public dialogCreate(): void {
const dialogCtn: HTMLElement = document.getElementById('rteSpecial_char') as HTMLElement;
dialogCtn.onclick = (e: Event) => {
const target: HTMLElement = e.target as HTMLElement;
const activeEle: Element = this.dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
public onInsert(): void {
const activeEle: Element = this.dialogObj.element.querySelector('.char_block.e-active') as any;
if (activeEle) {
this.ranges.insertNode(document.createTextNode(activeEle.textContent as string));
}
this.dialogOverlay();
}
public onClick(): void {
this.ranges = this.selection.getRange(document);
this.dialogObj.width = (this.rteObj as any).element.offsetWidth * 0.5;
this.dialogObj.content = document.getElementById('rteSpecial_char') as HTMLElement;
this.dialogObj.dataBind();
this.dialogObj.show();
}
public dialogOverlay(): void {
const activeEle: Element = this.dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.dialogObj.hide();
}
public onCancel(e: any): void {
const activeEle: Element = (this as any).element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
(this as any).hide();
}
public render() {
const hideDiv = { display: "none" };
return (
<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { this.rteObj = scope! }}
valueTemplate={this.template} toolbarSettings={this.toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]} />
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { this.dialogObj = scope! }}
buttons={this.dlgButtons} overlayClick={this.dialogOverlay = this.dialogOverlay.bind(this) } header={this.header} visible={false}
showCloseIcon={false} target={'#rteSection'} height={this.height} created={this.dialogCreate = this.dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'} />
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteObj;
// set the value to Rich Text Editor
let template = `<div style="display:block;"><p style="margin-right:10px">The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p></div>`;
let selection = new NodeSelection();
let ranges;
let dialogObj;
// Rich Text Editor items list
let items = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div></button>',
undo: true,
click: onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
let toolbarSettings = {
items: items
};
let dlgButtons = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: onCancel }
];
let header = 'Special Characters';
let target = document.getElementById('rteSection');
let height = 'auto';
function dialogCreate() {
const dialogCtn = document.getElementById('rteSpecial_char');
dialogCtn.onclick = (e) => {
const target = e.target;
const activeEle = dialogObj.element.querySelector('.char_block.e-active');
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
function onInsert() {
const activeEle = dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
ranges.insertNode(document.createTextNode(activeEle.textContent));
}
dialogOverlay();
}
function onClick() {
ranges = selection.getRange(document);
dialogObj.width = rteObj.element.offsetWidth * 0.5;
dialogObj.content = document.getElementById('rteSpecial_char');
dialogObj.dataBind();
dialogObj.show();
}
function dialogOverlay() {
const activeEle = dialogObj.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
dialogObj.hide();
}
function onCancel(e) {
const activeEle = this.element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
this.hide();
}
const hideDiv = { display: "none" };
return (<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { rteObj = scope; }} valueTemplate={template} toolbarSettings={toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]}/>
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { dialogObj = scope; }} buttons={dlgButtons} overlayClick={dialogOverlay.bind(this)} header={header} visible={false} showCloseIcon={false} target={'#rteSection'} height={height} created={dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'}/>
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>);
}
export default App;/**
* Rich Text Editor - Custom Tool Sample
*/
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App(){
let rteObj: RichTextEditorComponent;
// set the value to Rich Text Editor
let template: string = `<div style="display:block;"><p style="margin-right:10px">The custom command "insert special character" is configured as the last item of the toolbar. Click on the command and choose the special character you want to include from the popup.</p></div>`;
let selection: NodeSelection = new NodeSelection();
let ranges: Range;
let dialogObj: DialogComponent;
// Rich Text Editor items list
let items: object = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments', 'OrderedList',
'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode',
{
template: '<button class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar" style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 500;"> Ω</div></button>',
undo: true,
click: onClick.bind(this),
tooltipText: 'Insert Symbol'
}, '|', 'Undo', 'Redo'
];
// Rich Text Editor ToolbarSettings
let toolbarSettings: object = {
items: items
};
let dlgButtons: any = [
{ buttonModel: { content: "Insert", isPrimary: true }, click: onInsert.bind(this) },
{ buttonModel: { content: 'Cancel' }, click: onCancel }
];
let header: string = 'Special Characters';
let target: Element = document.getElementById('rteSection') as any;
let height: any = 'auto';
function dialogCreate(): void {
const dialogCtn: HTMLElement = document.getElementById('rteSpecial_char') as HTMLElement;
dialogCtn.onclick = (e: Event) => {
const target: HTMLElement = e.target as HTMLElement;
const activeEle: Element = dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (target.classList.contains('char_block')) {
target.classList.add('e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
}
};
}
function onInsert(): void {
const activeEle: Element = dialogObj.element.querySelector('.char_block.e-active') as any;
if (activeEle) {
ranges.insertNode(document.createTextNode(activeEle.textContent as string));
}
dialogOverlay();
}
function onClick(): void {
ranges = selection.getRange(document);
dialogObj.width = (rteObj as any).element.offsetWidth * 0.5;
dialogObj.content = document.getElementById('rteSpecial_char') as HTMLElement;
dialogObj.dataBind();
dialogObj.show();
}
function dialogOverlay(): void {
const activeEle: Element = dialogObj.element.querySelector('.char_block.e-active') as HTMLElement;
if (activeEle) {
activeEle.classList.remove('e-active');
}
dialogObj.hide();
}
function onCancel(e: any): void {
const activeEle: Element = (this as any).element.querySelector('.char_block.e-active');
if (activeEle) {
activeEle.classList.remove('e-active');
}
(this as any).hide();
}
const hideDiv = { display: "none" };
return (
<div className='control-pane'>
<div className='control-section e-rte-custom-tbar-section' id="rteCustomTool">
<div className='rte-control-section' id='rteSection'>
<RichTextEditorComponent id="defaultRTE" ref={(scope) => { rteObj = scope! }}
valueTemplate={template} toolbarSettings={toolbarSettings}>
<Inject services={[HtmlEditor, Toolbar, Link, Image, QuickToolbar]} />
</RichTextEditorComponent>
<DialogComponent id='customTbarDlg' ref={(scope) => { dialogObj = scope! }}
buttons={dlgButtons} overlayClick={dialogOverlay.bind(this) } header={header} visible={false}
showCloseIcon={false} target={'#rteSection'} height={height} created={dialogCreate.bind(this)} isModal={true} cssClass={'e-rte-elements'}/>
<div id="customTbarDialog" style={hideDiv}>
<div id="rteSpecial_char">
<div className="char_block" title="^">^</div>
<div className="char_block" title="_">_</div>
<div className="char_block" title="`">`</div>
<div className="char_block" title="{">{</div>
<div className="char_block" title="|">|</div>
<div className="char_block" title="}">}</div>
<div className="char_block" title="~">~</div>
<div className="char_block" title=" "> </div>
<div className="char_block" title="¡">¡</div>
<div className="char_block" title="¢">¢</div>
<div className="char_block" title="£">£</div>
<div className="char_block" title="¤">¤</div>
<div className="char_block" title="¥">¥</div>
<div className="char_block" title="₹">₹</div>
<div className="char_block" title="¦">¦</div>
<div className="char_block" title="§">§</div>
<div className="char_block" title="¨">¨</div>
<div className="char_block" title="©">©</div>
<div className="char_block" title="ª">ª</div>
<div className="char_block" title="«">«</div>
<div className="char_block" title="¬">¬</div>
<div className="char_block" title="­">­</div>
<div className="char_block" title="®">®</div>
<div className="char_block" title="¯">¯</div>
<div className="char_block" title="°">°</div>
<div className="char_block" title="±">±</div>
<div className="char_block" title="²">²</div>
<div className="char_block" title="³">³</div>
<div className="char_block" title="´">´</div>
<div className="char_block" title="µ">µ</div>
<div className="char_block" title="¶">¶</div>
<div className="char_block" title="·">·</div>
<div className="char_block" title="¸">¸</div>
<div className="char_block" title="¹">¹</div>
<div className="char_block" title="º">º</div>
<div className="char_block" title="»">»</div>
<div className="char_block" title="¼">¼</div>
<div className="char_block" title="½">½</div>
<div className="char_block" title="¾">¾</div>
<div className="char_block" title="¿">¿</div>
<div className="char_block" title="À">À</div>
<div className="char_block" title="Á">Á</div>
<div className="char_block" title="Â">Â</div>
<div className="char_block" title="Ã">Ã</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default App;The focus will be lost while rendering the required component for the custom toolbar, causing it to render outside the Rich Text Editor and triggering a blur event. During that time, proper functionality will not be achievable. Therefore, it is recommended to set the cssClass property or class as
e-rte-elementsin the dependency component.
Quick inline toolbar
Quick commands are opened as context-menu on clicking the corresponding element. The commands must be passed as string collection to image, text, and link attributes of the quickToolbarSettings property.
| Target element | Default quick toolbar items |
|---|---|
| Image | ‘Replace’, ‘Align’, ‘Caption’, ‘Remove’, ‘InsertLink’, ‘Display’, ‘AltText’, and ‘Dimension’ |
| Link | ‘Open’, ‘Edit’, and ‘UnLink’ |
| Text | null (Any toolbar items in the Rich Text Editor can be configured here). |
| Table | ‘TableHeader’, ‘TableRows’, ‘TableColumns’, ‘BackgroundColor’, ‘TableRemove’, ‘Alignments’, ‘TableCellVerticalAlign’ and ‘Styles’ |
Custom tool can be added to the corresponding quick toolbar, using the quickToolbarSettings property.
The following sample demonstrates the option to insert the image to the Rich Text Editor content as well as option to rotate the image through the quick toolbar. The image rotation functionalities have been achieved through the toolbarClick event.
[Class-component]
/**
* Rich Text Editor - Quick Inline Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
rteObj;
quickToolbarSettings = {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension',
{
template: '<button class="e-tbar-btn e-btn" id="roatateLeft"><span class="e-btn-icon e-icons e-rotate-left"></span>',
tooltipText: 'Rotate Left'
},
{
template: '<button class="e-tbar-btn e-btn" id="roatateRight"><span class="e-btn-icon e-icons e-rotate-right"></span>',
tooltipText: 'Rotate Right'
}
]
};
onToolbarClick(e) {
const nodeObj = new NodeSelection();
const range = nodeObj.getRange(this.rteObj.contentModule.getDocument());
const imgEle = nodeObj.getNodeCollection(range)[0];
if (e.item.tooltipText === 'Rotate Right') {
const transform = (imgEle.style.transform === '') ? 0 :
parseInt(imgEle.style.transform.split('(')[1].split(')')[0], 10);
imgEle.style.transform = 'rotate(' + (transform + 90) + 'deg)';
}
else if (e.item.tooltipText === 'Rotate Left') {
const transform = (imgEle.style.transform === '') ? 0 :
Math.abs(parseInt(imgEle.style.transform.split('(')[1].split(')')[0], 10));
imgEle.style.transform = 'rotate(-' + (transform + 90) + 'deg)';
}
}
render() {
return (<RichTextEditorComponent height={450} ref={(richtexteditor) => { this.rteObj = richtexteditor; }} quickToolbarSettings={this.quickToolbarSettings} toolbarClick={this.onToolbarClick = this.onToolbarClick.bind(this)}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
}
export default App;/**
* Rich Text Editor - Quick Inline Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public rteObj: RichTextEditorComponent;
public quickToolbarSettings: object = {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension',
{
template: '<button class="e-tbar-btn e-btn" id="roatateLeft"><span class="e-btn-icon e-icons e-rotate-left"></span>',
tooltipText: 'Rotate Left'
},
{
template: '<button class="e-tbar-btn e-btn" id="roatateRight"><span class="e-btn-icon e-icons e-rotate-right"></span>',
tooltipText: 'Rotate Right'
}
]
}
public onToolbarClick(e: any): void {
const nodeObj: NodeSelection = new NodeSelection();
const range: Range = nodeObj.getRange((this.rteObj as any).contentModule.getDocument());
const imgEle: HTMLElement = nodeObj.getNodeCollection(range)[0] as HTMLElement;
if (e.item.tooltipText === 'Rotate Right') {
const transform: number = (imgEle.style.transform === '') ? 0 :
parseInt((imgEle as any).style.transform.split('(')[1].split(')')[0], 10);
imgEle.style.transform = 'rotate(' + (transform + 90) + 'deg)';
} else if (e.item.tooltipText === 'Rotate Left') {
const transform: number = (imgEle.style.transform === '') ? 0 :
Math.abs(parseInt((imgEle as any).style.transform.split('(')[1].split(')')[0], 10));
imgEle.style.transform = 'rotate(-' + (transform + 90) + 'deg)';
}
}
public render() {
return (
<RichTextEditorComponent height={450} ref={(richtexteditor) => { this.rteObj = richtexteditor! }} quickToolbarSettings={this.quickToolbarSettings} toolbarClick={this.onToolbarClick = this.onToolbarClick.bind(this)}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
}
export default App;[Functional-component]
/**
* Rich Text Editor - Quick Inline Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {
let rteObj;
let quickToolbarSettings = {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension',
{
template: '<button class="e-tbar-btn e-btn" id="roatateLeft"><span class="e-btn-icon e-icons e-rotate-left"></span>',
tooltipText: 'Rotate Left'
},
{
template: '<button class="e-tbar-btn e-btn" id="roatateRight"><span class="e-btn-icon e-icons e-rotate-right"></span>',
tooltipText: 'Rotate Right'
}
]
};
function onToolbarClick(e) {
const nodeObj = new NodeSelection();
const range = nodeObj.getRange(rteObj.contentModule.getDocument());
const imgEle = nodeObj.getNodeCollection(range)[0];
if (e.item.tooltipText === 'Rotate Right') {
const transform = (imgEle.style.transform === '') ? 0 :
parseInt(imgEle.style.transform.split('(')[1].split(')')[0], 10);
imgEle.style.transform = 'rotate(' + (transform + 90) + 'deg)';
}
else if (e.item.tooltipText === 'Rotate Left') {
const transform = (imgEle.style.transform === '') ? 0 :
Math.abs(parseInt(imgEle.style.transform.split('(')[1].split(')')[0], 10));
imgEle.style.transform = 'rotate(-' + (transform + 90) + 'deg)';
}
}
return (<RichTextEditorComponent height={450} ref={(richtexteditor) => { rteObj = richtexteditor; }} quickToolbarSettings={quickToolbarSettings} toolbarClick={onToolbarClick.bind(this)}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
</RichTextEditorComponent>);
}
export default App;/**
* Rich Text Editor - Quick Inline Toolbar Sample
*/
import { HtmlEditor, Image, Inject, Link, NodeSelection, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App (){
let rteObj: RichTextEditorComponent;
let quickToolbarSettings: object = {
image: [
'Replace', 'Align', 'Caption', 'Remove', 'InsertLink', 'OpenImageLink', '-',
'EditImageLink', 'RemoveImageLink', 'Display', 'AltText', 'Dimension',
{
template: '<button class="e-tbar-btn e-btn" id="roatateLeft"><span class="e-btn-icon e-icons e-rotate-left"></span>',
tooltipText: 'Rotate Left'
},
{
template: '<button class="e-tbar-btn e-btn" id="roatateRight"><span class="e-btn-icon e-icons e-rotate-right"></span>',
tooltipText: 'Rotate Right'
}
]
}
function onToolbarClick(e: any): void {
const nodeObj: NodeSelection = new NodeSelection();
const range: Range = nodeObj.getRange((rteObj as any).contentModule.getDocument());
const imgEle: HTMLElement = nodeObj.getNodeCollection(range)[0] as HTMLElement;
if (e.item.tooltipText === 'Rotate Right') {
const transform: number = (imgEle.style.transform === '') ? 0 :
parseInt((imgEle as any).style.transform.split('(')[1].split(')')[0], 10);
imgEle.style.transform = 'rotate(' + (transform + 90) + 'deg)';
} else if (e.item.tooltipText === 'Rotate Left') {
const transform: number = (imgEle.style.transform === '') ? 0 :
Math.abs(parseInt((imgEle as any).style.transform.split('(')[1].split(')')[0], 10));
imgEle.style.transform = 'rotate(-' + (transform + 90) + 'deg)';
}
}
return (
<RichTextEditorComponent height={450} ref={(richtexteditor) => { rteObj = richtexteditor! }} quickToolbarSettings={quickToolbarSettings} toolbarClick={onToolbarClick.bind(this)}>
<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>
<li>
<p>Contains undo/redo manager.</p>
</li>
<li>
<p>Creates bulleted and numbered lists.</p>
</li>
</ul>
<Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
</RichTextEditorComponent>
);
}
export default App;Rich Text Editor features are segregated into individual feature-wise modules. To use quick toolbar, inject the quick toolbar module using the
RichTextEditor.Inject(image, link).