{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "docx-editor-default",
  "framework": "vue",
  "type": "registry:component",
  "component": "DocxEditor",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-documenteditor",
    "@syncfusion/ej2-vue-splitbuttons"
  ],
  "description": "Word editor provides document editing with switchable Ribbon or toolbar layouts.",
  "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": true,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/docx-editor-default.md"
  },
  "files": [
    {
      "target": "src/components/docx-editor-default/DocxEditor.vue",
      "content": "<template>\n    <div class=\"control-section\">\n        <div class=\"flex-container\">\n            <label class=\"switchLabel\" for=\"checked\">Ribbon UI</label>\n            <div class=\"e-message render-mode-info\">\n                <span class=\"e-msg-icon render-mode-info-icon\"\n                    title=\"Turn OFF to switch from Ribbon to toolbar UI\"></span>\n            </div>\n            <ejs-switch cssClass=\"buttonSwitch\" id=\"toolbarSwitch\" :change=\"change\" :checked=\"true\"></ejs-switch>\n        </div>\n        <div class=\"sample-container\">\n            <div class=\"default-section\">\n                <div ref=\"de_titlebar\" id=\"documenteditor_titlebar\" class=\"e-de-ctn-title\">\n                    <div v-on:keydown=\"titleBarKeydownEvent\" v-on:click=\"titleBarClickEvent\" class=\"single-line\"\n                        id=\"documenteditor_title_contentEditor\"\n                        title=\"Document Name. Click or tap to rename this document.\" contenteditable=\"false\">\n                        <label v-on:blur=\"titleBarBlurEvent\" id=\"documenteditor_title_name\"\n                            :style=\"titileStyle\">{{ documentName }}</label>\n                    </div>\n                    <ejs-button id=\"de-print\" ref=\"de-print\" :style=\"iconStyle\" :iconCss=\"printIconCss\"\n                        v-on:click=\"printBtnClick\" title=\"Print this document (Ctrl+P).\">Print</ejs-button>\n                    <ejs-dropdownbutton ref=\"de-export\" :style=\"iconStyle\" :items=\"exportItems\" :iconCss=\"exportIconCss\"\n                        cssClass=\"e-caret-hide\" content=\"Download\" v-bind:select=\"onExport\" :open=\"openExportDropDown\"\n                        title=\"Download this document.\"></ejs-dropdownbutton>\n                </div>\n                <ejs-documenteditorcontainer ref=\"doceditcontainer\" :toolbarMode=\"'Ribbon'\" :serviceUrl=\"hostUrl\" :enableToolbar='true'\n                    height='600px'></ejs-documenteditorcontainer>\n            </div>\n        </div>\n    </div>\n</template>\n<script>\nimport { DocumentEditorContainerComponent, Toolbar, Ribbon } from \"@syncfusion/ej2-vue-documenteditor\";\nimport { DropDownButtonComponent } from \"@syncfusion/ej2-vue-splitbuttons\";\nimport { ButtonComponent, SwitchComponent } from \"@syncfusion/ej2-vue-buttons\";\n\nexport default {\n    components: {\n        'ejs-documenteditorcontainer': DocumentEditorContainerComponent,\n        'ejs-dropdownbutton': DropDownButtonComponent,\n        'ejs-button': ButtonComponent,\n        'ejs-switch': SwitchComponent\n    },\n    data: function () {\n        return {\n            hostUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',\n            documentName: 'Getting Started',\n            documentTitle: 'Untitled Document',\n            iconStyle: 'float:right;background: transparent;box-shadow:none;border-color: transparent;border-radius: 2px;color:inherit;font-size:12px;text-transform:capitalize;margin-top:4px;height:28px;font-weight:400;font-family:inherit;',\n            titileStyle: 'text-transform:capitalize;font-weight:400;font-family:inherit;text-overflow:ellipsis;white-space:pre;overflow:hidden;user-select:none;cursor:text',\n            openIconCss: 'e-de-icon-Open e-de-padding-right',\n            printIconCss: 'e-de-icon-Print e-de-padding-right',\n            exportIconCss: 'e-de-icon-Download e-de-padding-right',\n            exportItems: [\n                { text: 'Syncfusion Document Text (*.sfdt)', id: 'sfdt' },\n                { text: 'Word Document (*.docx)', id: 'word' },\n                { text: 'Word Template (*.dotx)', id: 'dotx' },\n                { text: 'Plain Text (*.txt)', id: 'txt' },\n            ]\n        };\n    },\n    provide: {\n        DocumentEditorContainer: [Toolbar, Ribbon]\n    },\n    methods: {\n        onExport: function (args) {\n            switch (args.item.id) {\n                case 'word':\n                    this.save('Docx');\n                    break;\n                case 'sfdt':\n                    this.save('Sfdt');\n                    break;\n                case 'txt':\n                    this.save('Txt');\n                    break;\n                case 'dotx':\n                    this.save('Dotx');\n                    break;\n            }\n        },\n        openExportDropDown: function () {\n            // tslint:disable-next-line:max-line-length\n            document.getElementById('word').setAttribute('title', 'Download a copy of this document to your computer as a DOCX file.');\n            // tslint:disable-next-line:max-line-length\n            document.getElementById('sfdt').setAttribute('title', 'Download a copy of this document to your computer as an SFDT file.');\n            // tslint:disable-next-line:max-line-length\n            document.getElementById('txt').setAttribute('title', 'Download a copy of this document to your computer as a TXT file.');\n            // tslint:disable-next-line:max-line-length\n            document.getElementById('dotx').setAttribute('title', 'Download a copy of this document to your computer as a DOTX file.');\n        },\n        save: function (format) {\n            // tslint:disable-next-line:max-line-length\n            this.$refs.doceditcontainer.ej2Instances.documentEditor.save(this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName === '' ? 'sample' : this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName, format);\n        },\n        openBtnClick: function () {\n            this.$refs.uploadDocument.click();\n        },\n        printBtnClick: function () {\n            this.$refs.doceditcontainer.ej2Instances.documentEditor.print();\n        },\n        titleBarKeydownEvent: function (e) {\n            if (e.keyCode === 13) {\n                e.preventDefault();\n                document.getElementById(\"documenteditor_title_contentEditor\").contentEditable = 'false';\n                if (document.getElementById(\"documenteditor_title_contentEditor\").textContent === '') {\n                    document.getElementById(\"documenteditor_title_contentEditor\").textContent = 'Document1';\n                }\n            }\n        },\n        titleBarBlurEvent: function (args) {\n            if (document.getElementById(\"documenteditor_title_contentEditor\").textContent === '') {\n                document.getElementById(\"documenteditor_title_contentEditor\").textContent = 'Document1';\n            }\n            document.getElementById(\"documenteditor_title_contentEditor\").contentEditable = 'false';\n            this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName = document.getElementById(\"documenteditor_title_name\").textContent;\n        },\n        titleBarClickEvent: function () {\n            this.updateDocumentEditorTitle();\n        },\n        showButtons: function (show) {\n            var displayStyle = show ? 'block' : 'none';\n            if (this.$refs['de-print']) {\n                this.$refs['de-print'].$el.style.display = displayStyle;\n            }\n            if (this.$refs['de-export']) {\n                this.$refs['de-export'].$el.style.display = displayStyle;\n            }\n        },\n        updateDocumentEditorTitle: function () {\n            document.getElementById(\"documenteditor_title_contentEditor\").contentEditable = 'true';\n            document.getElementById(\"documenteditor_title_contentEditor\").focus();\n            window.getSelection().selectAllChildren(document.getElementById(\"documenteditor_title_contentEditor\"));\n        },\n        documentChangedEvent: function () {\n            var obj = this.$refs.doceditcontainer.ej2Instances.documentEditor;\n            this.documentTitle = obj.documentName === '' ? 'Untitled Document' : obj.documentName;\n            document.getElementById(\"documenteditor_title_name\").textContent = obj.documentName;\n            setTimeout(() => { obj.scrollToPage(1); }, 10);\n        },\n        change: function (args) {\n            var container = this.$refs.doceditcontainer.ej2Instances;\n            if (args.checked) {\n                container.toolbarMode = \"Ribbon\";\n            } else {\n                container.toolbarMode = \"Toolbar\";\n            }\n            this.showButtons(container.toolbarMode != \"Ribbon\");\n        }\n    },\n    mounted() {\n        this.$nextTick(function () {\n            var obj = this.$refs.doceditcontainer.ej2Instances.documentEditor;\n            obj.open(JSON.stringify(<document-base64format>));\n            obj.documentName = 'Getting Started';\n            this.$refs.doceditcontainer.ej2Instances.documentChange = () => {\n                this.documentChangedEvent();\n            };\n            this.showButtons(this.$refs.doceditcontainer.ej2Instances.toolbarMode != \"Ribbon\");\n        });\n    }\n};\n</script>\n"
    },
    {
      "target": "src/components/docx-editor-default/DocxEditorView.vue",
      "content": "<template>\n  <DOCXEditor />\n</template>\n\n<script setup>\nimport DOCXEditor from '../../components/DOCXEditor.vue'\n</script>"
    }
  ]
}