{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "rich-text-editor-paste-from-ms-word",
  "framework": "angular",
  "type": "registry:component",
  "component": "RichTextEditor",
  "variant": "paste-from-ms-word",
  "dependencies": [
    "@syncfusion/ej2-angular-richtexteditor"
  ],
  "description": "Rich text editor sample demonstrating formatted content pasted from Microsoft Word.",
  "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/angular/llms.txt",
    "skillPack": "syncfusion/angular-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/angular/rich-text-editor-paste-from-ms-word.md"
  },
  "files": [
    {
      "target": "src/components/rich-text-editor-paste-from-ms-word/paste-cleanup.component.ts",
      "content": "/**\n * Rich Text Editor Paste Cleanup functionality Sample\n */\nimport { Component, ViewChild, ViewEncapsulation } from '@angular/core';\nimport { RadioButtonComponent } from '@syncfusion/ej2-angular-buttons';\nimport { RichTextEditorComponent, ToolbarService, PasteCleanupSettingsModel, LinkService, ImageService, RichTextEditorModule, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService } from '@syncfusion/ej2-angular-richtexteditor';\nimport { PasteCleanupService } from '@syncfusion/ej2-angular-richtexteditor';\nimport { HtmlEditorService, QuickToolbarService } from '@syncfusion/ej2-angular-richtexteditor';\nimport { Link, Count, HtmlEditor, QuickToolbar } from '@syncfusion/ej2-angular-richtexteditor';\nimport { TextBox } from '@syncfusion/ej2-inputs'\nimport { DropDownListComponent, FieldSettingsModel, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';\nimport { TextBoxModule } from '@syncfusion/ej2-angular-inputs';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\n\n\n@Component({\n    selector: 'control-content',\n    templateUrl: 'paste-cleanup.html',\n    encapsulation: ViewEncapsulation.None,\n    providers: [ToolbarService, LinkService, ImageService, HtmlEditorService, QuickToolbarService, PasteCleanupService, VideoService, AudioService, TableService, ClipBoardCleanupService, AutoFormatService],\n    standalone: true,\n    imports: [RichTextEditorModule, DropDownListModule, TextBoxModule]\n})\nexport class PasteCleanupComponent {\n\n    @ViewChild('pasteCleanupRTE')\n    public rteObj!: RichTextEditorComponent;\n\n    @ViewChild('formatOption')\n    public formatObj!: DropDownListComponent;\n\n    @ViewChild('prompt')\n    public promptObj!: RadioButtonComponent;\n\n    @ViewChild('plainText')\n    public plainTextObj!: RadioButtonComponent;\n\n    @ViewChild('keepFormat')\n    public keepFormatObj!: RadioButtonComponent;\n\n    @ViewChild('cleanFormat')\n    public cleanFormatObj!: RadioButtonComponent;\n\n    @ViewChild('deniedTags')\n    public deniedTags!: TextBox;\n\n    @ViewChild('deniedAttributes')\n    public deniedAttributes!: TextBox;\n\n    @ViewChild('allowedStyleProperties')\n    public allowedStyleProperties!: TextBox;\n\n    public pasteCleanupSettings: PasteCleanupSettingsModel = {\n        prompt: true,\n        plainText: false,\n        keepFormat: false\n    };\n\n    public formatData: { [key: string]: Object }[] = [\n        { Id: 'prompt', Format: 'Prompt' },\n        { Id: 'plainTextFormatting', Format: 'Plain Text' },\n        { Id: 'keepFormating', Format: 'Keep Format' },\n        { Id: 'Clean Formatting', Format: 'Clean Format' }\n    ];\n    public fields: FieldSettingsModel = { text: 'Format', value: 'Format' };\n    public height: string = '200px';\n    public value: string = 'Prompt';\n\n    public formatChange(): void {\n        if (this.formatObj.value === 'Prompt') {\n            this.rteObj.pasteCleanupSettings.prompt = true;\n        } else if (this.formatObj.value === 'Plain Text') {\n            this.rteObj.pasteCleanupSettings.prompt = false;\n            this.rteObj.pasteCleanupSettings.plainText = true;\n        } else if (this.formatObj.value === 'Keep Format') {\n            this.rteObj.pasteCleanupSettings.prompt = false;\n            this.rteObj.pasteCleanupSettings.plainText = false;\n            this.rteObj.pasteCleanupSettings.keepFormat = true;\n        } else if (this.formatObj.value === 'Clean Format') {\n            this.rteObj.pasteCleanupSettings.prompt = false;\n            this.rteObj.pasteCleanupSettings.plainText = false;\n            this.rteObj.pasteCleanupSettings.keepFormat = false;\n        }\n    }\n\n    public deniedTagChange(): void {\n        this.onPasteCleanupSettingsChange(this.deniedTags.value, 'deniedTags');\n    }\n    public deniedAttrsChange(): void {\n        this.onPasteCleanupSettingsChange(this.deniedAttributes.value, 'deniedAttrs');\n    }\n    public allowStyleChange(): void {\n        this.onPasteCleanupSettingsChange(this.allowedStyleProperties.value, 'allowedStyleProps');\n    }\n\n    public onPasteCleanupSettingsChange(value: any, settingsProperty: string): void {\n        if (!isNullOrUndefined(value)) {\n            const arrayValue = value.split(',').map((item: any) => item.trim().replace(/^['\"]|['\"]$/g, ''));\n            (this.rteObj.pasteCleanupSettings as any)[settingsProperty] = arrayValue.filter((prop: any) => prop !== '');\n        }\n    }\n    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>\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><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}\n"
    },
    {
      "target": "src/components/rich-text-editor-paste-from-ms-word/paste-cleanup.html",
      "content": "<div class=\"col-lg-8 control-section sb-property-border\">\n    <div class=\"control-wrapper\">\n        <div class=\"sample-container\">\n            <div class=\"default-section\">\n                <ejs-richtexteditor id='pasteCleanupRTE' #pasteCleanupRTE [pasteCleanupSettings]=\"pasteCleanupSettings\" [value]=editorValue>       \n                </ejs-richtexteditor>\n            </div>\n        </div>\n    </div>\n</div>\n<div class=\"col-lg-4 property-section\">\n    <div id=\"property\" title=\"Properties\">\n        <div class=\"property-panel-header\">Properties</div>\n        <div class=\"property-panel-content\">\n            <table id=\"property\" title=\"Properties\">\n                <tbody>\n                    <tr>\n                        <td>\n                            <div>Format Option </div>\n                        </td>\n                        <td>\n                            <div>\n                                <ejs-dropdownlist id='formatOption' #formatOption [dataSource]='formatData' (change)='formatChange()' [value]='value' [fields]='fields' [popupHeight]='height'></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 #deniedTags class=\"e-input\" placeholder=\"'img[!href]', 'h1'\"\n                                    (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 #deniedAttributes class=\"e-input\" placeholder=\"'id', 'title'\"\n                                    (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 #allowedStyleProperties class=\"e-input\" placeholder=\"'href', 'style'\"\n                                    (blur)=\"allowStyleChange()\"></ejs-textbox>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n    </div>\n</div>\n<div id=\"action-description\">\n    <p>This example demonstrates the paste cleanup feature of the Rich Text Editor control. Copy your content from MS\n        Word or other website, and paste it within the editor to cleanup.</p>\n</div>\n\n<div id=\"description\">\n    <p>The Rich Text Editor allows to paste the HTML content from MS Word or other websites. The editor cleanup the\n        pasted HTML content by considering the following items.</p>\n    <ul>\n        <li>The unformatted HTML element (MOS XML format) content to standard HTML elements.</li>\n        <li>The MS Office prefixed style properties is converted to proper CSS style properties.</li>\n        <li>The unwanted tags, CSS styles, and comments are removed from the copied content.</li>\n    </ul>\n    <p>The following settings are available to cleanup the content in pasteCleanup settings property:</p>\n    <ul>\n        <li>Select any option in <code>Format Option</code> drop down list for the paste content.\n            <ul>\n                <li>Select the <code>Prompt</code> option to invoke prompt dialog with paste options on pasting the\n                    content in editor.</li>\n                <li>Select the <code>Plain Text</code> option to paste the content as plain text.</li>\n                <li>Select the <code>Keep Format</code> option to keep the same format in the copied content.</li>\n                <li>Select the <code>Clean Format</code> option to remove the style format in the copied content.</li>\n            </ul>\n        </li>\n        <li>Fill the <code>denied tags</code> text box to ignore the tags when pasting HTML content. For example:\n            <ul>\n                <li><code>['a[!href]']</code> - paste the content by filtering anchor tags that don’t have the 'href'\n                    attribute.</li>\n                <li><code>['a[href, target]']</code> - paste the content by filtering anchor tags that have the 'href'\n                    and 'target' attributes.</li>\n            </ul>\n        </li>\n        \n        <li>Fill the <code>denied attributes</code> to paste the content by filtering out these attributes from the\n            content. For example:\n            <ul>\n               <li> <code>['id', 'title']</code> - This will remove the attributes 'id' and 'title' from all tags.</li>\n            </ul>\n        </li>\n        \n        <li>Fill the <code>allowed style properties</code> to paste the content by accepting these style attributes and\n            removing other attributes. For example:\n            <ul>\n               <li> <code>['color', 'margin']</code> - This will allow only the style properties 'color' and 'margin' in\n                each pasted element.</li>\n            </ul>\n        </li>\n    </ul>\n    <p><b>Injecting Module</b></p>\n    <p>The previous features were built as modules to be included in your application. For example, inject the\n        <code>'PasteCleanup'</code> module using\n        <code>ToolbarService, LinkService, ImageService, HtmlEditorService, CountService, QuickToolbarService, PasteCleanupService</code> to use the paste\n        cleanup feature.</p>\n</div>"
    }
  ]
}