{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "docx-editor-document-protection",
  "framework": "vue",
  "type": "registry:component",
  "component": "DocxEditor",
  "variant": "document-protection",
  "dependencies": [
    "@syncfusion/ej2-vue-buttons",
    "@syncfusion/ej2-vue-documenteditor",
    "@syncfusion/ej2-vue-dropdowns",
    "@syncfusion/ej2-vue-inputs",
    "@syncfusion/ej2-vue-splitbuttons"
  ],
  "description": "Word document editor with restrict-editing protection and an editing envelope.",
  "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-document-protection.md"
  },
  "files": [
    {
      "target": "src/components/docx-editor-document-protection/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\" :documentEditorSettings=\"settings\" :enableToolbar='true' height='600px'></ejs-documenteditorcontainer>\n        </div>\n    </div>\n    <div class=\"col-lg-3 property-section\">\n    <div class=\"content-wrapper\">\n            <div class=\"heading-section de-heading\">\n                <h5><b>User Permission</b></h5>\n            </div>\n\n            <div class=\"control-label lable-padding\"><b>Current User</b>\n            </div>\n            <div class=\"control-label lable-padding\">\n                <ejs-dropdownlist id='ddlelement' :dataSource='userDetails' :value='currentUser'  :change='onUserChange'></ejs-dropdownlist>\n            </div>\n            <div class=\"control-label lable-padding\"><b>User Color</b>\n            </div>\n            <ejs-colorpicker ref=\"usercolorpicker\" id=\"color-picker\" :change='onUserColorChange' ></ejs-colorpicker>\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 { DropDownListComponent } from \"@syncfusion/ej2-vue-dropdowns\";\nimport { ColorPickerComponent } from \"@syncfusion/ej2-vue-inputs\";\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        'ejs-dropdownlist': DropDownListComponent,\n        'ejs-colorpicker': ColorPickerComponent\n    },\n    data: function() {\n        return {\n          hostUrl : 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',\n          settings: {showRuler: true},\n          documentName : 'Document Protection',\n          documentTitle: 'Untitled Document',\n          userDetails:  ['engineer@mycompany.com', 'manager@mycompany.com'],\n          currentUser: 'engineer@mycompany.com',\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        onUserChange: function(e) {\n            this.$refs.doceditcontainer.ej2Instances.documentEditor.currentUser = e.value;\n        },\n        onUserColorChange: function(e) {\n            this.$refs.doceditcontainer.ej2Instances.documentEditor.userColor = e.currentValue.hex;\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 editor = this.$refs.doceditcontainer.ej2Instances.documentEditor;\n          editor.currentUser = 'engineer@mycompany.com';\n          this.$refs.doceditcontainer.ej2Instances.showPropertiesPane = false;\n          this.$refs.doceditcontainer.ej2Instances.documentEditorSettings.showRuler = true;\n          editor.open(JSON.stringify(<document-base64format>));\n          editor.documentName='Document Protection';\n          this.$refs.doceditcontainer.ej2Instances.documentChange = () => {\n                this.documentChangedEvent();\n          };\n          this.$refs.usercolorpicker.ej2Instances.value = editor.userColor;\n          this.showButtons(this.$refs.doceditcontainer.ej2Instances.toolbarMode != \"Ribbon\");\n       });\n    }\n};\n</script>\n"
    },
    {
      "target": "src/components/docx-editor-document-protection/DocxEditorView.vue",
      "content": "<template>\n  <DOCXEditor />\n</template>\n\n<script setup>\nimport DOCXEditor from '../../components/DOCXEditor.vue'\n</script>"
    }
  ]
}