Clipboard Cleanup in React Rich Text Editor Component

13 Apr 20269 minutes to read

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 link 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]

app.jsx

/**
 * 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;

app.tsx

/**
 * 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]

app.jsx

/**
 * 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;

app.tsx

/**
 * 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]

app.jsx

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;

app.tsx

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]

app.jsx

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;

app.tsx

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 application - it’s the #1 way to prevent style explosion.
• Combine with Paste Cleanup module for even stricter incoming paste handling.
• Use beforeClipboardWrite sparingly — heavy processing can slightly delay Ctrl+C.

Common Issues

• “Copied content still has inline styles” → Confirm ClipboardCleanup is in providers.
• “Event not firing” → Make sure you’re using the correct event name beforeClipboardWrite (camelCase in React).