{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-paste-from-ms-word",
  "framework": "vue",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "paste-from-ms-word",
  "dependencies": [
    "@syncfusion/ej2-vue-dropdowns",
    "@syncfusion/ej2-vue-richtexteditor",
    "@syncfusion/ej2-vue-inputs"
  ],
  "description": "Rich text editor with paste-from-Word cleanup rules and a format-prompt dropdown.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/rich-text-editor-paste-from-ms-word.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-paste-from-ms-word/RichTextEditor.vue",
      "content": "<template>\n<div>\n<div class=\"col-lg-8 control-section\">\n    <div class=\"control-wrapper\">\n        <div class=\"sample-container\">\n            <div class=\"default-section\">\n                <ejs-richtexteditor ref=\"rteInstance\" :pasteCleanupSettings=\"pasteCleanupSettings\">\n                     <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>\n                     <ul>\n                        <li><strong>Prompt </strong>- specifies whether to enable the prompt when pasting in Rich Text Editor\n                        </li>\n                        <li><strong>Plain Text </strong>- specifies whether to paste as plain text or not in Rich Text Editor.\n                        </li>\n                        <li><strong>Keep Format</strong>- specifies whether to keep or remove the format when pasting in Rich Text Editor.\n                        </li>\n                        <li><strong>Denied Tags</strong> - specifies the tags to restrict when pasting in Rich Text Editor.\n                        </li>\n                        <li><strong>Denied Attributes</strong> - specifies the attributes to restrict when pasting in Rich Text Editor.\n                        </li>\n                        <li><strong>Allowed Style Properties</strong> - specifies the allowed style properties when pasting in Rich Text Editor.\n                        </li>\n                    </ul>\n                    <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>\n                </ejs-richtexteditor>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n    <div title=\"Properties\" id=\"property\">\n        <table title=\"Properties\" id=\"property\">\n            <tbody>\n                <tr>\n                    <td>\n                        <div>Format Option </div>\n                    </td>\n                    <td>\n                        <div>\n                            <ejs-dropdownlist ref=\"formatOptionInstance\" :dataSource=\"formatData\"  :fields='fields' :popupHeight=\"height\" :change=\"formatChange\" :value='value'></ejs-dropdownlist>\n                        </div>\n                    </td>\n                </tr>\n                <tr>\n                    <td>\n                        <div>Denied Tags </div>\n                    </td>\n                    <td>\n                        <div>\n                            <ejs-textbox ref=\"deniedTagsInstance\" type=\"text\" class=\"e-input\" placeholder=\"'img[!href]', 'h1'\" :blur=\"deniedTagChange\"></ejs-textbox>\n                        </div>\n                    </td>\n                </tr>\n                <tr>\n                    <td>\n                        <div>Denied Attributes </div>\n                    </td>\n                    <td>\n                        <div>\n                            <ejs-textbox ref=\"deniedAttributesInstance\" type=\"text\" class=\"e-input\" placeholder=\"'id', 'title'\" :blur=\"deniedAttrsChange\"></ejs-textbox>\n                        </div>\n                    </td>\n                </tr>\n                <tr>\n                    <td>\n                        <div>Allowed Style Properties </div>\n                    </td>\n                    <td>\n                        <div>\n                            <ejs-textbox ref=\"allowedStylePropertiesInstance\" type=\"text\" class=\"e-input\" placeholder=\"'href', 'style'\" :blur=\"allowStyleChange\"></ejs-textbox>\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>\n\n</div>\n</template>\n<style scoped>\n.control_wrapper {\n    max-width: 500px;\n    margin: auto;\n    border: 1px solid #dddddd;\n    border-radius: 3px;\n}\n\n.control-section {\n    overflow: auto;\n    padding-bottom: 10px;\n    position: relative;\n}\n</style>\n<script>\nimport { RichTextEditorComponent, Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat } from \"@syncfusion/ej2-vue-richtexteditor\";\nimport { TextBoxComponent } from \"@syncfusion/ej2-vue-inputs\";\nimport { DropDownListComponent } from \"@syncfusion/ej2-vue-dropdowns\";\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n\nconst formatData = [\n        {\n            \"Id\": \"prompt\",\n            \"format\": \"Prompt\"\n        },\n        {\n            \"Id\": \"plainTextFormatting\",\n            \"format\": \"Plain Text\"\n        },\n        {\n            \"Id\": \"keepFormating\",\n            \"format\": \"Keep Format\"\n        },\n        {\n            \"Id\": \"cleanFormatting\",\n            \"format\": \"Clean Format\"\n        }\n    ];\n\nexport default {\n    components: {\n      'ejs-richtexteditor': RichTextEditorComponent,\n      'ejs-textbox': TextBoxComponent,\n      'ejs-dropdownlist': DropDownListComponent\n    },\n    data: function() {\n        return {\n            pasteCleanupSettings: {\n                prompt: true,\n                plainText: false,\n                keepFormat: false\n            },\n            height: '200px',\n            formatData: formatData,\n            fields: { text: 'format', value: 'Id' }, \n            value: 'prompt'\n        };\n    },\n    methods: {\n        formatChange: function() {\n            if (this.$refs.formatOptionInstance.ej2Instances.value === 'prompt') {\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = true;\n            } else if (this.$refs.formatOptionInstance.ej2Instances.value === 'plainTextFormatting') {\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = false;\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.plainText = true;\n            } else if (this.$refs.formatOptionInstance.ej2Instances.value === 'keepFormating') {\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = false;\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.plainText = false;\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.keepFormat = true;\n            } else if (this.$refs.formatOptionInstance.ej2Instances.value === 'cleanFormatting') {\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.prompt = false;\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.plainText = false;\n                this.$refs.rteInstance.ej2Instances.pasteCleanupSettings.keepFormat = false;\n            }\n        },\n        deniedTagChange: function () {\n            this.onPasteCleanupSettingsChange(this.$refs.deniedTagsInstance.ej2Instances.value,'deniedTags');\n        },\n       deniedAttrsChange: function () {\n            this.onPasteCleanupSettingsChange(this.$refs.deniedAttributesInstance.ej2Instances.value,'deniedAttrs');\n        },\n       allowStyleChange: function () {\n           this.onPasteCleanupSettingsChange(this.$refs.allowedStylePropertiesInstance.ej2Instances.value,'allowedStyleProps');\n       },\n       onPasteCleanupSettingsChange: function (value, settingsProperty) {\n        if (!isNullOrUndefined(value)) {\n        let arrayValue = value.split(',').map((item) => item.trim().replace(/^['\"]|['\"]$/g, ''));\n        this.$refs.rteInstance.ej2Instances.pasteCleanupSettings[settingsProperty] = arrayValue.filter((prop) => prop !== '');\n      }\n      },\n    },\n    provide:{\n        richtexteditor:[Toolbar, Link, Image, HtmlEditor, QuickToolbar, PasteCleanup, Table, Video, Audio, ClipBoardCleanup, AutoFormat]\n    }\n}\n</script>\n"
    },
    {
      "target": "src/components/rich-text-editor-paste-from-ms-word/RichTextEditorView.vue",
      "content": "<template>\n  <RTE />\n</template>\n\n<script setup>\nimport RTE from '../../components/RichTextEditor.vue'\n</script>"
    }
  ]
}