Toolbar configuration in Vue Markdown Editor Component

18 Mar 202524 minutes to read

Default toolbar items

By default, the Vue 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.

Type of toolbar

The Syncfusion Markdown Editor allows you to configure different type of toolbars using the type field in the toolbarSettings property.

The available toolbar types are:

  1. Expand
  2. MultiRow
  3. Scrollable

Expanding the Toolbar

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.

<template>
  <div id="markdown-editor">
      <ejs-richtexteditor
        ref="editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';

const toolbarSettings = {
    type: 'Multirow',
    items: [ 'Bold',
        'Italic',
        'StrikeThrough',
        'InlineCode',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        'Blockquote',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        '|',
        'Undo',
        'Redo',]
};
const 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.`;
provide('richtexteditor', [Toolbar, Link, Image,Table, MarkdownEditor]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
  <div id="markdown-editor">
    <ejs-richtexteditor
        ref="editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent
    },
   data: function () {
    return {
      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: {
        type: 'Expand',
        items: [
          'Bold',
          'Italic',
          'StrikeThrough',
          'InlineCode',
          'SuperScript',
          'SubScript',
          '|',
          'Formats',
          'Blockquote',
          '|',
          'OrderedList',
          'UnorderedList',
          'CreateLink',
          'Image',
          'CreateTable',
          '|',
          'Undo',
          'Redo',
        ],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
  },
}
</script>

<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>

Configuring a Multi-row Toolbar

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

<template>
  <div id="markdown-editor">
      <ejs-richtexteditor
        ref="editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';

const toolbarSettings = {
    items: [ 'Bold',
        'Italic',
        'StrikeThrough',
        'InlineCode',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        'Blockquote',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        '|',
        'Undo',
        'Redo',]
};
const 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.`;
provide('richtexteditor', [Toolbar, Link, Image,Table, MarkdownEditor]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
  <div id="markdown-editor">
    <ejs-richtexteditor
        ref="editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image,Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent
    },
   data: function () {
    return {
      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: {
        type: 'Multirow',
        items: [
          'Bold',
          'Italic',
          'StrikeThrough',
          'InlineCode',
          'SuperScript',
          'SubScript',
          '|',
          'Formats',
          'Blockquote',
          '|',
          'OrderedList',
          'UnorderedList',
          'CreateLink',
          'Image',
          'CreateTable',
          '|',
          'Undo',
          'Redo',
        ],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
  },
}
</script>

<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>

Implementing a Scrollable Toolbar

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

<template>
  <div id="markdown-editor">
      <ejs-richtexteditor
        ref="markdown-editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script setup>
import { provide } from "vue";
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';

const toolbarSettings = {
    type: 'Scrollable',
    items: [ 'Bold',
        'Italic',
        'StrikeThrough',
        'InlineCode',
        'SuperScript',
        'SubScript',
        '|',
        'Formats',
        'Blockquote',
        '|',
        'OrderedList',
        'UnorderedList',
        'CreateLink',
        'Image',
        'CreateTable',
        '|',
        'Undo',
        'Redo',]
};
const 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.`;
provide('richtexteditor', [Toolbar, Link, Image, Table, MarkdownEditor]);
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
  <div id="markdown-editor">
    <ejs-richtexteditor
        ref="editor"
        :height="340"
        :width="500"
        editorMode="Markdown"
        :value="rteValue"
        :toolbarSettings="toolbarSettings"
      ></ejs-richtexteditor>
  </div>
</template>

<script>
import { RichTextEditorComponent, Toolbar, Link, Image, Table, MarkdownEditor } from '@syncfusion/ej2-vue-richtexteditor';
export default {
    name: "App",
    components: {
        'ejs-richtexteditor': RichTextEditorComponent
    },
   data: function () {
    return {
      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: {
        type: 'Scrollable',
        items: [
          'Bold',
          'Italic',
          'StrikeThrough',
          'InlineCode',
          'SuperScript',
          'SubScript',
          '|',
          'Formats',
          'Blockquote',
          '|',
          'OrderedList',
          'UnorderedList',
          'CreateLink',
          'Image',
          'CreateTable',
          '|',
          'Undo',
          'Redo',
        ],
      },
    };
  },
  provide: {
    richtexteditor: [Toolbar, Link, Image, Table, MarkdownEditor],
  },
}
</script>

<style>@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";</style>

Creating a Sticky Toolbar

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.

<template>
    <div>
        <div class="col-lg-4 property-section">
            <div title="Properties" id="property">
                <table title="Properties" id="property">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-checkbox label='Enable Floating' ref="checkInstance" :change="onFloatChange"
                                        id="float" :checked="false"></ejs-checkbox>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="control-section">
            <div class="sample-container">
                <div class="default-section">
                    <ejs-richtexteditor ref="rteInstance" :value="rteValue" :height="750" :toolbarSettings="toolbarSettings"></ejs-richtexteditor>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import { RichTextEditorComponent as EjsRichtexteditor, Toolbar, MarkdownEditor, Table, Image, Link } from "@syncfusion/ej2-vue-richtexteditor";
import { CheckBoxComponent as EjsCheckbox } from "@syncfusion/ej2-vue-buttons";

const 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 rteObj = ref(null);
const toolbarSettings = {
    enableFloating: false,
    items: [ 'Bold', 'Italic', 'StrikeThrough', '|','SuperScript',
          'SubScript','Formats','|','OrderedList', 'UnorderedList','CreateLink',
          'Image', 'CreateTable','|','Undo','Redo'
      ]
}
const onFloatChange = (args) => {
    rteInstance.value.ej2Instances.toolbarSettings.enableFloating = args.checked;
    rteInstance.value.rteInstance.dataBind();
}
provide('richtexteditor', [Toolbar, MarkdownEditor, Table, Image, Link]);
</script>

<style>@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
    <div>
        <div class="col-lg-4 property-section">
            <div title="Properties" id="property">
                <table title="Properties" id="property">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <ejs-checkbox label='Enable Floating' ref="checkInstance" :change="onFloatChange" id="float" :checked="false"></ejs-checkbox>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="control-section">
            <div class="sample-container">
                <div class="default-section">
                    <ejs-richtexteditor ref="rteInstance" editorMode="Markdown" :value="rteValue" :height="750" :toolbarSettings="toolbarSettings"></ejs-richtexteditor>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import { RichTextEditorComponent, Toolbar, MarkdownEditor, Table, Image, Link } from "@syncfusion/ej2-vue-richtexteditor";
import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";

export default {
    name: "App",
    components: {
        "ejs-checkbox":CheckBoxComponent,
        "ejs-richtexteditor":RichTextEditorComponent
    },
    data: function() {
        return {
            toolbarSettings: {
                enableFloating: false,
                  items: [ 'Bold',
                    'Italic',
                    'StrikeThrough',
                    '|',
                    'SuperScript',
                    'SubScript',
                    'Formats',
                    '|',
                    'OrderedList',
                    'UnorderedList',
                    'CreateLink',
                    'Image',
                    'CreateTable',
                    '|',
                    'Undo',
                    'Redo'
              ]  
            },
            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.`,
        };
    },
    methods: {
        onFloatChange: function(args) {
            this.$refs.rteInstance.ej2Instances.toolbarSettings.enableFloating = args.checked;
            this.$refs.rteInstance.dataBind();
        }
    },
    provide:{
        richtexteditor:[Toolbar, MarkdownEditor, Link, Image, Table]
    }
}
</script>

<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>

Custom Toolbar Items

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.

<template>
  <div>
    <div class="control-section">
      <div class="sample-container">
        <div class="default-section" id="rteSection" style="min-height: 360px">
          <ejs-richtexteditor
            ref="customObj"
            :value="rteValue"
            :toolbarSettings="toolbarSettings"
            editorMode="Markdown"
            :created="onCreate"
          ></ejs-richtexteditor>
          <ejs-dialog
            id="rteDialog"
            :buttons="dlgButtons"
            :width="width"
            :height="height"
            :header="header"
            ref="dialogObj"
            :overlayClick="dialogOverlay"
            :visible="visible"
            :showCloseIcon="showCloseIcon"
            :isModal="modal"
            :cssClass="cssClass"
            target="#rteSection"
            :created="dialogCreate"
          >
          </ejs-dialog>
          <div id="customTbarDialog" style="display: none">
            <div id="rteSpecial_char">
              <div class="char_block" title="&#94;">&#94;</div>
              <div class="char_block" title="&#95;">&#95;</div>
              <div class="char_block" title="&#96;">&#96;</div>
              <div class="char_block" title="&#123;">&#123;</div>
              <div class="char_block" title="&#124;">&#124;</div>
              <div class="char_block" title="&#125;">&#125;</div>
              <div class="char_block" title="&#126;">&#126;</div>
              <div class="char_block" title="&#160;">&#160;</div>
              <div class="char_block" title="&#161;">&#161;</div>
              <div class="char_block" title="&#162;">&#162;</div>
              <div class="char_block" title="&#163;">&#163;</div>
              <div class="char_block" title="&#164;">&#164;</div>
              <div class="char_block" title="&#165;">&#165;</div>
              <div class="char_block" title="&#x20B9;">&#x20B9;</div>
              <div class="char_block" title="&#166;">&#166;</div>
              <div class="char_block" title="&#167;">&#167;</div>
              <div class="char_block" title="&#168;">&#168;</div>
              <div class="char_block" title="&#169;">&#169;</div>
              <div class="char_block" title="&#170;">&#170;</div>
              <div class="char_block" title="&#171;">&#171;</div>
              <div class="char_block" title="&#172;">&#172;</div>
              <div class="char_block" title="&#173;">&#173;</div>
              <div class="char_block" title="&#174;">&#174;</div>
              <div class="char_block" title="&#175;">&#175;</div>
              <div class="char_block" title="&#176;">&#176;</div>
              <div class="char_block" title="&#177;">&#177;</div>
              <div class="char_block" title="&#178;">&#178;</div>
              <div class="char_block" title="&#179;">&#179;</div>
              <div class="char_block" title="&#180;">&#180;</div>
              <div class="char_block" title="&#181;">&#181;</div>
              <div class="char_block" title="&#182;">&#182;</div>
              <div class="char_block" title="&#183;">&#183;</div>
              <div class="char_block" title="&#184;">&#184;</div>
              <div class="char_block" title="&#185;">&#185;</div>
              <div class="char_block" title="&#186;">&#186;</div>
              <div class="char_block" title="&#187;">&#187;</div>
              <div class="char_block" title="&#188;">&#188;</div>
              <div class="char_block" title="&#189;">&#189;</div>
              <div class="char_block" title="&#190;">&#190;</div>
              <div class="char_block" title="&#191;">&#191;</div>
              <div class="char_block" title="&#192;">&#192;</div>
              <div class="char_block" title="&#193;">&#193;</div>
              <div class="char_block" title="&#194;">&#194;</div>
              <div class="char_block" title="&#195;">&#195;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { provide, ref } from 'vue';
import {
  RichTextEditorComponent,
  Toolbar,
  Link,
  NodeSelection,
  Image,
  MarkdownEditor,
} from '@syncfusion/ej2-vue-richtexteditor';
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
let proxy = undefined;

const rteValue =`<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>`;
const customObj = ref(null);
const dialogObj = ref(null);
const selection = new NodeSelection();
let ranges = null;
const header = 'Special Characters';
const visible = false;
const modal = true;
const showCloseIcon = false;
const width = '520px';
const height = '310px';
const dlgButtons = [{ click: onInsert, buttonModel: { isPrimary: 'true', content: 'Insert' } }, { buttonModel: { content: 'Cancel' }, click: dialogOverlay }];
const toolbarSettings = {
    items: [
        'Bold',
        'Italic',
        'StrikeThrough',
        '|',
        'Formats',
        'OrderedList',
        'UnorderedList',
        '|',
        'CreateLink',
        '|',
        {
            tooltipText: 'Insert Symbol',
            undo: true,
            click: this.onClick.bind(this),
            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>`,
        },
    ],
};
const cssClass = "customClass e-rte-elements";
const onClick = function () {
    dialogObj.ej2Instances.width =
    customObj.ej2Instances.element.offsetWidth * 0.5;
    dialogObj.ej2Instances.content = document.getElementById('rteSpecial_char');
    dialogObj.ej2Instances.show();
    dialogObj.ej2Instances.element.style.maxHeight = 'none';
}
const dialogCreate = function () {
    var dialogCtn = document.getElementById('rteSpecial_char');
    dialogCtn.onclick = function (e) {
        var target = e.target;
        var activeEle = dialogObj.value.ej2Instances.element.querySelector('.char_block.e-active');
        if (target.classList.contains('char_block')) {
            target.classList.add('e-active');
            if (activeEle) {
                activeEle.classList.remove('e-active');
            }
        }
    };
}
const onInsert = function () {
    var activeEle = dialogObj.value.ej2Instances.element.querySelector('.char_block.e-active');
    if (activeEle) {
        customObj.value.ej2Instances.executeCommand('insertText', activeEle.textContent, { undo: true });
    }
    dialogOverlay();
}
const dialogOverlay = function () {
    var activeEle = dialogObj.value.ej2Instances.element.querySelector('.char_block.e-active');
    if (activeEle) {
        activeEle.classList.remove('e-active');
    }
    dialogObj.value.ej2Instances.hide();
}
const onCreate = function (e) {
    var customBtn = document.getElementById('custom_tbar');
    dialogObj.value.ej2Instances.target = document.getElementById('rteSection');
}
provide('richtexteditor', [Toolbar, Link, Image, HtmlEditor]);
</script >

<style>
#rteSpecial_char .char_block {
    display: inline-block;
}

#custom_tbar,
#custom_tbar div {
    cursor: pointer;
    font-size: 16px;
}

#rteSpecial_char {
    padding: 15px 0 15px 0;
}

#rteSpecial_char .char_block.e-active {
    outline: 1px solid #e3165b;
    border-color: #e3165b;
}

#rteSpecial_char .char_block {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px 5px 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #DDDDDD;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
}
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>
<template>
  <div>
    <div class="control-section">
      <div class="sample-container">
        <div class="default-section" id="rteSection" style="min-height: 360px">
          <ejs-richtexteditor
            ref="customObj"
            :value="rteValue"
            :toolbarSettings="toolbarSettings"
            editorMode="Markdown"
            :created="onCreate"
          ></ejs-richtexteditor>
          <ejs-dialog
            id="rteDialog"
            :buttons="dlgButtons"
            :width="width"
            :height="height"
            :header="header"
            ref="dialogObj"
            :overlayClick="dialogOverlay"
            :visible="visible"
            :showCloseIcon="showCloseIcon"
            :isModal="modal"
            :cssClass="cssClass"
            target="#rteSection"
            :created="dialogCreate"
          >
          </ejs-dialog>
          <div id="customTbarDialog" style="display: none">
            <div id="rteSpecial_char">
              <div class="char_block" title="&#94;">&#94;</div>
              <div class="char_block" title="&#95;">&#95;</div>
              <div class="char_block" title="&#96;">&#96;</div>
              <div class="char_block" title="&#123;">&#123;</div>
              <div class="char_block" title="&#124;">&#124;</div>
              <div class="char_block" title="&#125;">&#125;</div>
              <div class="char_block" title="&#126;">&#126;</div>
              <div class="char_block" title="&#160;">&#160;</div>
              <div class="char_block" title="&#161;">&#161;</div>
              <div class="char_block" title="&#162;">&#162;</div>
              <div class="char_block" title="&#163;">&#163;</div>
              <div class="char_block" title="&#164;">&#164;</div>
              <div class="char_block" title="&#165;">&#165;</div>
              <div class="char_block" title="&#x20B9;">&#x20B9;</div>
              <div class="char_block" title="&#166;">&#166;</div>
              <div class="char_block" title="&#167;">&#167;</div>
              <div class="char_block" title="&#168;">&#168;</div>
              <div class="char_block" title="&#169;">&#169;</div>
              <div class="char_block" title="&#170;">&#170;</div>
              <div class="char_block" title="&#171;">&#171;</div>
              <div class="char_block" title="&#172;">&#172;</div>
              <div class="char_block" title="&#173;">&#173;</div>
              <div class="char_block" title="&#174;">&#174;</div>
              <div class="char_block" title="&#175;">&#175;</div>
              <div class="char_block" title="&#176;">&#176;</div>
              <div class="char_block" title="&#177;">&#177;</div>
              <div class="char_block" title="&#178;">&#178;</div>
              <div class="char_block" title="&#179;">&#179;</div>
              <div class="char_block" title="&#180;">&#180;</div>
              <div class="char_block" title="&#181;">&#181;</div>
              <div class="char_block" title="&#182;">&#182;</div>
              <div class="char_block" title="&#183;">&#183;</div>
              <div class="char_block" title="&#184;">&#184;</div>
              <div class="char_block" title="&#185;">&#185;</div>
              <div class="char_block" title="&#186;">&#186;</div>
              <div class="char_block" title="&#187;">&#187;</div>
              <div class="char_block" title="&#188;">&#188;</div>
              <div class="char_block" title="&#189;">&#189;</div>
              <div class="char_block" title="&#190;">&#190;</div>
              <div class="char_block" title="&#191;">&#191;</div>
              <div class="char_block" title="&#192;">&#192;</div>
              <div class="char_block" title="&#193;">&#193;</div>
              <div class="char_block" title="&#194;">&#194;</div>
              <div class="char_block" title="&#195;">&#195;</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  RichTextEditorComponent,
  Toolbar,
  Link,
  NodeSelection,
  Image,
  MarkdownEditor,
} from '@syncfusion/ej2-vue-richtexteditor';
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
let proxy = undefined;

export default {
    name: "App",
    components: {
        "ejs-richtexteditor":RichTextEditorComponent,
        "ejs-dialog":DialogComponent
    },
    data: function() {
        return {
            rteValue: `<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>`,
            selection: new NodeSelection(),
            ranges: null,
            header: 'Special Characters',
            visible: false,
            modal: true,
            showCloseIcon: false,
            width: '520px',
            height: '310px',
            dlgButtons: [
                {
                click: this.onInsert.bind(this),
                buttonModel: { isPrimary: 'true', content: 'Insert' },
                },
                {
                buttonModel: { content: 'Cancel' },
                click: this.dialogOverlay.bind(this),
                },
            ],
            toolbarSettings: {
                items: [
                'Bold',
                'Italic',
                'StrikeThrough',
                '|',
                'Formats',
                'OrderedList',
                'UnorderedList',
                '|',
                'CreateLink',
                '|',
                {
                    tooltipText: 'Insert Symbol',
                    undo: true,
                    click: this.onClick.bind(this),
                    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>`,
                },
                ],
            },
            cssClass: 'customClass e-rte-elements',
        };
    },
    methods: {
        onCreate: function (e) {
            var customBtn = document.getElementById('custom_tbar');
            this.$refs.dialogObj.ej2Instances.target =
                document.getElementById('rteSection');
            proxy = this;
        },
        onClick: function () {
            proxy.$refs.dialogObj.ej2Instances.width =
                proxy.$refs.customObj.ej2Instances.element.offsetWidth * 0.5;
            proxy.$refs.dialogObj.ej2Instances.content = document.getElementById('rteSpecial_char');
            proxy.$refs.dialogObj.ej2Instances.show();
            proxy.$refs.dialogObj.ej2Instances.element.style.maxHeight = 'none';
        },
            
        dialogCreate: function () {
            var dialogCtn = document.getElementById('rteSpecial_char');
            proxy = this;
            dialogCtn.onclick = function (e) {
                var target = e.target;
                var activeEle =
                proxy.$refs.dialogObj.ej2Instances.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: function () {
            let activeEle = this.$refs.dialogObj.ej2Instances.element.querySelector(
                '.char_block.e-active'
            );
            if (activeEle) {
                let specialChar = activeEle.textContent;
                proxy.$refs.customObj.ej2Instances.executeCommand(
                'insertText',
                specialChar
                );
            }
            this.dialogOverlay();
        },
        dialogOverlay: function () {
            var activeEle = this.$refs.dialogObj.ej2Instances.element.querySelector(
                '.char_block.e-active'
            );
            if (activeEle) {
                activeEle.classList.remove('e-active');
            }
            this.$refs.dialogObj.ej2Instances.hide();
        },
    },
    provide:{
        richtexteditor:[Toolbar, Link, Image, MarkdownEditor]
    }
}
</script>

<style>
#rteSpecial_char .char_block {
    display: inline-block;
}

#custom_tbar,
#custom_tbar div{
    cursor: pointer;
    font-size: 16px;
}

#rteSpecial_char {
    padding: 15px 0 15px 0;
}

#rteSpecial_char .char_block.e-active {
    outline: 1px solid #e3165b;
    border-color: #e3165b;
}

#rteSpecial_char .char_block {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px 5px 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #DDDDDD;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
}
@import "https://ej2.syncfusion.com/vue/documentation/../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
</style>