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

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

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

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-dropdowns @syncfusion/ej2-vue-richtexteditor @syncfusion/ej2-vue-inputs
```

**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.vue

```vue
<template>
<div>
<div class="col-lg-8 control-section">
    <div class="control-wrapper">
        <div class="sample-container">
            <div class="default-section">
                <ejs-richtexteditor ref="rteInstance" :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>
                </ejs-richtexteditor>
            </div>
        </div>
    </div>
</div>
<div class="col-lg-4 property-section">
    <div title="Properties" id="property">
        <table title="Properties" id="property">
            <tbody>
                <tr>
                    <td>
                        <div>Format Option </div>
                    </td>
                    <td>
                        <div>
                            <ejs-dropdownlist ref="formatOptionInstance" :dataSource="formatData"  :fields='fields' :popupHeight="height" :change="formatChange" :value='value'></ejs-dropdownlist>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>Denied Tags </div>
                    </td>
                    <td>
                        <div>
                            <ejs-textbox ref="deniedTagsInstance" type="text" 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 ref="deniedAttributesInstance" type="text" 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 ref="allowedStylePropertiesInstance" type="text" class="e-input" placeholder="'href', 'style'" :blur="allowStyleChange"></ejs-textbox>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

</div>
</template>
<style scoped>
.control_wrapper {
    max-width: 500px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

.control-section {
    overflow: auto;
    padding-bottom: 10px;
    position: relative;
}
</style>
<script>
import { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from "@syncfusion/ej2-vue-richtexteditor";
import { TextBoxComponent } from "@syncfusion/ej2-vue-inputs";
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { isNullOrUndefined } from '@syncfusion/ej2-base';

const formatData = [
        {
            "Id": "prompt",
            "format": "Prompt"
        },
        {
            "Id": "plainTextFormatting",
            "format": "Plain Text"
        },
        {
            "Id": "keepFormating",
            "format": "Keep Format"
        },
        {
            "Id": "cleanFormatting",
            "format": "Clean Format"
        }
    ];

export default {
    components: {
      'ejs-richtexteditor': RichTextEditorComponent,
      'ejs-textbox': TextBoxComponent,
      'ejs-dropdownlist': DropDownListComponent
    },
    data: function() {
        return {
            pasteCleanupSettings: {
                prompt: true,
                plainText: false,
                keepFormat: false
            },
            height: '200px',
            formatData: formatData,
            fields: { text: 'format', value: 'Id' }, 
            value: 'prompt'
        };
    },
    methods: {
        formatChange: function() {
            if (this.$refs.formatOptionInstance.ej2Instances.value === 'prompt') {
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = true;
            } else if (this.$refs.formatOptionInstance.ej2Instances.value === 'plainTextFormatting') {
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = false;
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.plainText = true;
            } else if (this.$refs.formatOptionInstance.ej2Instances.value === 'keepFormating') {
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = false;
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.plainText = false;
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.keepFormat = true;
            } else if (this.$refs.formatOptionInstance.ej2Instances.value === 'cleanFormatting') {
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = false;
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.plainText = false;
                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.keepFormat = false;
            }
        },
        deniedTagChange: function () {
            this.onPasteCleanupSettingsChange(this.$refs.deniedTagsInstance.ej2Instances.value,'deniedTags');
        },
       deniedAttrsChange: function () {
            this.onPasteCleanupSettingsChange(this.$refs.deniedAttributesInstance.ej2Instances.value,'deniedAttrs');
        },
       allowStyleChange: function () {
           this.onPasteCleanupSettingsChange(this.$refs.allowedStylePropertiesInstance.ej2Instances.value,'allowedStyleProps');
       },
       onPasteCleanupSettingsChange: function (value, settingsProperty) {
        if (!isNullOrUndefined(value)) {
        let arrayValue = value.split(',').map((item) => item.trim().replace(/^['"]|['"]$/g, ''));
        this.$refs.rteInstance.ej2Instances.pasteCleanupSettings[settingsProperty] = arrayValue.filter((prop) => prop !== '');
      }
      },
    },
    provide:{
        richtexteditor:[Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]
    }
}
</script>

```

### src/components/rich-text-editor-paste-from-ms-word/RichTextEditorView.vue

```vue
<template>
  <RTE />
</template>

<script setup>
import RTE from '../../components/RichTextEditor.vue'
</script>
```