# 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/js/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.jsx

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

function PasteCleanupRTE() {
    let rteObj;
    let formatOption;
    const pasteCleanupSettings = {
        prompt: true,
        plainText: false,
        keepFormat: false
    };
    let allowedStylePropertiesEle = null;
    let allowedStylePropertiesRef = (element) => {
        allowedStylePropertiesEle = element;
    };
    let deniedTagsEle = null;
    let deniedTagsRef = (element) => {
        deniedTagsEle = element;
    };
    let deniedAttributesEle = null;
    let deniedAttributesRef = element => {
        deniedAttributesEle = element;
    };
    const popupHeight = '200px';
    const value = "prompt";
    const fields = { text: "text", value: "value" };
    const formatData = [
        { text: 'Prompt', value: 'prompt' },
        { text: 'Plain Text', value: 'plainText' },
        { text: 'Keep Format', value: 'keepFormat' },
        { text: 'Clean Format', value: 'cleanFormat' }
    ];
    function formatChange() {
        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() {
        let allowedStylePropsElem = allowedStylePropertiesEle;
        let deniedTagsElem = deniedTagsEle;
        let deniedAttrsElem = deniedAttributesEle;
        allowedStylePropsElem.addEventListener('blur', (e) => {
            onPasteCleanupSettingsChange(e.target.value, 'allowedStyleProps');
        });
        deniedAttrsElem.addEventListener('blur', (e) => {
            onPasteCleanupSettingsChange(e.target.value, 'deniedAttrs');
        });
        deniedTagsElem.addEventListener('blur', (e) => {
            onPasteCleanupSettingsChange(e.target.value, 'deniedTags');
        });
    }
    function onPasteCleanupSettingsChange(value, settingsProperty) {
        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;
```