{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "docx-editor-auto-save",
  "framework": "vue",
  "type": "registry:component",
  "component": "DocxEditor",
  "variant": "auto-save",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-documenteditor",
    "@syncfusion/ej2-vue-splitbuttons"
  ],
  "description": "Word editor that saves the document as a docx blob periodically after edits.",
  "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-auto-save.md"
  },
  "files": [
    {
      "target": "src/components/docx-editor-auto-save/DocxEditor.vue",
      "content": "<template>\n<div>\n    <div class=\"col-lg-9 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\" 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=\"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\" id=\"documenteditor_title_contentEditor\" title=\"Document Name. Click or tap to rename this document.\" contenteditable=\"false\">\n                    <label v-on:blur=\"titleBarBlurEvent\" id=\"documenteditor_title_name\" :style=\"titileStyle\">{{documentName}}</label>\n                </div>\n                <ejs-button ref=\"de-print\" id=\"de-print\" :style=\"iconStyle\" :iconCss=\"printIconCss\" 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\" cssClass=\"e-caret-hide\" content=\"Download\" v-bind:select=\"onExport\" :open=\"openExportDropDown\" title=\"Download this document.\"></ejs-dropdownbutton>\n            </div>\n            <ejs-documenteditorcontainer ref=\"doceditcontainer\" :toolbarMode=\"'Ribbon'\" :serviceUrl=\"hostUrl\"  :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n        <table id=\"property\" title=\"Auto save log\">\n            <tr>\n                <td>\n                    <div class=\"eventarea\" style=\"height: 150px;overflow: auto\">\n                        <span class=\"AutosaveLog\" id=\"AutosaveLog\" style=\"word-break: normal;\"></span>\n                    </div>\n                </td>\n            </tr>\n            <tr>\n                <td>\n                    <div class=\"evtbtn\" style=\"padding-bottom: 10px\">\n                        <ejs-button v-on:click=\"clearLog\" id=\"clear\">Clear</ejs-button>\n                    </div>\n                </td>\n            </tr>\n        </table>\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 : 'Auto Save',\n          documentTitle: 'Untitled Document',\n          contentChanged:false,\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        clearLog: function() {\n            document.getElementById('AutosaveLog').innerHTML = '';\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='Auto Save';\n          this.$refs.doceditcontainer.ej2Instances.documentEditorSettings.showRuler = true;\n          this.$refs.doceditcontainer.ej2Instances.documentChange = () => {\n                this.documentChangedEvent();\n            };\n            this.showButtons(this.$refs.doceditcontainer.ej2Instances.toolbarMode != \"Ribbon\");\n            setInterval(() => {\n                if (this.contentChanged) {\n                    //You can save the document as below\n                    this.$refs.doceditcontainer.ej2Instances.documentEditor.saveAsBlob('Docx').then((blob) => {\n                        let exportedDocumment = blob;\n                        //Now, save the document where ever you want.\n                        /* tslint:disable */\n                        var span = document.createElement('span');\n                        var date = new Date();\n                        var time = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();\n                        span.innerHTML = 'Auto saved at <b>' + time + '</b><hr>';\n                        var log = document.getElementById('AutosaveLog');\n                        log.insertBefore(span, log.firstChild);\n                    });\n                    this.contentChanged = false;\n                }\n            }, 15000);\n\n            this.$refs.doceditcontainer.ej2Instances.contentChange = ()=>{\n                this.contentChanged = true;\n            };\n       });\n    }\n};\n</script>\n"
    },
    {
      "target": "src/components/docx-editor-auto-save/DocxEditorView.vue",
      "content": "<template>\n  <DOCXEditor />\n</template>\n\n<script setup>\nimport DOCXEditor from '../../components/DOCXEditor.vue'\n</script>"
    }
  ]
}