Toolbar Configuration in React Markdown Editor component

4 Sep 202524 minutes to read

By default, the React Markdown Editor displays the following toolbar items:

Bold , Italic , | , Formats , Blockquote, OrderedList , UnorderedList , | , CreateLink , Image , | , SourceCode , Undo , Redo

These default items cover essential text editing features, such as text formatting, lists, and linking.

Configure the toolbar layout type property in toolbarSettings. Available types:

Expand: Hides overflowing items, accessible via an expand arrow (recommended for compact layouts).
MultiRow: Displays items across multiple rows, keeping all visible (ideal for wide screens).
Scrollable: Scrolls items horizontally (suitable for limited space).

The default toolbar mode is Expand, which is configured using toolbarSettings with type: Expand.

In this mode, any overflowing toolbar items are hidden in the next row. Users can reveal them by clicking the expand arrow.

[Class-component]

app.jsx
app.tsx
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
    rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    toolbarSettings = {
        items: [
            'Bold',
            'Italic',
            'StrikeThrough',
            'SuperScript',
            'SubScript',
            '|',
            'Formats',
            '|',
            'OrderedList',
            'UnorderedList',
            'CreateLink',
            'Image',
            'CreateTable',
            '|',
            'Undo',
            'Redo',
          ],
        type: 'Expand'
    };
    render() {
        return (<RichTextEditorComponent editorMode={'Markdown'}  width="500px" value={this.rteValue} toolbarSettings={this.toolbarSettings}>
        <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
      </RichTextEditorComponent>);
    }
}
export default App;
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private rteValue:string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
  public toolbarSettings: object = {
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
    type: 'Expand'
  }

  public render() {
    return (
      <RichTextEditorComponent editorMode={'Markdown'}  width="500px" value={this.rteValue} toolbarSettings={this.toolbarSettings}>
        <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
    let rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    const toolbarSettings = {
      type: 'Expand',
      items: [
        'Bold',
        'Italic',
        'StrikeThrough',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        '|',
        'Undo',
        'Redo',
      ],
    };
    return (<RichTextEditorComponent value={rteValue}  width="500px" editorMode={'Markdown'} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table ]}/>
    </RichTextEditorComponent>);
}
export default App;
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  let rteValue: string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
  const toolbarSettings: object = {
    type: 'Expand',
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
  }

return (
    <RichTextEditorComponent value={rteValue} width="500px" editorMode={'Markdown'} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
    </RichTextEditorComponent>
  );
}

export default App;

By setting type: MultiRow in toolbarSettings, the toolbar items are arranged across multiple rows. This ensures that all configured toolbar items are always visible.

[Class-component]

app.jsx
app.tsx
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
    rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    toolbarSettings = {
        items: [
            'Bold',
            'Italic',
            'StrikeThrough',
            'SuperScript',
            'SubScript',
            '|',
            'Formats',
            '|',
            'OrderedList',
            'UnorderedList',
            'CreateLink',
            'Image',
            'CreateTable',
            '|',
            'Undo',
            'Redo',
          ],
        type: 'Multirow'
    };
    render() {
        return (<RichTextEditorComponent width="500px" editorMode={'Markdown'} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
        <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
      </RichTextEditorComponent>);
    }
}
export default App;
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private rteValue:string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
  public toolbarSettings: object = {
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
    type: 'Multirow'
  }

  public render() {
    return (
      <RichTextEditorComponent editorMode={'Markdown'} width="500px" value={this.rteValue} toolbarSettings={this.toolbarSettings}>
        <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
    let rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    const toolbarSettings = {
      type: 'Multirow',
      items: [
        'Bold',
        'Italic',
        'StrikeThrough',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        '|',
        'Undo',
        'Redo',
      ],
    };
    return (<RichTextEditorComponent value={rteValue} width="500px" editorMode={'Markdown'} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table ]}/>
    </RichTextEditorComponent>);
}
export default App;
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  let rteValue: string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
  const toolbarSettings: object = {
    type: 'Multirow',
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
  }

return (
    <RichTextEditorComponent value={rteValue} width="500px" editorMode={'Markdown'} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
    </RichTextEditorComponent>
  );
}

export default App;

Use type: 'Scrollable' in toolbarSettings to create a single-line toolbar with horizontal scrolling capability for overflow items.

[Class-component]

app.jsx
app.tsx
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
    rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    toolbarSettings = {
        items: [
            'Bold',
            'Italic',
            'StrikeThrough',
            'SuperScript',
            'SubScript',
            '|',
            'Formats',
            '|',
            'OrderedList',
            'UnorderedList',
            'CreateLink',
            'Image',
            'CreateTable',
            '|',
            'Undo',
            'Redo',
          ],
        type: 'Scrollable'
    };
    render() {
        return (<RichTextEditorComponent width="500px" editorMode={'Markdown'} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
        <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
      </RichTextEditorComponent>);
    }
}
export default App;
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private rteValue:string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
  public toolbarSettings: object = {
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
    type: 'Scrollable'
  }

  public render() {
    return (
      <RichTextEditorComponent width="500px" editorMode={'Markdown'} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
        <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
    let rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    const toolbarSettings = {
      type: 'Scrollable',
      items: [
        'Bold',
        'Italic',
        'StrikeThrough',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        '|',
        'Undo',
        'Redo',
      ],
    };
    return (<RichTextEditorComponent width="500px" value={rteValue}  editorMode={'Markdown'} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table ]}/>
    </RichTextEditorComponent>);
}
export default App;
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  let rteValue: string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
  const toolbarSettings: object = {
    type: 'Scrollable',
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
  }

return (
    <RichTextEditorComponent width="500px" value={rteValue} editorMode={'Markdown'} toolbarSettings={toolbarSettings}>
      <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table]} />
    </RichTextEditorComponent>
  );
}

export default App;

By default, the toolbar remains fixed at the top of the Markdown editor when scrolling.

You can customize its position by setting floatingToolbarOffset to adjust the offset from the top of the document.

Additionally, you can enable or disable the floating toolbar using the enableFloating property.

[Class-component]

app.jsx
app.tsx
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
    checkboxObj;
    rteObj;
    toolbarSettings = {
        enableFloating: false,
        items: [
            'Bold',
            'Italic',
            'StrikeThrough',
            'SuperScript',
            'SubScript',
            '|',
            'Formats',
            '|',
            'OrderedList',
            'UnorderedList',
            'CreateLink',
            'Image',
            'CreateTable',
            '|',
            'Undo',
            'Redo',
          ],
    };
    onChange(args) {
        this.rteObj.toolbarSettings.enableFloating = args.checked;
        this.rteObj.dataBind();
    }
    rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    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} editorMode={'Markdown'} value={this.rteValue} toolbarSettings={this.toolbarSettings}>
            <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table ]}/>
        </RichTextEditorComponent>
      </div>);
    }
}
export default App;
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } 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,
     items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
  }

  private rteValue: string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
  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! }} editorMode={'Markdown'} value={this.rteValue} height={450} toolbarSettings={this.toolbarSettings}>
            <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table ]}/>
        </RichTextEditorComponent>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
    let checkboxObj;
    let rteObj;
    let toolbarSettings = {
        enableFloating: false,
        items: [
            'Bold',
            'Italic',
            'StrikeThrough',
            'SuperScript',
            'SubScript',
            '|',
            'Formats',
            '|',
            'OrderedList',
            'UnorderedList',
            'CreateLink',
            'Image',
            'CreateTable',
            '|',
            'Undo',
            'Redo',
          ],
    };
    let rteValue = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";
    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; }} editorMode={'Markdown'} value={rteValue} height={450} toolbarSettings={toolbarSettings}>
            <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table ]}/>
        </RichTextEditorComponent>
      </div>);
}
export default App;
import { ChangeEventArgs } from '@syncfusion/ej2-buttons';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { MarkdownEditor, Inject, RichTextEditorComponent, Toolbar, Link, Image, Table } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  let checkboxObj: CheckBoxComponent;
  let rteObj: RichTextEditorComponent;

  let toolbarSettings: object = {
    enableFloating: false,
    items: [
      'Bold',
      'Italic',
      'StrikeThrough',
      'SuperScript',
      'SubScript',
      '|',
      'Formats',
      '|',
      'OrderedList',
      'UnorderedList',
      'CreateLink',
      'Image',
      'CreateTable',
      '|',
      'Undo',
      'Redo',
    ],
  }

  let rteValue: string = "In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.";

  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! }} editorMode={'Markdown'} value={rteValue} height={450} toolbarSettings={toolbarSettings}>
            <Inject services={[Toolbar, MarkdownEditor, Link, Image, Table ]}/>
        </RichTextEditorComponent>
      </div>
    );
}

export default App;

The Markdown Editor allows you to add custom commands to the toolbar using the toolbarSettings property. These custom commands can be displayed as plain text, icons, or HTML templates. You can define their order and grouping, ensuring a structured and intuitive toolbar layout. Additionally, actions can be bound to these commands by retrieving their instances and handling events accordingly.

In this example, a custom toolbar item (Ω) is added to insert special characters into the editor. When users click the Ω button, a list of special characters appears, allowing them to select and insert a character into the content. This feature enhances the Markdown Editor by providing quick access to special symbols without manually entering character codes.

The following code snippet demonstrates how to configure a custom toolbar item with a tooltip. The item is added to the items field of the toolbarSettings property, ensuring seamless integration within the toolbar.

[Class-component]

app.jsx
app.tsx
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { MarkdownEditor, Image, Inject, Table, Link, NodeSelection, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component {
    rteObj;
    template = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
    selection = new NodeSelection();
    ranges;
    dialogObj;
    items = ['Bold',
      'Italic',
      'StrikeThrough',
      '|',
      'Formats',
      'OrderedList',
      'UnorderedList',
      '|',
      'CreateLink',
      '|',
        {
            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;"> &#937;</div></button>',
            undo: true,
            click: this.onClick.bind(this),
            tooltipText: 'Insert Symbol'
        }
    ];
    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() {
        let activeEle = this.dialogObj.element.querySelector('.char_block.e-active');
        if (activeEle) {
          let specialChar = activeEle.textContent;
          this.rteObj.executeCommand('insertText', specialChar);
        }
        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="markdown-editor" ref={(scope) => { this.rteObj = scope; }} value={this.template} editorMode={'Markdown'}  toolbarSettings={this.toolbarSettings}>
              <Inject services={[MarkdownEditor, Toolbar, Link, Image, Table]} />
            </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="&#94;">&#94;</div>
                <div className="char_block" title="&#95;">&#95;</div>
                <div className="char_block" title="&#96;">&#96;</div>
                <div className="char_block" title="&#123;">&#123;</div>
                <div className="char_block" title="&#124;">&#124;</div>
                <div className="char_block" title="&#125;">&#125;</div>
                <div className="char_block" title="&#126;">&#126;</div>
                <div className="char_block" title="&#160;">&#160;</div>
                <div className="char_block" title="&#161;">&#161;</div>
                <div className="char_block" title="&#162;">&#162;</div>
                <div className="char_block" title="&#163;">&#163;</div>
                <div className="char_block" title="&#164;">&#164;</div>
                <div className="char_block" title="&#165;">&#165;</div>
                <div className="char_block" title="&#x20B9;">&#x20B9;</div>
                <div className="char_block" title="&#166;">&#166;</div>
                <div className="char_block" title="&#167;">&#167;</div>
                <div className="char_block" title="&#168;">&#168;</div>
                <div className="char_block" title="&#169;">&#169;</div>
                <div className="char_block" title="&#170;">&#170;</div>
                <div className="char_block" title="&#171;">&#171;</div>
                <div className="char_block" title="&#172;">&#172;</div>
                <div className="char_block" title="&#173;">&#173;</div>
                <div className="char_block" title="&#174;">&#174;</div>
                <div className="char_block" title="&#175;">&#175;</div>
                <div className="char_block" title="&#176;">&#176;</div>
                <div className="char_block" title="&#177;">&#177;</div>
                <div className="char_block" title="&#178;">&#178;</div>
                <div className="char_block" title="&#179;">&#179;</div>
                <div className="char_block" title="&#180;">&#180;</div>
                <div className="char_block" title="&#181;">&#181;</div>
                <div className="char_block" title="&#182;">&#182;</div>
                <div className="char_block" title="&#183;">&#183;</div>
                <div className="char_block" title="&#184;">&#184;</div>
                <div className="char_block" title="&#185;">&#185;</div>
                <div className="char_block" title="&#186;">&#186;</div>
                <div className="char_block" title="&#187;">&#187;</div>
                <div className="char_block" title="&#188;">&#188;</div>
                <div className="char_block" title="&#189;">&#189;</div>
                <div className="char_block" title="&#190;">&#190;</div>
                <div className="char_block" title="&#191;">&#191;</div>
                <div className="char_block" title="&#192;">&#192;</div>
                <div className="char_block" title="&#193;">&#193;</div>
                <div className="char_block" title="&#194;">&#194;</div>
                <div className="char_block" title="&#195;">&#195;</div>
              </div>
            </div>
          </div>
        </div>
      </div>);
    }
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { MarkdownEditor, Image, Inject, Table, Link, NodeSelection, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public rteObj: RichTextEditorComponent;or
  public template: string = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;

  public selection: NodeSelection = new NodeSelection();
  public ranges: Range;
  public dialogObj: DialogComponent;
  // Rich Text Editor items list
  public items: object = ['Bold',
      'Italic',
      'StrikeThrough',
      '|',
      'Formats',
      'OrderedList',
      'UnorderedList',
      '|',
      'CreateLink',
      '|',
    {
      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;"> &#937;</div></button>',
      undo: true,
      click: this.onClick.bind(this),
      tooltipText: 'Insert Symbol'
    }
  ];

  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) {
      let specialChar = activeEle.textContent;
      this.rteObj.executeCommand('insertText', specialChar);
    }
    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="markdown-editor" ref={(scope) => { this.rteObj = scope! }}
              value={this.template} editorMode={'Markdown'}  toolbarSettings={this.toolbarSettings}>
              <Inject services={[MarkdownEditor, Toolbar, Link, Image, Table]} />
            </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="&#94;">&#94;</div>
                <div className="char_block" title="&#95;">&#95;</div>
                <div className="char_block" title="&#96;">&#96;</div>
                <div className="char_block" title="&#123;">&#123;</div>
                <div className="char_block" title="&#124;">&#124;</div>
                <div className="char_block" title="&#125;">&#125;</div>
                <div className="char_block" title="&#126;">&#126;</div>
                <div className="char_block" title="&#160;">&#160;</div>
                <div className="char_block" title="&#161;">&#161;</div>
                <div className="char_block" title="&#162;">&#162;</div>
                <div className="char_block" title="&#163;">&#163;</div>
                <div className="char_block" title="&#164;">&#164;</div>
                <div className="char_block" title="&#165;">&#165;</div>
                <div className="char_block" title="&#x20B9;">&#x20B9;</div>
                <div className="char_block" title="&#166;">&#166;</div>
                <div className="char_block" title="&#167;">&#167;</div>
                <div className="char_block" title="&#168;">&#168;</div>
                <div className="char_block" title="&#169;">&#169;</div>
                <div className="char_block" title="&#170;">&#170;</div>
                <div className="char_block" title="&#171;">&#171;</div>
                <div className="char_block" title="&#172;">&#172;</div>
                <div className="char_block" title="&#173;">&#173;</div>
                <div className="char_block" title="&#174;">&#174;</div>
                <div className="char_block" title="&#175;">&#175;</div>
                <div className="char_block" title="&#176;">&#176;</div>
                <div className="char_block" title="&#177;">&#177;</div>
                <div className="char_block" title="&#178;">&#178;</div>
                <div className="char_block" title="&#179;">&#179;</div>
                <div className="char_block" title="&#180;">&#180;</div>
                <div className="char_block" title="&#181;">&#181;</div>
                <div className="char_block" title="&#182;">&#182;</div>
                <div className="char_block" title="&#183;">&#183;</div>
                <div className="char_block" title="&#184;">&#184;</div>
                <div className="char_block" title="&#185;">&#185;</div>
                <div className="char_block" title="&#186;">&#186;</div>
                <div className="char_block" title="&#187;">&#187;</div>
                <div className="char_block" title="&#188;">&#188;</div>
                <div className="char_block" title="&#189;">&#189;</div>
                <div className="char_block" title="&#190;">&#190;</div>
                <div className="char_block" title="&#191;">&#191;</div>
                <div className="char_block" title="&#192;">&#192;</div>
                <div className="char_block" title="&#193;">&#193;</div>
                <div className="char_block" title="&#194;">&#194;</div>
                <div className="char_block" title="&#195;">&#195;</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { MarkdownEditor, Image, Inject, Table, Link, NodeSelection, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
    let rteObj;
    let template = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;
    let selection = new NodeSelection();
    let ranges;
    let dialogObj;
    let items = [
      'Bold',
      'Italic',
      'StrikeThrough',
      '|',
      'Formats',
      'OrderedList',
      'UnorderedList',
      '|',
      'CreateLink',
      '|',
      {
        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;"> &#937;</div></button>',
        click: onClick.bind(this),
        tooltipText: 'Insert Symbol',
      },
    ];
    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() {
      let activeEle = dialogObj.element.querySelector('.char_block.e-active');
      if (activeEle) {
        let specialChar = activeEle.textContent;
        rteObj.executeCommand('insertText', specialChar);
      }
      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" editorMode={'Markdown'} ref={(scope) => { rteObj = scope; }} value={template} toolbarSettings={toolbarSettings}>
            <Inject services={[MarkdownEditor, Toolbar, Link, Image, Table]} />
          </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="&#94;">&#94;</div>
              <div className="char_block" title="&#95;">&#95;</div>
              <div className="char_block" title="&#96;">&#96;</div>
              <div className="char_block" title="&#123;">&#123;</div>
              <div className="char_block" title="&#124;">&#124;</div>
              <div className="char_block" title="&#125;">&#125;</div>
              <div className="char_block" title="&#126;">&#126;</div>
              <div className="char_block" title="&#160;">&#160;</div>
              <div className="char_block" title="&#161;">&#161;</div>
              <div className="char_block" title="&#162;">&#162;</div>
              <div className="char_block" title="&#163;">&#163;</div>
              <div className="char_block" title="&#164;">&#164;</div>
              <div className="char_block" title="&#165;">&#165;</div>
              <div className="char_block" title="&#x20B9;">&#x20B9;</div>
              <div className="char_block" title="&#166;">&#166;</div>
              <div className="char_block" title="&#167;">&#167;</div>
              <div className="char_block" title="&#168;">&#168;</div>
              <div className="char_block" title="&#169;">&#169;</div>
              <div className="char_block" title="&#170;">&#170;</div>
              <div className="char_block" title="&#171;">&#171;</div>
              <div className="char_block" title="&#172;">&#172;</div>
              <div className="char_block" title="&#173;">&#173;</div>
              <div className="char_block" title="&#174;">&#174;</div>
              <div className="char_block" title="&#175;">&#175;</div>
              <div className="char_block" title="&#176;">&#176;</div>
              <div className="char_block" title="&#177;">&#177;</div>
              <div className="char_block" title="&#178;">&#178;</div>
              <div className="char_block" title="&#179;">&#179;</div>
              <div className="char_block" title="&#180;">&#180;</div>
              <div className="char_block" title="&#181;">&#181;</div>
              <div className="char_block" title="&#182;">&#182;</div>
              <div className="char_block" title="&#183;">&#183;</div>
              <div className="char_block" title="&#184;">&#184;</div>
              <div className="char_block" title="&#185;">&#185;</div>
              <div className="char_block" title="&#186;">&#186;</div>
              <div className="char_block" title="&#187;">&#187;</div>
              <div className="char_block" title="&#188;">&#188;</div>
              <div className="char_block" title="&#189;">&#189;</div>
              <div className="char_block" title="&#190;">&#190;</div>
              <div className="char_block" title="&#191;">&#191;</div>
              <div className="char_block" title="&#192;">&#192;</div>
              <div className="char_block" title="&#193;">&#193;</div>
              <div className="char_block" title="&#194;">&#194;</div>
              <div className="char_block" title="&#195;">&#195;</div>
            </div>
          </div>
        </div>
      </div>
    </div>);
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { MarkdownEditor, Image, Table, Inject, Link, NodeSelection, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App(){
  let rteObj: RichTextEditorComponent;
  let template: string = `In Rich Text Editor, you click the toolbar buttons to format the words and the changes are visible immediately. Markdown is not like that. When you format the word in Markdown format, you need to add Markdown syntax to the word to indicate which words and phrases should look different from each other. Rich Text Editor supports markdown editing when the editorMode set as **markdown** and using both *keyboard interaction* and *toolbar action*, you can apply the formatting to text. You can add our own custom formation syntax for the Markdown formation, [sample link](https://ej2.syncfusion.com/home/). The third-party library <b>Marked</b> is used in this sample to convert markdown into HTML content.`;

  let selection: NodeSelection = new NodeSelection();
  let ranges: Range;
  let dialogObj: DialogComponent;

  let items: object = ['Bold',
      'Italic',
      'StrikeThrough',
      '|',
      'Formats',
      'OrderedList',
      'UnorderedList',
      '|',
      'CreateLink',
      '|',
    {
      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;"> &#937;</div></button>',
      undo: true,
      click: onClick.bind(this),
      tooltipText: 'Insert Symbol'
    }
  ];

  // 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) {
        let specialChar = activeEle.textContent;
        rteObj.executeCommand('insertText', specialChar);
      }
      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! }}
            value={template} editorMode={'Markdown'}  toolbarSettings={toolbarSettings}>
            <Inject services={[MarkdownEditor, Toolbar, Link, Image, Table]} />
          </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="&#94;">&#94;</div>
              <div className="char_block" title="&#95;">&#95;</div>
              <div className="char_block" title="&#96;">&#96;</div>
              <div className="char_block" title="&#123;">&#123;</div>
              <div className="char_block" title="&#124;">&#124;</div>
              <div className="char_block" title="&#125;">&#125;</div>
              <div className="char_block" title="&#126;">&#126;</div>
              <div className="char_block" title="&#160;">&#160;</div>
              <div className="char_block" title="&#161;">&#161;</div>
              <div className="char_block" title="&#162;">&#162;</div>
              <div className="char_block" title="&#163;">&#163;</div>
              <div className="char_block" title="&#164;">&#164;</div>
              <div className="char_block" title="&#165;">&#165;</div>
              <div className="char_block" title="&#x20B9;">&#x20B9;</div>
              <div className="char_block" title="&#166;">&#166;</div>
              <div className="char_block" title="&#167;">&#167;</div>
              <div className="char_block" title="&#168;">&#168;</div>
              <div className="char_block" title="&#169;">&#169;</div>
              <div className="char_block" title="&#170;">&#170;</div>
              <div className="char_block" title="&#171;">&#171;</div>
              <div className="char_block" title="&#172;">&#172;</div>
              <div className="char_block" title="&#173;">&#173;</div>
              <div className="char_block" title="&#174;">&#174;</div>
              <div className="char_block" title="&#175;">&#175;</div>
              <div className="char_block" title="&#176;">&#176;</div>
              <div className="char_block" title="&#177;">&#177;</div>
              <div className="char_block" title="&#178;">&#178;</div>
              <div className="char_block" title="&#179;">&#179;</div>
              <div className="char_block" title="&#180;">&#180;</div>
              <div className="char_block" title="&#181;">&#181;</div>
              <div className="char_block" title="&#182;">&#182;</div>
              <div className="char_block" title="&#183;">&#183;</div>
              <div className="char_block" title="&#184;">&#184;</div>
              <div className="char_block" title="&#185;">&#185;</div>
              <div className="char_block" title="&#186;">&#186;</div>
              <div className="char_block" title="&#187;">&#187;</div>
              <div className="char_block" title="&#188;">&#188;</div>
              <div className="char_block" title="&#189;">&#189;</div>
              <div className="char_block" title="&#190;">&#190;</div>
              <div className="char_block" title="&#191;">&#191;</div>
              <div className="char_block" title="&#192;">&#192;</div>
              <div className="char_block" title="&#193;">&#193;</div>
              <div className="char_block" title="&#194;">&#194;</div>
              <div className="char_block" title="&#195;">&#195;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Search docs

Ask HelpBot

Search docs

Ask HelpBot

Toolbar configuration in Markdown Editor Component

Default toolbar items

Type of toolbar

Expand Toolbar

Multi-row Toolbar

Scrollable Toolbar

Creating a Sticky Toolbar

Custom Toolbar Items