React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Miscellaneous in React RichTextEditor component

24 Jun 2022 / 13 minutes to read

Placeholder

Specifies the placeholder for the Rich Text Editor’s content used when the Rich Text Editor body is empty through the placeholder property.

Through the e-rte-placeholder class to define our custom font family, font color, and styles to the placeholder text.

Copied to clipboard
  .e-richtexteditor .e-rte-placeholder {
    font-family: monospace;
  }
Source
Preview
App.jsx
App.tsx
Copied to clipboard
/**
 * Rich Text Editor - Placeholder Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    render() {
        return (<RichTextEditorComponent placeholder={'Type Something'}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
      </RichTextEditorComponent>);
    }
}
export default App;
Copied to clipboard
/**
 * Rich Text Editor - Placeholder Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditor,RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public render() {
    return (
      <RichTextEditorComponent placeholder={'Type Something'}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

Character count

The Rich Text Editor automatically counts the number of characters in the content are while typing using the showCharCount property. The characters count displayed at the bottom of the editor. You can limit the number of characters in your content using the maxLength property. By default, the editor sets the characters limit value is infinity.

The character count color will be modified based on the characters in the Rich Text Editor.

Status Description
Normal Till 70% of given maxLength value, character count color is black.
Warning Once the number of character count in the Rich Text Editor reached 70% of given maxLength value, the character count color will be orange, indicating that, the count value going to reach the maximum count.
Error Once the number of character count in the Rich Text Editor reached 90% of given maxLength value, the character count color will be red, indicating that, the count value reached the maximum count.

To create Rich Text Editor with character count feature, inject the Count module to the RTE using the RichTextEditor.Inject(Count) method.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
/**
 * Rich Text Editor - Character Count Sample
 */
import { Count, HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    value() {
        return (<div>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
          Users can format their content using standard toolbar commands.</p>
        <p><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
          <li>
            <p>Capable of handling markdown editing.</p>
          </li>
          <li>
            <p>Contains a modular library to load the necessary functionality on demand.</p>
          </li>
          <li>
            <p>Provides a fully customizable toolbar.</p>
          </li>
          <li>
            <p>Provides HTML view to edit the source directly for developers.</p>
          </li>
          <li>
            <p>Supports third-party library integration.</p>
          </li>
          <li>
            <p>Allows preview of modified content before saving it.</p>
          </li>
          <li>
            <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
          </li>
          <li>
            <p>Contains undo/redo manager.</p>
          </li>
          <li>
            <p>Creates bulleted and numbered lists.</p>
          </li>
        </ul>
        </div>);
    }
    ;
    render() {
        return (<RichTextEditorComponent height={450} showCharCount={true} maxLength={2000} valueTemplate={this.value}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]}/>
    </RichTextEditorComponent>);
    }
}
export default App;
Copied to clipboard
/**
 * Rich Text Editor - Character Count Sample
 */
import { Count, HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public value(): JSX.Element {
    return(<div>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
          Users can format their content using standard toolbar commands.</p>
        <p><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
          <li>
            <p>Capable of handling markdown editing.</p>
          </li>
          <li>
            <p>Contains a modular library to load the necessary functionality on demand.</p>
          </li>
          <li>
            <p>Provides a fully customizable toolbar.</p>
          </li>
          <li>
            <p>Provides HTML view to edit the source directly for developers.</p>
          </li>
          <li>
            <p>Supports third-party library integration.</p>
          </li>
          <li>
            <p>Allows preview of modified content before saving it.</p>
          </li>
          <li>
            <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
          </li>
          <li>
            <p>Contains undo/redo manager.</p>
          </li>
          <li>
            <p>Creates bulleted and numbered lists.</p>
          </li>
        </ul>
        </div>);
  };
  public render() {
    return (
      <RichTextEditorComponent height={450} showCharCount={true} maxLength={2000} valueTemplate = {this.value}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]} />
    </RichTextEditorComponent>
    );
  }
}

export default App;

Code view

Rich Text Editor includes the ability for users to directly edit HTML code via Source View in the text area. If you made any modification in Source view directly, the changes will be reflected in the Rich Text Editor’s content. So, the users will have more flexibility over the content they have created.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
/**
 * Rich Text Editor - CodeView sample
 */
import { createElement } from '@syncfusion/ej2-base';
import { Count, HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import CodeMirror from 'codemirror';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import 'codemirror/mode/javascript/javascript';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.toolbarSettings = {
            items: ['SourceCode']
        };
    }
    value() {
        return (<div>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
          Users can format their content using standard toolbar commands.</p>
        <p><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
          <li>
            <p>Capable of handling markdown editing.</p>
          </li>
          <li>
            <p>Contains a modular library to load the necessary functionality on demand.</p>
          </li>
          <li>
            <p>Provides a fully customizable toolbar.</p>
          </li>
          <li>
            <p>Provides HTML view to edit the source directly for developers.</p>
          </li>
          <li>
            <p>Supports third-party library integration.</p>
          </li>
          <li>
            <p>Allows preview of modified content before saving it.</p>
          </li>
          <li>
            <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
          </li>
          <li>
            <p>Contains undo/redo manager.</p>
          </li>
          <li>
            <p>Creates bulleted and numbered lists.</p>
          </li>
        </ul>
        </div>);
    }
    ;
    mirrorConversion(e) {
        const id = this.rteObj.getID() + 'mirror-view';
        let mirrorView = this.rteObj.element.querySelector('#' + id);
        const charCount = this.rteObj.element.querySelector('.e-rte-character-count');
        if (e.targetItem === 'Preview') {
            this.textArea.style.display = 'block';
            mirrorView.style.display = 'none';
            this.textArea.innerHTML = this.myCodeMirror.getValue();
            charCount.style.display = 'block';
        }
        else {
            if (!mirrorView) {
                mirrorView = createElement('div', { className: 'e-content' });
                mirrorView.id = id;
                this.textArea.parentNode.appendChild(mirrorView);
            }
            else {
                mirrorView.innerHTML = '';
            }
            this.textArea.style.display = 'none';
            mirrorView.style.display = 'block';
            this.renderCodeMirror(mirrorView, this.rteObj.value);
            charCount.style.display = 'none';
        }
    }
    renderCodeMirror(mirrorView, content) {
        this.myCodeMirror = CodeMirror(mirrorView, {
            lineNumbers: true,
            lineWrapping: true,
            mode: 'text/html',
            value: content
        });
    }
    actionComplete(e) {
        this.textArea = this.rteObj.contentModule.getEditPanel();
        if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {
            this.rteObj.sourceCodeModule.getPanel().style.display = 'none';
            this.mirrorConversion(e);
        }
        else {
            setTimeout(() => {
                this.rteObj.toolbarModule.refreshToolbarOverflow();
            }, 400);
        }
    }
    created() {
        this.textArea = this.rteObj.contentModule.getEditPanel();
    }
    render() {
        return (<RichTextEditorComponent ref={(richtexteditor) => { this.rteObj = richtexteditor; }} height={450} toolbarSettings={this.toolbarSettings} showCharCount={true} actionComplete={this.actionComplete = this.actionComplete.bind(this)} created={this.created = this.created.bind(this)}>
        <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
          Users can format their content using standard toolbar commands.</p>
        <p><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
          <li>
            <p>Capable of handling markdown editing.</p>
          </li>
          <li>
            <p>Contains a modular library to load the necessary functionality on demand.</p>
          </li>
          <li>
            <p>Provides a fully customizable toolbar.</p>
          </li>
          <li>
            <p>Provides HTML view to edit the source directly for developers.</p>
          </li>
          <li>
            <p>Supports third-party library integration.</p>
          </li>
          <li>
            <p>Allows preview of modified content before saving it.</p>
          </li>
          <li>
            <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
          </li>
          <li>
            <p>Contains undo/redo manager.</p>
          </li>
          <li>
            <p>Creates bulleted and numbered lists.</p>
          </li>
        </ul>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]}/>
      </RichTextEditorComponent>);
    }
}
export default App;
Copied to clipboard
/**
 * Rich Text Editor - CodeView sample
 */
import { createElement } from '@syncfusion/ej2-base';
import { Count, HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import CodeMirror from 'codemirror';
import 'codemirror/mode/css/css.js';
import 'codemirror/mode/htmlmixed/htmlmixed.js';
import 'codemirror/mode/javascript/javascript';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public myCodeMirror: any;
  public textArea: HTMLElement;
  public rteObj: RichTextEditorComponent;

  public toolbarSettings: object = {
    items: ['SourceCode']
  }
  public value(): JSX.Element {
    return(<div>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
          Users can format their content using standard toolbar commands.</p>
        <p><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
          <li>
            <p>Capable of handling markdown editing.</p>
          </li>
          <li>
            <p>Contains a modular library to load the necessary functionality on demand.</p>
          </li>
          <li>
            <p>Provides a fully customizable toolbar.</p>
          </li>
          <li>
            <p>Provides HTML view to edit the source directly for developers.</p>
          </li>
          <li>
            <p>Supports third-party library integration.</p>
          </li>
          <li>
            <p>Allows preview of modified content before saving it.</p>
          </li>
          <li>
            <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
          </li>
          <li>
            <p>Contains undo/redo manager.</p>
          </li>
          <li>
            <p>Creates bulleted and numbered lists.</p>
          </li>
        </ul>
        </div>);
  };
  public mirrorConversion(e: any): void {
    const id: string = this.rteObj.getID() + 'mirror-view';
    let mirrorView: HTMLElement = this.rteObj.element.querySelector('#' + id) as HTMLElement;
    const charCount: HTMLElement = this.rteObj.element.querySelector('.e-rte-character-count') as HTMLElement;
    if (e.targetItem === 'Preview') {
      this.textArea.style.display = 'block';
      mirrorView.style.display = 'none';
      this.textArea.innerHTML = this.myCodeMirror.getValue();
      charCount.style.display = 'block';
    } else {
      if (!mirrorView) {
          mirrorView = createElement('div', { className: 'e-content' });
          mirrorView.id = id;
          (this.textArea as any).parentNode.appendChild(mirrorView);
      } else {
          mirrorView.innerHTML = '';
      }
      this.textArea.style.display = 'none';
      mirrorView.style.display = 'block';
      this.renderCodeMirror(mirrorView, this.rteObj.value);
      charCount.style.display = 'none';
    }
  }

  public renderCodeMirror(mirrorView: HTMLElement, content: string): void {
    this.myCodeMirror = CodeMirror(mirrorView, {
      lineNumbers: true,
      lineWrapping: true,
      mode: 'text/html',
      value: content
    });
  }

  public actionComplete(e: any) {
    this.textArea = (this.rteObj as any).contentModule.getEditPanel() as HTMLElement;
    if (e.targetItem && (e.targetItem === 'SourceCode' || e.targetItem === 'Preview')) {
      (this.rteObj.sourceCodeModule.getPanel() as any).style.display = 'none';
      this.mirrorConversion(e);
    } else {
      setTimeout(() => {
        this.rteObj.toolbarModule.refreshToolbarOverflow();
      }, 400);
    }
  }

  public created(): void {
    this.textArea = (this.rteObj as any).contentModule.getEditPanel() as HTMLElement;
  }

  public render() {
    return (
      <RichTextEditorComponent ref={(richtexteditor) => { this.rteObj = richtexteditor! }} height={450} toolbarSettings={this.toolbarSettings} showCharCount={true} actionComplete={this.actionComplete =this.actionComplete.bind(this) } created={this.created = this.created.bind(this)}>
        <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
          Users can format their content using standard toolbar commands.</p>
        <p><b>Key features:</b></p>
        <ul>
          <li>
            <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
          </li>
          <li>
            <p>Capable of handling markdown editing.</p>
          </li>
          <li>
            <p>Contains a modular library to load the necessary functionality on demand.</p>
          </li>
          <li>
            <p>Provides a fully customizable toolbar.</p>
          </li>
          <li>
            <p>Provides HTML view to edit the source directly for developers.</p>
          </li>
          <li>
            <p>Supports third-party library integration.</p>
          </li>
          <li>
            <p>Allows preview of modified content before saving it.</p>
          </li>
          <li>
            <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
          </li>
          <li>
            <p>Contains undo/redo manager.</p>
          </li>
          <li>
            <p>Creates bulleted and numbered lists.</p>
          </li>
        </ul>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Count]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

Undo/Redo manager

Undo and redo tools allow you to edit the text by disregard/cancel the recently made changes and restore it to previous state. It is a useful tool to restore the performed action which got changed by mistake. By default, upto 30 actions can be undo/redo in the editor.

To undo and redo operations, do one of the following:

  • Press the undo/redo button on the toolbar.
  • Press the Ctrl + Z/Ctrl + Y combination on the keyboard.

Customize the undo/redo step count using the undoRedoSteps property. By default, undo/redo actions take 300ms time interval for store the action to the undoRedoManager. The time interval can be customized by using the undoRedoTimer.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
/**
 * Rich Text Editor - Undo/Redo Manager Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.toolbarSettings = {
            items: ['Undo', 'Redo']
        };
    }
    render() {
        return (<div>
  <RichTextEditorComponent height={450} toolbarSettings={this.toolbarSettings} undoRedoSteps={50} undoRedoTimer={400}>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
      Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
      </li>
      <li>
        <p>Capable of handling markdown editing.</p>
      </li>
      <li>
        <p>Contains a modular library to load the necessary functionality on demand.</p>
      </li>
      <li>
        <p>Provides a fully customizable toolbar.</p>
      </li>
      <li>
        <p>Provides HTML view to edit the source directly for developers.</p>
      </li>
      <li>
        <p>Supports third-party library integration.</p>
      </li>
      <li>
        <p>Allows preview of modified content before saving it.</p>
      </li>
      <li>
        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
      </li>
      <li>
        <p>Contains undo/redo manager.</p>
      </li>
      <li>
        <p>Creates bulleted and numbered lists.</p>
      </li>
    </ul>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
  </RichTextEditorComponent>
  </div>);
    }
}
export default App;
Copied to clipboard
/**
 * Rich Text Editor - Undo/Redo Manager Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private toolbarSettings: object = {
items: ['Undo', 'Redo']
  }

  public render() {
return (<div>
  <RichTextEditorComponent  height={450} toolbarSettings={this.toolbarSettings} undoRedoSteps={50} undoRedoTimer={400}>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
      Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
      </li>
      <li>
        <p>Capable of handling markdown editing.</p>
      </li>
      <li>
        <p>Contains a modular library to load the necessary functionality on demand.</p>
      </li>
      <li>
        <p>Provides a fully customizable toolbar.</p>
      </li>
      <li>
        <p>Provides HTML view to edit the source directly for developers.</p>
      </li>
      <li>
        <p>Supports third-party library integration.</p>
      </li>
      <li>
        <p>Allows preview of modified content before saving it.</p>
      </li>
      <li>
        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
      </li>
      <li>
        <p>Contains undo/redo manager.</p>
      </li>
      <li>
        <p>Creates bulleted and numbered lists.</p>
      </li>
    </ul>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
  </RichTextEditorComponent>
  </div>);
  }
}

export default App;

Prevention of cross-site scripting (XSS)

The Rich Text Editor allow the users to edit the content with security by preventing cross-site scripting (XSS). By default, provided built-in support to remove the elements from editor content which cause XSS attack. The editor removes the elements based on the attributes if there is possible to execute script.

In the following sample, removed script tag and onmouseover attribute from content of the Rich Text Editor.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.template = `<div onmouseover='javascript:alert(1)'>Prevention of Cross Sit Scripting (XSS) </div> <script>alert('hi')</script>`;
    }
    render() {
        return (<div>
  <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} valueTemplate={this.template}>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
  </RichTextEditorComponent>
  </div>);
    }
}
export default App;
Copied to clipboard
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
 public template: string = `<div onmouseover='javascript:alert(1)'>Prevention of Cross Sit Scripting (XSS) </div> <script>alert('hi')</script>`;
  public render() {
return (<div>
  <RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} valueTemplate={this.template}>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
  </RichTextEditorComponent>
  </div>);
  }
}

export default App;

It’s only applicable to editorMode as HTML.

Custom cross-site scripting

You can also filter the elements and attributes additionally which cause the XSS attack through beforeSanitizeHtml event. Return the value from the event argument helper function to apply in the editor. If you want to prevent the built-in support and make own cross-site scripting rules, set cancel argument as true.

The following sample demonstrate how to filter script tag from value.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import { detach } from '@syncfusion/ej2-base';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.template = `<div onmouseover='javascript:alert(1)'>Prevention of Cross Sit Scripting (XSS) </div> <script>alert('hi')</script>`;
    }
    beforeSanitizeHtml(e) {
        e.helper = (value) => {
            e.cancel = true;
            let temp = document.createElement('div');
            temp.innerHTML = value;
            let scriptTag = temp.querySelector('script');
            if (scriptTag) {
                detach(scriptTag);
            }
            return temp.innerHTML;
        };
    }
    render() {
        return (<div>
<RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} valueTemplate={this.template} beforeSanitizeHtml={this.beforeSanitizeHtml = this.beforeSanitizeHtml.bind(this)}>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
  </RichTextEditorComponent>
  </div>);
    }
}
export default App;
Copied to clipboard
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar, BeforeSanitizeHtmlArgs } from '@syncfusion/ej2-react-richtexteditor';
import { detach } from '@syncfusion/ej2-base';
import * as React from 'react';

class App extends React.Component<{},{}> {
 public template: string = `<div onmouseover='javascript:alert(1)'>Prevention of Cross Sit Scripting (XSS) </div> <script>alert('hi')</script>`;
  public beforeSanitizeHtml(e: BeforeSanitizeHtmlArgs) {
  e.helper = (value: string) => {
      e.cancel = true;
      let temp: HTMLElement = document.createElement('div');
      temp.innerHTML = value;
      let scriptTag: HTMLElement = temp.querySelector('script');
      if (scriptTag) {
        detach(scriptTag);
      }
  return temp.innerHTML;
}
}
  public render() {
return (<div>
<RichTextEditorComponent id="defaultRTE" ref={(richtexteditor) => { this.rteObj = richtexteditor; }} valueTemplate={this.template} beforeSanitizeHtml={this.beforeSanitizeHtml= this.beforeSanitizeHtml.bind(this)}>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
  </RichTextEditorComponent>
  </div>);
  }
}

export default App;

Resizable support

This feature allows the editor to be resized dynamically. The users can enable or disable this feature using the enableResize property in the Rich Text Editor. If enableResize is set to true, the Rich Text Editor component creates grip at the bottom right corner, which allows resizing the component in the diagonal direction. The following sample demonstrates the resizable feature.

Enabling the resizable support

To render the Rich Text Editor in the resizable mode, set the enableResize property to true. The above feature is built as module and hence the Resize module needs to be included in your application.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    render() {
        return (<RichTextEditorComponent enableResize={this.resize}>
      <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
  Users can format their content using standard toolbar commands.</p>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}/>
          </RichTextEditorComponent>);
    }
}
export default App;
Copied to clipboard
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {

  public render() {
return (
      <RichTextEditorComponent enableResize={this.resize}  >
      <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
  Users can format their content using standard toolbar commands.</p>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]} />
          </RichTextEditorComponent>
);
  }
}

export default App;

Specifying the Minimum and Maximum width and height for Resize

To have a restricted resizable area for the RichTextEditor, you need to specify the min-width, max-width, min-height, and max-height CSS properties for the control’s wrapper element. By default, the control is capable of resizing upto the current viewport. The e-richtexteditor CSS class will be available in the component’s wrapper and can be used for applying the above mentioned styles.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    render() {
        return (<RichTextEditorComponent enableResize={this.resize}>
      <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
  Users can format their content using standard toolbar commands.</p>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]}/>
          </RichTextEditorComponent>);
    }
}
export default App;
Copied to clipboard
/**
 * Rich Text Editor - Resizable Sample
 */
import { HtmlEditor, Image, Inject, Link, Resize, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {

  public render() {
return (
      <RichTextEditorComponent enableResize={this.resize}  >
      <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
  Users can format their content using standard toolbar commands.</p>
          <Inject services={[HtmlEditor, Toolbar, Image, Link, Resize, QuickToolbar]} />
          </RichTextEditorComponent>
);
  }
}

export default App;

Number and Bullet Format Lists

This feature allows the user to change the appearance of the Numbered and Bulleted lists. Users can also apply different numbering or bullet formats lists such as lowercase greek, upper Alpha, square and circles. You can also customize the style type of the lists to be populated in the dropdown from the toolbar by using the numberFormatList and bulletFormatList properties in the Rich Text Editor.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
/**
 * Rich Text Editor - Number/Bullet Format list Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.toolbarSettings = {
            items: ['NumberFormatList', 'BulletFormatList']
        };
    }
    render() {
        return (<div>
  <RichTextEditorComponent toolbarSettings={this.toolbarSettings}>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
      Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
      </li>
      <li>
        <p>Capable of handling markdown editing.</p>
      </li>
      <li>
        <p>Contains a modular library to load the necessary functionality on demand.</p>
      </li>
      <li>
        <p>Provides a fully customizable toolbar.</p>
      </li>
      <li>
        <p>Provides HTML view to edit the source directly for developers.</p>
      </li>
      <li>
        <p>Supports third-party library integration.</p>
      </li>
      <li>
        <p>Allows preview of modified content before saving it.</p>
      </li>
      <li>
        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
      </li>
      <li>
        <p>Contains undo/redo manager.</p>
      </li>
      <li>
        <p>Creates bulleted and numbered lists.</p>
      </li>
    </ul>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]}/>
  </RichTextEditorComponent>
  </div>);
    }
}
export default App;
Copied to clipboard
/**
 * Rich Text Editor - Number/Bullet Format list Sample
 */
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  private toolbarSettings: object = {
items: ['NumberFormatList', 'BulletFormatList']
  }

  public render() {
return (<div>
  <RichTextEditorComponent toolbarSettings={this.toolbarSettings}>
    <p>The Rich Text Editor component is WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update the content.
      Users can format their content using standard toolbar commands.</p>
    <p><b>Key features:</b></p>
    <ul>
      <li>
        <p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes</p>
      </li>
      <li>
        <p>Capable of handling markdown editing.</p>
      </li>
      <li>
        <p>Contains a modular library to load the necessary functionality on demand.</p>
      </li>
      <li>
        <p>Provides a fully customizable toolbar.</p>
      </li>
      <li>
        <p>Provides HTML view to edit the source directly for developers.</p>
      </li>
      <li>
        <p>Supports third-party library integration.</p>
      </li>
      <li>
        <p>Allows preview of modified content before saving it.</p>
      </li>
      <li>
        <p>Handles images, hyperlinks, video, hyperlinks, uploads, etc.</p>
      </li>
      <li>
        <p>Contains undo/redo manager.</p>
      </li>
      <li>
        <p>Creates bulleted and numbered lists.</p>
      </li>
    </ul>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar]} />
  </RichTextEditorComponent>
  </div>);
  }
}

export default App;
Previous
Next