Clipboard Cleanup in React Rich Text Editor

The Rich Text Editor supports automatic cleanup of clipboard content during copy (Ctrl + C) and cut (Ctrl + X) operations. When this feature is enabled, unwanted inline styles are automatically removed from the clipboard content while preserving important structural elements such as tables, lists, and images. You can enable this behavior using the enableClipboardCleanup property.

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

When enableClipboardCleanup is set to true, copy and cut operations are intercepted to remove unwanted inline styles. When set to false, the browser’s default copy and cut behavior applies.

For a cleaner editing experience, enableClipboardCleanup is true by default.

[Class-component]

/**
 * Rich Text Editor - Clipboard Cleanup Sample
 */
import { HtmlEditor, Image, Inject, Link, ClipboardCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component {
    render() {
        return (<RichTextEditorComponent>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup]}/>
      </RichTextEditorComponent>);
    }
}
export default App;
/**
 * Rich Text Editor - Clipboard Cleanup Sample
 */
import { HtmlEditor, Image, Inject, Link, ClipboardCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

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

  public render() {
    return (
      <RichTextEditorComponent>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

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

    return (<RichTextEditorComponent>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup]}/>
    </RichTextEditorComponent>);
}
export default App;
/**
 * Rich Text Editor - Clipboard Cleanup Sample
 */
import { HtmlEditor, Image, Inject, Link, ClipboardCleanup, QuickToolbar, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {

  return (
    <RichTextEditorComponent>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, ClipboardCleanup]} />
    </RichTextEditorComponent>
  );
}

export default App;

Customizing Copied/Cut Content

You can use the beforeClipboardWrite event, which fires before content is written to the clipboard during copy or cut operations. This event lets you to modify the HTML and plain-text representations of the content and also determine whether the action is a copy or a cut.

In this example, the beforeClipboardWrite event is used to customize the selected content only during a copy operation, while the cut operation remains unaffected. To observe this behavior, try copying any text within the Rich Text Editor.

[Class-component]

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

class App extends React.Component {
    onBeforeClipboardWrite(args) {
        if (args.operation === 'copy') {
            args.htmlContent = '<h1>This is customized content triggered while copy event</h1>';
            args.plainTextContent = 'This is customized content triggered while copy event';
        }
    }

    render() {
        return (<RichTextEditorComponent beforeClipboardWrite={this.onBeforeClipboardWrite}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, ClipboardCleanup]}/>
      </RichTextEditorComponent>);
    }
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, ClipboardCleanup, ClipboardWriteEventArgs} from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

class App extends React.Component<{},{}> {
  public onBeforeClipboardWrite(args: ClipboardWriteEventArgs) {
      if (args.operation === 'copy') {
          args.htmlContent = '<h1>This is customized content triggered while copy event</h1>';
          args.plainTextContent = 'This is customized content triggered while copy event';
      }
  }

  public render() {
    return (
      <RichTextEditorComponent beforeClipboardWrite={this.onBeforeClipboardWrite}>
        <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, ClipboardCleanup, ClipboardWriteEventArgs]} />
      </RichTextEditorComponent>
    );
  }
}

export default App;

[Functional-component]

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

function App() {
  const onBeforeClipboardWrite = (args) => {
      if (args.operation === 'copy') {
          args.htmlContent = '<h1>This is customized content triggered while copy event</h1>';
          args.plainTextContent = 'This is customized content triggered while copy event';
      }
  };
  return (<RichTextEditorComponent beforeClipboardWrite={onBeforeClipboardWrite}>
    <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, ClipboardCleanup]} />
  </RichTextEditorComponent>);
}
export default App;
import { HtmlEditor, Image, Inject, Link, QuickToolbar, RichTextEditorComponent, Table, Toolbar, ClipboardCleanup, ClipboardWriteEventArgs } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';

function App() {
  const onBeforeClipboardWrite = (args: ClipboardWriteEventArgs) => {
    if (args.operation === 'copy') {
        args.htmlContent = '<h1>This is customized content triggered while copy event</h1>';
        args.plainTextContent = 'This is customized content triggered while copy event';
    }
  };

  return (
    <RichTextEditorComponent beforeClipboardWrite={onBeforeClipboardWrite}>
      <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, Table, ClipboardCleanup, ClipboardWriteEventArgs]} />
    </RichTextEditorComponent>
  );
}

export default App;

Best Practices & Troubleshooting

Best Practices

  • Always include ClipboardCleanup in production applications to prevent unwanted style retention.
  • Combine with the Paste Cleanup module for stricter control over incoming paste content.
  • Use beforeClipboardWrite judiciously—complex processing can introduce slight delays during copy operations.

Common Issues

  • Copied content still has inline styles — Verify that ClipboardCleanup is included in the Inject statement.
  • Event not firing — Ensure you are using the correct event name beforeClipboardWrite with proper camelCase in React components.