# rich-text-editor-paste-from-ms-word

> Rich text editor with paste-from-Word cleanup rules and a format-prompt dropdown.

**Framework:** react  **Component:** RichTextEditor  **Variant:** paste-from-ms-word

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/ts/rich-text-editor-paste-from-ms-word.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-dropdowns @syncfusion/ej2-react-richtexteditor
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/rich-text-editor-paste-from-ms-word/RichTextEditor.tsx

```tsx
/**
 * Rich Text Editor Paste Cleanup sample
 */
import { DropDownListComponent, type FieldSettingsModel } from '@syncfusion/ej2-react-dropdowns';
import { HtmlEditor, Image, Inject, Link, PasteCleanup, type PasteCleanupSettingsModel, QuickToolbar, RichTextEditorComponent, Toolbar, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
import { isNullOrUndefined } from '@syncfusion/ej2-base';

function PasteCleanupRTE() {
    let rteObj: RichTextEditorComponent;
    let formatOption: DropDownListComponent;
    const pasteCleanupSettings: PasteCleanupSettingsModel = {
        prompt: true,
        plainText: false,
        keepFormat: false
    }
    let allowedStylePropertiesEle: HTMLInputElement = null;
    let allowedStylePropertiesRef: React.Ref<HTMLInputElement> = (element) => {
        allowedStylePropertiesEle = element;
    };
    let deniedTagsEle: HTMLInputElement = null;
    let deniedTagsRef: React.Ref<HTMLInputElement> = (element) => {
        deniedTagsEle = element;
    };
    let deniedAttributesEle: HTMLInputElement = null;
    let deniedAttributesRef: React.Ref<HTMLInputElement> = element => {
        deniedAttributesEle = element;
    };
    const popupHeight: string = '200px';
    const value: string = "prompt";
    const fields: FieldSettingsModel = { text: "text", value: "value" };
    const formatData: { [key: string]: Object }[] = [
        { text: 'Prompt', value: 'prompt' },
        { text: 'Plain Text', value: 'plainText' },
        { text: 'Keep Format', value: 'keepFormat' },
        { text: 'Clean Format', value: 'cleanFormat' }
    ];
    function formatChange(): void {
        if (formatOption.value === 'prompt') {
            rteObj.pasteCleanupSettings.prompt = true;
        } else if (formatOption.value === 'plainText') {
            rteObj.pasteCleanupSettings.prompt = false;
            rteObj.pasteCleanupSettings.plainText = true;
        } else if (formatOption.value === 'keepFormat') {
            rteObj.pasteCleanupSettings.prompt = false;
            rteObj.pasteCleanupSettings.plainText = false;
            rteObj.pasteCleanupSettings.keepFormat = true;
        } else if (formatOption.value === 'cleanFormat') {
            rteObj.pasteCleanupSettings.prompt = false;
            rteObj.pasteCleanupSettings.plainText = false;
            rteObj.pasteCleanupSettings.keepFormat = false;
        }
    }
    function rendereComplete(): void {
        let allowedStylePropsElem: HTMLElement = allowedStylePropertiesEle;
        let deniedTagsElem: HTMLElement = deniedTagsEle;
        let deniedAttrsElem: HTMLElement = deniedAttributesEle;
        allowedStylePropsElem.addEventListener('blur', (e: FocusEvent) => {
            onPasteCleanupSettingsChange((e.target as HTMLInputElement).value, 'allowedStyleProps');
        });
        deniedAttrsElem.addEventListener('blur', (e: FocusEvent) => {
            onPasteCleanupSettingsChange((e.target as HTMLInputElement).value, 'deniedAttrs');
        });
        deniedTagsElem.addEventListener('blur', (e: FocusEvent) => {
            onPasteCleanupSettingsChange((e.target as HTMLInputElement).value, 'deniedTags');
        });
    }

    function onPasteCleanupSettingsChange(value: any, settingsProperty: string): void {
        if (!isNullOrUndefined(value)) {
            const arrayValue = value.split(',').map((item) => item.trim().replace(/^['"]|['"]$/g, ''));
            rteObj.pasteCleanupSettings[settingsProperty] = arrayValue.filter((prop) => prop !== '');
        }
    }
    return (
        <div className='control-pane'>
            <div className='col-lg-8'>
                <div className='control-section' id="rteAPI">
                    <div className='rte-control-section'>
                        <RichTextEditorComponent id="PasteCleanup" ref={(richtexteditor) => { rteObj = richtexteditor }}
                            pasteCleanupSettings={pasteCleanupSettings}>
                            <h4>Paste Cleanup in Rich Text Editor<br/></h4><p>The Rich Text Editor automatically <strong>cleans up formatted content</strong> when you paste from external sources like Word, Google Docs, or web pages.</p><p><b>Paste Cleanup properties:</b></p>
                                <ul>
                                    <li><strong>Prompt </strong>- specifies whether to enable the prompt when pasting in Rich Text Editor
                                    </li>
                                    <li><strong>Plain Text </strong>- specifies whether to paste as plain text or not in Rich Text Editor.
                                    </li>
                                    <li><strong>Keep Format</strong>- specifies whether to keep or remove the format when pasting in Rich Text Editor.
                                    </li>
                                    <li><strong>Denied Tags</strong> - specifies the tags to restrict when pasting in Rich Text Editor.
                                    </li>
                                    <li><strong>Denied Attributes</strong> - specifies the attributes to restrict when pasting in Rich Text Editor.
                                    </li>
                                    <li><strong>Allowed Style Properties</strong> - specifies the allowed style properties when pasting in Rich Text Editor.
                                    </li>
                                </ul>
                                <p><span><strong>Try It Out!</strong></span></p><p>Copy content from a web page or document and paste it here. The editor will display a prompt and allow you to input your options.</p>
                            <Inject services={[Toolbar, Image, Link, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]} />
                        </RichTextEditorComponent>
                    </div>
                </div>
            </div>
        </div>
    );
}
export default PasteCleanupRTE;
```