Insert Table in React Markdown Editor Component

4 Sep 202524 minutes to read

To enable the table insertion feature, add the CreateTable option to the toolbar items. Once added, users can click the Insert Table icon in the toolbar to insert a table into the editor.

By default, when a table is inserted, it consists of:

2 rows and 2 columns
A table header row

This ensures that users can start formatting and adding content immediately.

[Class-component]

app.jsx
app.tsx
/**
 * Rich Text Editor - Markdown to HTML Sample
 */
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
class App extends React.Component {
    mdSource;
    mdSplit;
    htmlPreview;
    defaultRTE;
    textArea;
    value = `***Overview***
  The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.

  ***Key features***
  - *Mode*: Provides IFRAME and DIV mode.
  - *Module*: Modular library to load the necessary functionality on demand.
  - *Toolbar*: Provide a fully customizable toolbar.
  - *Editing*: HTML view to edit the source directly for developers.
  - *Third-party Integration*: Supports to integrate third-party library.
  - *Preview*: Preview the modified content before saving it.
  - *Tools*: Handling images, hyperlinks, video, uploads and more.
  - *Undo and Redo*: Undo/redo manager.
  - *Lists*: Creates bulleted and numbered list.`;
    componentDidMount() {
        this.defaultRTE = new RichTextEditor({
            actionComplete: (e) => {
                if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
                    this.fullPreview({ mode: true, type: '' });
                }
                else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
                    if (e.targetItem === 'Minimize') {
                        this.textArea.style.display = 'block';
                        this.textArea.style.width = '100%';
                        if (this.htmlPreview) {
                            this.htmlPreview.style.display = 'none';
                        }
                        this.mdSplit.classList.remove('e-active');
                        this.mdSource.classList.remove('e-active');
                    }
                    this.markDownConversion();
                }
                setTimeout(() => {
                    this.defaultRTE.toolbarModule.refreshToolbarOverflow();
                }, 400);
            },
            created: () => {
                this.textArea = this.defaultRTE.contentModule.getEditPanel();
                this.textArea.addEventListener('keyup', (e) => {
                    this.markDownConversion();
                });
                this.mdSource = document.getElementById('preview-code');
                this.mdSource.addEventListener('click', (e) => {
                    this.fullPreview({ mode: true, type: 'preview' });
                    if (e.currentTarget.classList.contains('e-active')) {
                        this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                            'Formats', 'OrderedList', 'UnorderedList', '|',
                            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
                        e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
                    }
                    else {
                        this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                            'Formats', 'OrderedList', 'UnorderedList', '|',
                            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
                        e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
                    }
                });
                this.mdSplit = document.getElementById('MD_Preview');
                this.mdSplit.addEventListener('click', (e) => {
                    if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
                        this.fullPreview({ mode: true, type: '' });
                    }
                    this.mdSource.classList.remove('e-active');
                    if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
                        this.defaultRTE.showFullScreen();
                    }
                });
            },
            editorMode: 'Markdown',
            height: '300px',
            toolbarSettings: {
                items: [
                    'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'CreateTable', '|',
                    {
                        template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                            '<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
                        tooltipText: 'Preview'
                    },
                    {
                        template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                            '<span class="e-btn-icon e-view-side e-icons"></span></button>',
                        tooltipText: 'Split Editor'
                    },
                    'FullScreen', '|', 'Undo', 'Redo'
                ]
            },
            valueTemplate: this.value
        });
        this.defaultRTE.appendTo('#markdownPreview');
    }
    markDownConversion() {
        if (this.mdSplit.classList.contains('e-active')) {
            const id = this.defaultRTE.getID() + 'html-preview';
            const htmlPreview = this.defaultRTE.element.querySelector('#' + id);
            htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
        }
    }
    fullPreview(e) {
        const id = this.defaultRTE.getID() + 'html-preview';
        this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
        if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
            this.mdSource.classList.remove('e-active');
            this.mdSplit.classList.remove('e-active');
            this.mdSource.parentElement.title = 'Preview';
            this.textArea.style.display = 'block';
            this.textArea.style.width = '100%';
            this.htmlPreview.style.display = 'none';
        }
        else {
            this.mdSource.classList.add('e-active');
            this.mdSplit.classList.add('e-active');
            if (!this.htmlPreview) {
                this.htmlPreview = createElement('div', { className: 'e-content' });
                this.htmlPreview.id = id;
                this.textArea.parentNode.appendChild(this.htmlPreview);
            }
            if (e.type === 'preview') {
                this.textArea.style.display = 'none';
                this.htmlPreview.classList.add('e-pre-source');
                this.htmlPreview.style.width = '100%';
            }
            else {
                this.htmlPreview.classList.remove('e-pre-source');
                this.textArea.style.width = '50%';
                this.htmlPreview.style.width = '50%';
            }
            this.htmlPreview.style.display = 'block';
            this.htmlPreview.innerHTML = marked((this.defaultRTE.contentModule.getEditPanel()).value);
            this.mdSource.parentElement.title = 'Code View';
        }
    }
    render() {
        return (<div id="rte-default" className='control-pane'>
        <div className='control-section' id="rtePreview">
          <div className="content-wrapper">
            <div id="markdownPreview"/>
          </div>
        </div>
      </div>);
    }
}
export default App;
/**
 * Rich Text Editor - Markdown to HTML Sample
 */
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';

class App extends React.Component<{},{}> {
  public mdSource: HTMLElement;
  public mdSplit: HTMLElement;
  public htmlPreview: HTMLElement;
  public defaultRTE: RichTextEditor;
  public textArea: HTMLTextAreaElement;

  public value: string = `***Overview***
  The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.

  ***Key features***
  - *Mode*: Provides IFRAME and DIV mode.
  - *Module*: Modular library to load the necessary functionality on demand.
  - *Toolbar*: Provide a fully customizable toolbar.
  - *Editing*: HTML view to edit the source directly for developers.
  - *Third-party Integration*: Supports to integrate third-party library.
  - *Preview*: Preview the modified content before saving it.
  - *Tools*: Handling images, hyperlinks, video, uploads and more.
  - *Undo and Redo*: Undo/redo manager.
  - *Lists*: Creates bulleted and numbered list.`;

  public componentDidMount(): void {
    this.defaultRTE = new RichTextEditor({
      actionComplete: (e: any) => {
        if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
          this.fullPreview({ mode: true, type: '' });
        } else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
          if (e.targetItem === 'Minimize') {
            this.textArea.style.display = 'block';
            this.textArea.style.width = '100%';
            if (this.htmlPreview) { this.htmlPreview.style.display = 'none'; }
              this.mdSplit.classList.remove('e-active');
              this.mdSource.classList.remove('e-active');
          }
          this.markDownConversion();
        }
        setTimeout(() => {
          this.defaultRTE.toolbarModule.refreshToolbarOverflow();
        }, 400);
      },
      created: () => {
        this.textArea = (this.defaultRTE as any).contentModule.getEditPanel();
        this.textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
          this.markDownConversion();
        });
        this.mdSource = document.getElementById('preview-code') as any;
        this.mdSource.addEventListener('click', (e: MouseEvent) => {
        this.fullPreview({ mode: true, type: 'preview' });
        if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
          this.defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
          (e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
        } else {
          this.defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
          (e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
        }
      });
      this.mdSplit = document.getElementById('MD_Preview') as any;
      this.mdSplit.addEventListener('click', (e: MouseEvent) => {
        if (this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
          this.fullPreview({ mode: true, type: '' });
        }
        this.mdSource.classList.remove('e-active');
        if (!this.defaultRTE.element.classList.contains('e-rte-full-screen')) {
          this.defaultRTE.showFullScreen();
        }
      });
    },
      editorMode: 'Markdown',
      height: '300px',
      toolbarSettings: {
        items: [
          'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
          'CreateLink', 'Image', 'CreateTable', '|',
          {
            template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
            '<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
            tooltipText: 'Preview'
          },
          {
            template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                      '<span class="e-btn-icon e-view-side e-icons"></span></button>',
            tooltipText: 'Split Editor'
          },
          'FullScreen', '|', 'Undo', 'Redo']
        },
      valueTemplate: this.value

    });
    this.defaultRTE.appendTo('#markdownPreview');
  }

  public markDownConversion(): void {
    if (this.mdSplit.classList.contains('e-active')) {
      const id: string = this.defaultRTE.getID() + 'html-preview';
      const htmlPreview: any = this.defaultRTE.element.querySelector('#' + id);
      htmlPreview.innerHTML = marked(((this.defaultRTE as any).contentModule.getEditPanel()).value);
    }
  }

  public fullPreview(e: { [key: string]: string | boolean }): void {
    const id: string = this.defaultRTE.getID() + 'html-preview';
    this.htmlPreview = this.defaultRTE.element.querySelector('#' + id);
    if ((this.mdSource.classList.contains('e-active') || this.mdSplit.classList.contains('e-active')) && e.mode) {
      this.mdSource.classList.remove('e-active');
      this.mdSplit.classList.remove('e-active');
      this.mdSource.parentElement.title = 'Preview';
      this.textArea.style.display = 'block';
      this.textArea.style.width = '100%';
      this.htmlPreview.style.display = 'none';
    } else {
      this.mdSource.classList.add('e-active');
      this.mdSplit.classList.add('e-active');
      if (!this.htmlPreview) {
        this.htmlPreview = createElement('div', { className: 'e-content' });
        this.htmlPreview.id = id;
        (this.textArea as any).parentNode.appendChild(this.htmlPreview);
      }
      if (e.type === 'preview') {
        this.textArea.style.display = 'none'; this.htmlPreview.classList.add('e-pre-source');
          this.htmlPreview.style.width = '100%';
      } else {
        this.htmlPreview.classList.remove('e-pre-source');
        this.textArea.style.width = '50%';
        this.htmlPreview.style.width = '50%';
      }
      this.htmlPreview.style.display = 'block';
      this.htmlPreview.innerHTML = marked(((this as any).defaultRTE.contentModule.getEditPanel()).value);
      this.mdSource.parentElement.title = 'Code View';
    }
  }

  public render() {
    return (
      <div id="rte-default" className='control-pane'>
        <div className='control-section' id="rtePreview">
          <div className="content-wrapper">
            <div id="markdownPreview"/>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx
app.tsx
/**
 * Rich Text Editor - Markdown to HTML Sample
 */
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";
function App() {
    useEffect(() => {
        defaultRTE = new RichTextEditor({
            actionComplete: (e) => {
                if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
                    fullPreview({ mode: true, type: '' });
                }
                else if (!this.mdSplit.parentElement.classList.contains('e-overlay')) {
                    if (e.targetItem === 'Minimize') {
                        textArea.style.display = 'block';
                        textArea.style.width = '100%';
                        if (htmlPreview) {
                            htmlPreview.style.display = 'none';
                        }
                        mdSplit.classList.remove('e-active');
                        mdSource.classList.remove('e-active');
                    }
                    markDownConversion();
                }
                setTimeout(() => {
                    defaultRTE.toolbarModule.refreshToolbarOverflow();
                }, 400);
            },
            created: () => {
                textArea = defaultRTE.contentModule.getEditPanel();
                textArea.addEventListener('keyup', (e) => {
                    markDownConversion();
                });
                mdSource = document.getElementById('preview-code');
                mdSource.addEventListener('click', (e) => {
                    fullPreview({ mode: true, type: 'preview' });
                    if (e.currentTarget.classList.contains('e-active')) {
                        defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                            'Formats', 'OrderedList', 'UnorderedList', '|',
                            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
                        e.currentTarget.parentElement.previousElementSibling.classList.add('e-overlay');
                    }
                    else {
                        defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
                            'Formats', 'OrderedList', 'UnorderedList', '|',
                            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
                        e.currentTarget.parentElement.previousElementSibling.classList.remove('e-overlay');
                    }
                });
                mdSplit = document.getElementById('MD_Preview');
                mdSplit.addEventListener('click', (e) => {
                    if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
                        fullPreview({ mode: true, type: '' });
                    }
                    mdSource.classList.remove('e-active');
                    if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
                        defaultRTE.showFullScreen();
                    }
                });
            },
            editorMode: 'Markdown',
            height: '300px',
            toolbarSettings: {
                items: [
                    'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
                    'CreateLink', 'Image', 'CreateTable', '|',
                    {
                        template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                            '<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
                        tooltipText: 'Preview'
                    },
                    {
                        template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                            '<span class="e-btn-icon e-view-side e-icons"></span></button>',
                        tooltipText: 'Split Editor'
                    },
                    'FullScreen', '|', 'Undo', 'Redo'
                ]
            },
            valueTemplate: value
        });
        defaultRTE.appendTo('#markdownPreview');
    });
    let mdSource;
    let mdSplit;
    let htmlPreview;
    let defaultRTE;
    let textArea;
    let value = `***Overview***
  The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.

  ***Key features***
  - *Mode*: Provides IFRAME and DIV mode.
  - *Module*: Modular library to load the necessary functionality on demand.
  - *Toolbar*: Provide a fully customizable toolbar.
  - *Editing*: HTML view to edit the source directly for developers.
  - *Third-party Integration*: Supports to integrate third-party library.
  - *Preview*: Preview the modified content before saving it.
  - *Tools*: Handling images, hyperlinks, video, uploads and more.
  - *Undo and Redo*: Undo/redo manager.
  - *Lists*: Creates bulleted and numbered list.`;
    function markDownConversion() {
        if (mdSplit.classList.contains('e-active')) {
            const id = defaultRTE.getID() + 'html-preview';
            const htmlPreview = defaultRTE.element.querySelector('#' + id);
            htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
        }
    }
    function fullPreview(e) {
        const id = defaultRTE.getID() + 'html-preview';
        htmlPreview = defaultRTE.element.querySelector('#' + id);
        if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
            mdSource.classList.remove('e-active');
            mdSplit.classList.remove('e-active');
            mdSource.parentElement.title = 'Preview';
            textArea.style.display = 'block';
            textArea.style.width = '100%';
            htmlPreview.style.display = 'none';
        }
        else {
            mdSource.classList.add('e-active');
            mdSplit.classList.add('e-active');
            if (!htmlPreview) {
                htmlPreview = createElement('div', { className: 'e-content' });
                htmlPreview.id = id;
                textArea.parentNode.appendChild(htmlPreview);
            }
            if (e.type === 'preview') {
                textArea.style.display = 'none';
                htmlPreview.classList.add('e-pre-source');
                htmlPreview.style.width = '100%';
            }
            else {
                htmlPreview.classList.remove('e-pre-source');
                textArea.style.width = '50%';
                htmlPreview.style.width = '50%';
            }
            htmlPreview.style.display = 'block';
            htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
            mdSource.parentElement.title = 'Code View';
        }
    }
    return (<div id="rte-default" className='control-pane'>
      <div className='control-section' id="rtePreview">
        <div className="content-wrapper">
          <div id="markdownPreview"/>
        </div>
      </div>
    </div>);
}
export default App;
/**
 * Rich Text Editor - Markdown to HTML Sample
 */
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { createElement, KeyboardEventArgs } from '@syncfusion/ej2-base';
import { Image, Link, MarkdownEditor, RichTextEditor, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
RichTextEditor.Inject(Image, Link, MarkdownEditor, Toolbar);
import * as React from 'react';
import { useEffect } from "react";

function App() {
  useEffect(() => {
    defaultRTE = new RichTextEditor({
      actionComplete: (e: any) => {
        if (e.targetItem === 'Maximize' && isNullOrUndefined(e.args)) {
          fullPreview({ mode: true, type: '' });
        } else if (!(this as any).mdSplit.parentElement.classList.contains('e-overlay')) {
          if (e.targetItem === 'Minimize') {
            textArea.style.display = 'block';
            textArea.style.width = '100%';
            if (htmlPreview) { htmlPreview.style.display = 'none'; }
              mdSplit.classList.remove('e-active');
              mdSource.classList.remove('e-active');
          }
          markDownConversion();
        }
        setTimeout(() => {
          defaultRTE.toolbarModule.refreshToolbarOverflow();
        }, 400);
      },
      created: () => {
        textArea = (defaultRTE as any).contentModule.getEditPanel();
        textArea.addEventListener('keyup', (e: KeyboardEventArgs) => {
          markDownConversion();
        });
        mdSource = document.getElementById('preview-code') as any;
        mdSource.addEventListener('click', (e: MouseEvent) => {
        fullPreview({ mode: true, type: 'preview' });
        if ((e.currentTarget as HTMLElement).classList.contains('e-active')) {
          defaultRTE.disableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
          (e.currentTarget as any).parentElement.previousElementSibling.classList.add('e-overlay');
        } else {
          defaultRTE.enableToolbarItem(['Bold', 'Italic', 'StrikeThrough', '|',
            'Formats', 'OrderedList', 'UnorderedList', '|',
            'CreateLink', 'Image', 'Undo', 'Redo', 'CreateTable']);
          (e.currentTarget as any).parentElement.previousElementSibling.classList.remove('e-overlay');
        }
      });
      mdSplit = document.getElementById('MD_Preview') as any;
      mdSplit.addEventListener('click', (e: MouseEvent) => {
        if (defaultRTE.element.classList.contains('e-rte-full-screen')) {
          fullPreview({ mode: true, type: '' });
        }
        mdSource.classList.remove('e-active');
        if (!defaultRTE.element.classList.contains('e-rte-full-screen')) {
          defaultRTE.showFullScreen();
        }
      });
    },
      editorMode: 'Markdown',
      height: '300px',
      toolbarSettings: {
        items: [
          'Bold', 'Italic', 'StrikeThrough', '|', 'Formats', 'OrderedList', 'UnorderedList', '|',
          'CreateLink', 'Image', 'CreateTable', '|',
          {
            template: '<button id="preview-code" class="e-tbar-btn e-control e-btn e-icon-btn">' +
            '<span class="e-btn-icon e-md-preview e-preview e-icons"></span></button>',
            tooltipText: 'Preview'
          },
          {
            template: '<button id="MD_Preview" class="e-tbar-btn e-control e-btn e-icon-btn">' +
                      '<span class="e-btn-icon e-view-side e-icons"></span></button>',
            tooltipText: 'Split Editor'
          },
          'FullScreen', '|', 'Undo', 'Redo']
        },
      valueTemplate: value

    });
    defaultRTE.appendTo('#markdownPreview');
  });
  let mdSource: HTMLElement;
  let mdSplit: HTMLElement;
  let htmlPreview: HTMLElement;
  let defaultRTE: RichTextEditor;
  let textArea: HTMLTextAreaElement;

  let value: string = `***Overview***
  The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor used to create and edit the content and return valid HTML markup or markdown (MD) of the content. The editor provides a standard toolbar to format content using its commands. Modular library features to load the necessary functionality on demand. The toolbar contains commands to align the text, insert link, insert image, insert list, undo/redo operation, HTML view, and more.

  ***Key features***
  - *Mode*: Provides IFRAME and DIV mode.
  - *Module*: Modular library to load the necessary functionality on demand.
  - *Toolbar*: Provide a fully customizable toolbar.
  - *Editing*: HTML view to edit the source directly for developers.
  - *Third-party Integration*: Supports to integrate third-party library.
  - *Preview*: Preview the modified content before saving it.
  - *Tools*: Handling images, hyperlinks, video, uploads and more.
  - *Undo and Redo*: Undo/redo manager.
  - *Lists*: Creates bulleted and numbered list.`;

  function markDownConversion(): void {
    if (mdSplit.classList.contains('e-active')) {
      const id: string = defaultRTE.getID() + 'html-preview';
      const htmlPreview: any = defaultRTE.element.querySelector('#' + id);
      htmlPreview.innerHTML = marked(((defaultRTE as any).contentModule.getEditPanel()).value);
    }
  }

  function fullPreview(e: { [key: string]: string | boolean }): void {
    const id: string = defaultRTE.getID() + 'html-preview';
    htmlPreview = defaultRTE.element.querySelector('#' + id);
    if ((mdSource.classList.contains('e-active') || mdSplit.classList.contains('e-active')) && e.mode) {
      mdSource.classList.remove('e-active');
      mdSplit.classList.remove('e-active');
      mdSource.parentElement.title = 'Preview';
      textArea.style.display = 'block';
      textArea.style.width = '100%';
      htmlPreview.style.display = 'none';
    } else {
      mdSource.classList.add('e-active');
      mdSplit.classList.add('e-active');
      if (!htmlPreview) {
        htmlPreview = createElement('div', { className: 'e-content' });
        htmlPreview.id = id;
        (textArea as any).parentNode.appendChild(htmlPreview);
      }
      if (e.type === 'preview') {
        textArea.style.display = 'none'; htmlPreview.classList.add('e-pre-source');
          htmlPreview.style.width = '100%';
      } else {
        htmlPreview.classList.remove('e-pre-source');
        textArea.style.width = '50%';
        htmlPreview.style.width = '50%';
      }
      htmlPreview.style.display = 'block';
      htmlPreview.innerHTML = marked((defaultRTE.contentModule.getEditPanel()).value);
      mdSource.parentElement.title = 'Code View';
    }
  }

  return (
    <div id="rte-default" className='control-pane'>
      <div className='control-section' id="rtePreview">
        <div className="content-wrapper">
          <div id="markdownPreview"/>
        </div>
      </div>
    </div>
  );

}

export default App;

Changing default content

By default, when you insert a table, it comes with predefined column headers and structure. However, you can customize the table’s default content, including the heading and column names, to match your requirements.

The following example demonstrates how to customize the table content in the Markdown Editor: