Paste Cleanup in React Rich Text Editor Component

27 Feb 202524 minutes to read

The Rich Text Editor simplifies the conversion of Microsoft Word content to HTML format, preserving formatting and styles. The pasteCleanup settings property allows you to control the formatting and styles when pasting content into the editor. The following settings are available to clean up the content:

API Description Default Value Type
prompt Invokes a prompt dialog with paste options when pasting content into the editor false boolean
plainText Paste the content as plain text false boolean
keepFormat Maintains the same format as the copied content true boolean
deniedTags Ignores specified tags when pasting HTML content null string[]
deniedAttrs Filters out specified attributes from the pasted content null string[]
allowedStyleProps Accepts specified style attributes and removes others from the pasted content [‘background’, ‘background-color’, ‘border’, ‘border-bottom’, ‘border-left’, ‘border-radius’, ‘border-right’, ‘border-style’, ‘border-top’, ‘border-width’, ‘clear’, ‘color’, ‘cursor’, ‘direction’, ‘display’, ‘float’, ‘font’, ‘font-family’, ‘font-size’, ‘font-weight’, ‘font-style’, ‘height’, ‘left’, ‘line-height’, ‘margin’, ‘margin-top’, ‘margin-left’, ‘margin-right’, ‘margin-bottom’, ‘max-height’, ‘max-width’, ‘min-height’, ‘min-width’, ‘overflow’, ‘overflow-x’, ‘overflow-y’, ‘padding’, ‘padding-bottom’, ‘padding-left’, ‘padding-right’, ‘padding-top’, ‘position’, ‘right’, ‘table-layout’, ‘text-align’, ‘text-decoration’, ‘text-indent’, ‘top’, ‘vertical-align’, ‘visibility’, ‘white-space’, ‘width’] string[]

To use PasteCleanup feature, inject link module using the <Inject services{[PasteCleanup]} />.

Understanding Paste Options in the Prompt Dialog

When prompt is set to true, pasting the content in the editor will open a dialog box that contains three options Keep, Clean, and Plain Text as radio buttons:

  1. Keep: Maintains the same format as the copied content.
  2. Clean: Clears all style formats from the copied content.
  3. Plain Text: Pastes the copied content as plain text without any formatting or style. (including the removal of all tags).

When prompt value is set true, the API properties plainText and keepFormat will not be considered for processing when pasting the content.

How to Paste as Plain Text

Setting plainText to true converts the copied content to plain text by removing all HTML tags and styles. Only the plain text is pasted into the editor.

When plainText is set to true, set prompt to false. The keepFormat property will not be considered.

Maintaining Formatting with Keep Format Option

When keepFormat is set to true, the copied content maintains all style formatting allowed in the allowedStyleProps when pasted into the editor.

If keepFormat is set to false, all styles in the copied content are removed, regardless of the allowedStyleProps settings.

When keepFormat is set to true, set both prompt and plainText to false.

Cleaning Formatting During Paste

Setting cleanFormat to true removes all applied styles from the pasted content while retaining all other HTML tags in the editor.

When cleanFormat is set to true, set prompt, plainText, and keepFormat to false.

Managing Denied Tags for Paste Cleanup

When deniedTags values are set, the specified tags will be removed from the pasted content. For example,

  • 'a': Removes all anchor tags.
  • 'a[!href]': Removes anchor tags without the ‘href’ attribute.
  • 'a[href, target]': Removes anchor tags with both ‘href’ and ‘target’ attributes.

Configuring Denied Attributes in Paste Settings

When deniedAttrs values are set, the specified attributes will be removed from all tags in the pasted content. For example,

'id', 'title': Removes ‘id’ and ‘title’ attributes from all tags.

Allowing Specific Style Properties for Pasted Content

By default, the following basic styles are allowed on pasting the content to the editor.

[‘background’, ‘background-color’, ‘border’, ‘border-bottom’, ‘border-left’, ‘border-radius’, ‘border-right’, ‘border-style’, ‘border-top’, ‘border-width’, ‘clear’, ‘color’, ‘cursor’, ‘direction’, ‘display’, ‘float’, ‘font’, ‘font-family’, ‘font-size’, ‘font-weight’, ‘font-style’, ‘height’, ‘left’, ‘line-height’, ‘margin’, ‘margin-top’, ‘margin-left’, ‘margin-right’, ‘margin-bottom’, ‘max-height’, ‘max-width’, ‘min-height’, ‘min-width’, ‘overflow’, ‘overflow-x’, ‘overflow-y’, ‘padding’, ‘padding-bottom’, ‘padding-left’, ‘padding-right’, ‘padding-top’, ‘position’, ‘right’, ‘table-layout’, ‘text-align’, ‘text-decoration’, ‘text-indent’, ‘top’, ‘vertical-align’, ‘visibility’, ‘white-space’, ‘width’]

When you configure allowedStyleProps, the styles, which matches the ‘allowed style properties’ list are allowed, all other style properties will be removed on pasting the content in the editor.

For Example,

allowedStyleProps: ['color', 'margin', 'font-size']': This will allow only the style properties ‘color’ and ‘margin’ in each pasted element.

In the following example, the paste cleanup related settings are explained with its module configuration:

[Class-component]

/**
 * Rich Text Editor - Paste Cleanup Sample
 */
import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {

    rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

    toolbarSettings = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
        ]
    };
    pasteCleanupSettings = {
        allowedStyleProps: ['color', 'margin', 'font-size'],
        deniedAttrs: ['class', 'title', 'id'],
        deniedTags: ['a'],
        keepFormat: false,
        plainText: false,
        prompt: true
    };
    render() {
        return (<RichTextEditorComponent height={450} value={this.rteValue} toolbarSettings={this.toolbarSettings} pasteCleanupSettings={this.pasteCleanupSettings}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]}/>
      </RichTextEditorComponent>);
    }
}
export default App;
/**
 * Rich Text Editor - Paste Cleanup Sample
 */
import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

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

  private rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  private toolbarSettings: object = {
    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
      'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
      'LowerCase', 'UpperCase', '|',
      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
      'Outdent', 'Indent', '|',
      'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
    ]
  }
  private pasteCleanupSettings: object = {
    allowedStyleProps: ['color', 'margin', 'font-size'],
    deniedAttrs: ['class', 'title', 'id'],
    deniedTags: ['a'],
    keepFormat: false,
    plainText: false,
    prompt: true
  }

  public render() {
    return (
      <RichTextEditorComponent height={450} value={this.rteValue} toolbarSettings={this.toolbarSettings} pasteCleanupSettings={this.pasteCleanupSettings}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

/**
 * Rich Text Editor - Paste Cleanup Sample
 */
import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
function App() {

    let rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

    let toolbarSettings = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
        ]
    };
    let pasteCleanupSettings = {
        allowedStyleProps: ['color', 'margin', 'font-size'],
        deniedAttrs: ['class', 'title', 'id'],
        deniedTags: ['a'],
        keepFormat: false,
        plainText: false,
        prompt: true
    };
    return (<RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings} pasteCleanupSettings={pasteCleanupSettings}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]}/>
    </RichTextEditorComponent>);
}
export default App;
/**
 * Rich Text Editor - Paste Cleanup Sample
 */
import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {

  let rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  let toolbarSettings: object = {
    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
      'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
      'LowerCase', 'UpperCase', '|',
      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
      'Outdent', 'Indent', '|',
      'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
    ]
  }
  let pasteCleanupSettings: object = {
    allowedStyleProps: ['color', 'margin', 'font-size'],
    deniedAttrs: ['class', 'title', 'id'],
    deniedTags: ['a'],
    keepFormat: false,
    plainText: false,
    prompt: true
  }

  return (
    <RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings} pasteCleanupSettings={pasteCleanupSettings}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]} />
    </RichTextEditorComponent>
  );
}

export default App;

Manual Customization of Pasted Content

The Rich Text Editor enables the customization of copied content prior to pasting it into the editor. By configuring the afterPasteCleanUp event, users can exercise precise control over formatting and content modifications after the paste action is executed.

In the following example, the afterPasteCleanUp event is configured to remove images from the copied content. To understand this feature better, try pasting content that includes an image into the editor.

[Class-component]

import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { detach } from '@syncfusion/ej2-base';

class App extends React.Component {

    rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

    toolbarSettings = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
        ]
    };
    pasteCleanupSettings = {
        allowedStyleProps: ['color', 'margin', 'font-size'],
        deniedAttrs: ['class', 'title', 'id'],
        deniedTags: ['a'],
        keepFormat: false,
        plainText: false,
        prompt: true
    };

    afterPasteCleanupHandler(args) {
        let divElement = document.createElement('div');
        divElement.innerHTML = args.value;
        let pasteCleanupImage = divElement.querySelector('.pasteContent_Img');
        if (pasteCleanupImage) {
          detach(pasteCleanupImage);
          args.value = divElement.innerHTML;
        }
    }

    render() {
        return (<RichTextEditorComponent height={450}  afterPasteCleanup={this.afterPasteCleanupHandler} value={this.rteValue} toolbarSettings={this.toolbarSettings} pasteCleanupSettings={this.pasteCleanupSettings}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]}/>
      </RichTextEditorComponent>);
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, RichTextEditorComponent, Toolbar, PasteCleanupArgs } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { detach } from '@syncfusion/ej2-base';

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

  private rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  private toolbarSettings: object = {
    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
      'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
      'LowerCase', 'UpperCase', '|',
      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
      'Outdent', 'Indent', '|',
      'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
    ]
  }
  private pasteCleanupSettings: object = {
    allowedStyleProps: ['color', 'margin', 'font-size'],
    deniedAttrs: ['class', 'title', 'id'],
    deniedTags: ['a'],
    keepFormat: false,
    plainText: false,
    prompt: true
  }

  public afterPasteCleanupHandler(args: PasteCleanupArgs) {
    let divElement: HTMLElement = document.createElement('div');
    divElement.innerHTML = args.value;
    let pasteCleanupImage: HTMLElement = divElement.querySelector('.pasteContent_Img') as HTMLElement;
    if (pasteCleanupImage) {
        detach(pasteCleanupImage);
        args.value = divElement.innerHTML;
    }
  }

  public render() {
    return (
      <RichTextEditorComponent height={450} value={this.rteValue} afterPasteCleanup={this.afterPasteCleanupHandler} toolbarSettings={this.toolbarSettings} pasteCleanupSettings={this.pasteCleanupSettings}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { detach } from '@syncfusion/ej2-base';

function App() {

    let rteValue = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

    let toolbarSettings = {
        items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
            'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
            'LowerCase', 'UpperCase', '|',
            'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
            'Outdent', 'Indent', '|',
            'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
            'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
        ]
    };
    let pasteCleanupSettings = {
        allowedStyleProps: ['color', 'margin', 'font-size'],
        deniedAttrs: ['class', 'title', 'id'],
        deniedTags: ['a'],
        keepFormat: false,
        plainText: false,
        prompt: true
    };

    const afterPasteCleanupHandler = (args) => {
        let divElement = document.createElement('div');
        divElement.innerHTML = args.value;
        let pasteCleanupImage = divElement.querySelector('.pasteContent_Img');
        if (pasteCleanupImage) {
          detach(pasteCleanupImage);
          args.value = divElement.innerHTML;
        }
    };

    return (<RichTextEditorComponent height={450} value={rteValue}  afterPasteCleanup={afterPasteCleanupHandler} toolbarSettings={toolbarSettings} pasteCleanupSettings={pasteCleanupSettings}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]}/>
    </RichTextEditorComponent>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, PasteCleanup, QuickToolbar, PasteCleanupArgs, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { detach } from '@syncfusion/ej2-base';

function App() {

  let rteValue:string = "<p>The Syncfudion Rich Text Editor, a WYSIWYG (what you see is what you get) editor, is a user interface that allows you to create, edit, and format rich text content. You can try out a demo of this editor here.</p><p><b>Key features:</b></p><ul><li><p>Provides &lt;IFRAME&gt; and &lt;DIV&gt; modes.</p></li><li><p>Bulleted and numbered lists.</p></li><li><p>Handles images, hyperlinks, videos, hyperlinks, uploads, etc.</p></li><li><p>Contains undo/redo manager. </p></li></ul><div style='display: inline-block; width: 60%; vertical-align: top; cursor: auto;'><img alt='Sky with sun' src='https://cdn.syncfusion.com/ej2/richtexteditor-resources/RTE-Overview.png' width='309' style='min-width: 10px; min-height: 10px; width: 309px; height: 174px;' class='e-rte-image e-imginline e-rte-drag-image' height='174' /></div>";

  let toolbarSettings: object = {
    items: ['Bold', 'Italic', 'Underline', 'StrikeThrough',
      'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
      'LowerCase', 'UpperCase', '|',
      'Formats', 'Alignments', 'OrderedList', 'UnorderedList',
      'Outdent', 'Indent', '|',
      'CreateLink', 'Image', '|', 'ClearFormat', 'Print',
      'SourceCode', 'FullScreen', '|', 'Undo', 'Redo'
    ]
  }
  let pasteCleanupSettings: object = {
    allowedStyleProps: ['color', 'margin', 'font-size'],
    deniedAttrs: ['class', 'title', 'id'],
    deniedTags: ['a'],
    keepFormat: false,
    plainText: false,
    prompt: true
  }

  const afterPasteCleanupHandler = (args: PasteCleanupArgs) => {
    let divElement: HTMLElement = document.createElement('div');
    divElement.innerHTML = args.value;
    let pasteCleanupImage: HTMLElement = divElement.querySelector('.pasteContent_Img') as HTMLElement;
    if (pasteCleanupImage) {
        detach(pasteCleanupImage);
        args.value = divElement.innerHTML;
    }
  };

  return (
    <RichTextEditorComponent height={450} value={rteValue} toolbarSettings={toolbarSettings} afterPasteCleanup={afterPasteCleanupHandler} pasteCleanupSettings={pasteCleanupSettings}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup]} />
    </RichTextEditorComponent>
  );
}

export default App;