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

> Rich text editor sample demonstrating formatted content pasted from Microsoft Word.

**Framework:** angular  **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/angular/rich-text-editor-paste-from-ms-word.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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/paste-cleanup.component.ts

```typescript
/**
 * Rich Text Editor Paste Cleanup functionality Sample
 */
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { RadioButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { RichTextEditorComponent, ToolbarService, PasteCleanupSettingsModel, LinkService, ImageService, RichTextEditorModule, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor';
import { PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';
import { HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';
import { Link, Count, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-angular-richtexteditor';
import { TextBox } from '@syncfusion/ej2-inputs'
import { DropDownListComponent, FieldSettingsModel, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { isNullOrUndefined } from '@syncfusion/ej2-base';

@Component({
    selector: 'control-content',
    templateUrl: 'paste-cleanup.html',
    encapsulation: ViewEncapsulation.None,
    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService],
    standalone: true,
    imports: [RichTextEditorModule, DropDownListModule, TextBoxModule]
})
export class PasteCleanupComponent {

    @ViewChild('pasteCleanupRTE')
    public rteObj!: RichTextEditorComponent;

    @ViewChild('formatOption')
    public formatObj!: DropDownListComponent;

    @ViewChild('prompt')
    public promptObj!: RadioButtonComponent;

    @ViewChild('plainText')
    public plainTextObj!: RadioButtonComponent;

    @ViewChild('keepFormat')
    public keepFormatObj!: RadioButtonComponent;

    @ViewChild('cleanFormat')
    public cleanFormatObj!: RadioButtonComponent;

    @ViewChild('deniedTags')
    public deniedTags!: TextBox;

    @ViewChild('deniedAttributes')
    public deniedAttributes!: TextBox;

    @ViewChild('allowedStyleProperties')
    public allowedStyleProperties!: TextBox;

    public pasteCleanupSettings: PasteCleanupSettingsModel = {
        prompt: true,
        plainText: false,
        keepFormat: false
    };

    public formatData: { [key: string]: Object }[] = [
        { Id: 'prompt', Format: 'Prompt' },
        { Id: 'plainTextFormatting', Format: 'Plain Text' },
        { Id: 'keepFormating', Format: 'Keep Format' },
        { Id: 'Clean Formatting', Format: 'Clean Format' }
    ];
    public fields: FieldSettingsModel = { text: 'Format', value: 'Format' };
    public height: string = '200px';
    public value: string = 'Prompt';

    public formatChange(): void {
        if (this.formatObj.value === 'Prompt') {
            this.rteObj.pasteCleanupSettings.prompt = true;
        } else if (this.formatObj.value === 'Plain Text') {
            this.rteObj.pasteCleanupSettings.prompt = false;
            this.rteObj.pasteCleanupSettings.plainText = true;
        } else if (this.formatObj.value === 'Keep Format') {
            this.rteObj.pasteCleanupSettings.prompt = false;
            this.rteObj.pasteCleanupSettings.plainText = false;
            this.rteObj.pasteCleanupSettings.keepFormat = true;
        } else if (this.formatObj.value === 'Clean Format') {
            this.rteObj.pasteCleanupSettings.prompt = false;
            this.rteObj.pasteCleanupSettings.plainText = false;
            this.rteObj.pasteCleanupSettings.keepFormat = false;
        }
    }

    public deniedTagChange(): void {
        this.onPasteCleanupSettingsChange(this.deniedTags.value, 'deniedTags');
    }
    public deniedAttrsChange(): void {
        this.onPasteCleanupSettingsChange(this.deniedAttributes.value, 'deniedAttrs');
    }
    public allowStyleChange(): void {
        this.onPasteCleanupSettingsChange(this.allowedStyleProperties.value, 'allowedStyleProps');
    }

    public onPasteCleanupSettingsChange(value: any, settingsProperty: string): void {
        if (!isNullOrUndefined(value)) {
            const arrayValue = value.split(',').map((item: any) => item.trim().replace(/^['"]|['"]$/g, ''));
            (this.rteObj.pasteCleanupSettings as any)[settingsProperty] = arrayValue.filter((prop: any) => prop !== '');
        }
    }
    editorValue: string = `<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>`;
}

```

### src/components/rich-text-editor-paste-from-ms-word/paste-cleanup.html

```html
<div class="col-lg-8 control-section sb-property-border">
    <div class="control-wrapper">
        <div class="sample-container">
            <div class="default-section">
                <ejs-richtexteditor id='pasteCleanupRTE' #pasteCleanupRTE [pasteCleanupSettings]="pasteCleanupSettings" [value]=editorValue>       
                </ejs-richtexteditor>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div id="property" title="Properties">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table id="property" title="Properties">
                <tbody>
                    <tr>
                        <td>
                            <div>Format Option </div>
                        </td>
                        <td>
                            <div>
                                <ejs-dropdownlist id='formatOption' #formatOption [dataSource]='formatData' (change)='formatChange()' [value]='value' [fields]='fields' [popupHeight]='height'></ejs-dropdownlist>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>Denied Tags </div>
                        </td>
                        <td>
                            <div>
                                <ejs-textbox #deniedTags class="e-input" placeholder="'img[!href]', 'h1'"
                                    (blur)="deniedTagChange()"></ejs-textbox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>Denied Attributes </div>
                        </td>
                        <td>
                            <div>
                                <ejs-textbox #deniedAttributes class="e-input" placeholder="'id', 'title'"
                                    (blur)="deniedAttrsChange()"></ejs-textbox>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>Allowed Style Properties </div>
                        </td>
                        <td>
                            <div>
                                <ejs-textbox #allowedStyleProperties class="e-input" placeholder="'href', 'style'"
                                    (blur)="allowStyleChange()"></ejs-textbox>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="action-description">
    <p>This example demonstrates the paste cleanup feature of the Rich Text Editor control. Copy your content from MS
        Word or other website, and paste it within the editor to cleanup.</p>
</div>

<div id="description">
    <p>The Rich Text Editor allows to paste the HTML content from MS Word or other websites. The editor cleanup the
        pasted HTML content by considering the following items.</p>
    <ul>
        <li>The unformatted HTML element (MOS XML format) content to standard HTML elements.</li>
        <li>The MS Office prefixed style properties is converted to proper CSS style properties.</li>
        <li>The unwanted tags, CSS styles, and comments are removed from the copied content.</li>
    </ul>
    <p>The following settings are available to cleanup the content in pasteCleanup settings property:</p>
    <ul>
        <li>Select any option in <code>Format Option</code> drop down list for the paste content.
            <ul>
                <li>Select the <code>Prompt</code> option to invoke prompt dialog with paste options on pasting the
                    content in editor.</li>
                <li>Select the <code>Plain Text</code> option to paste the content as plain text.</li>
                <li>Select the <code>Keep Format</code> option to keep the same format in the copied content.</li>
                <li>Select the <code>Clean Format</code> option to remove the style format in the copied content.</li>
            </ul>
        </li>
        <li>Fill the <code>denied tags</code> text box to ignore the tags when pasting HTML content. For example:
            <ul>
                <li><code>['a[!href]']</code> - paste the content by filtering anchor tags that don’t have the 'href'
                    attribute.</li>
                <li><code>['a[href, target]']</code> - paste the content by filtering anchor tags that have the 'href'
                    and 'target' attributes.</li>
            </ul>
        </li>
        
        <li>Fill the <code>denied attributes</code> to paste the content by filtering out these attributes from the
            content. For example:
            <ul>
               <li> <code>['id', 'title']</code> - This will remove the attributes 'id' and 'title' from all tags.</li>
            </ul>
        </li>
        
        <li>Fill the <code>allowed style properties</code> to paste the content by accepting these style attributes and
            removing other attributes. For example:
            <ul>
               <li> <code>['color', 'margin']</code> - This will allow only the style properties 'color' and 'margin' in
                each pasted element.</li>
            </ul>
        </li>
    </ul>
    <p><b>Injecting Module</b></p>
    <p>The previous features were built as modules to be included in your application. For example, inject the
        <code>'PasteCleanup'</code> module using
        <code>ToolbarService, LinkService, ImageService, HtmlEditorService, CountService, QuickToolbarService, PasteCleanupService</code> to use the paste
        cleanup feature.</p>
</div>
```