{
"$schema": "https://ai.syncfusion.com/schema/registry-item.json",
"name": "docx-editor-default",
"framework": "javascript",
"type": "registry:component",
"component": "DocxEditor",
"variant": "default",
"dependencies": [
"@syncfusion/ej2-documenteditor"
],
"description": "Document editor container for opening, editing, and viewing a Word document in the browser.",
"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/javascript/llms.txt",
"skillPack": "syncfusion/javascript-ui-components-skills",
"docs": "https://ai.syncfusion.com/gallery/javascript/docx-editor-default.md"
},
"files": [
{
"target": "src/components/docx-editor-default/default.html",
"content": "
\n
\n
\n \n
\n \n
\n \n
\n
\n \n \n
\n\n"
},
{
"target": "src/components/docx-editor-default/default.ts",
"content": "import { DocumentEditorContainer, Ribbon, Toolbar } from '@syncfusion/ej2-documenteditor';\nimport * as data from './data-default.json';\nimport { Switch } from '@syncfusion/ej2-buttons';\nimport {\n createSpinner,\n showSpinner,\n hideSpinner,\n} from '@syncfusion/ej2-popups';\n\n(window as any).default = (): void => {\n let hostUrl: string = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';\n\n let container: DocumentEditorContainer = new DocumentEditorContainer({\n serviceUrl: hostUrl,\n enableToolbar: true,\n toolbarMode: 'Ribbon',\n height: '590px',\n fileMenuItems: [\n 'New',\n 'Open',\n {\n text: 'Export',\n id: 'custom_item',\n iconCss: 'e-icons e-export',\n items: [\n { id: 'sfdt', text: 'Syncfusion Document Text (*.sfdt)' },\n { id: 'docx', text: 'Word Document (*.docx)' },\n { id: 'dotx', text: 'Word Template (*.dotx)' },\n { id: 'text', text: 'Plain Text (*.txt)' },\n { id: 'pdf', text: 'PDF (*.pdf)' },\n { id: 'html', text: 'HyperText Markup Language (*.html)' },\n { id: 'rtf', text: 'Rich Text Format (*.rtf)' },\n { id: 'md', text: 'Markdown (*.md)' },\n { id: 'odt', text: 'OpenDocument Text (*.odt)' },\n { id: 'wordml', text: 'Word XML Document (*.xml)' }\n ],\n },\n 'Print',\n ],\n fileMenuItemClick: function (args) {\n if (args.item.id) {\n let value: string = args.item.id;\n let sampleName: string = container.documentEditor.documentName === '' ? 'sample' : container.documentEditor.documentName;\n switch (value) {\n case 'docx':\n container.documentEditor.save(sampleName, 'Docx');\n break;\n case 'sfdt':\n container.documentEditor.save(sampleName, 'Sfdt');\n break;\n case 'text':\n container.documentEditor.save(sampleName, 'Txt');\n break;\n case 'dotx':\n container.documentEditor.save(sampleName, 'Dotx');\n break;\n case 'pdf':\n formatSave('Pdf');\n break;\n case 'html':\n formatSave('Html');\n break;\n case 'odt':\n formatSave('Odt');\n break;\n case 'md':\n formatSave('Md');\n break;\n case 'rtf':\n formatSave('Rtf');\n break;\n case 'wordml':\n formatSave('Xml');\n break;\n }\n }\n },\n });\n DocumentEditorContainer.Inject(Toolbar, Ribbon);\n container.appendTo('#container');\n (window as any).container = container;\n function formatSave(type: string) {\n createSpinner({\n target: document.getElementById('container'),\n });\n showSpinner(document.getElementById('container'));\n let format: string = type;\n let url = (window as any).container.documentEditor.serviceUrl + 'Export';\n let http = new XMLHttpRequest();\n http.open('POST', url);\n http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');\n http.responseType = 'blob';\n\n let sfdt = {\n Content: (window as any).container.documentEditor.serialize(),\n Filename: (window as any).container.documentEditor.documentName,\n Format: '.' + format,\n };\n\n http.onload = function () {\n if (http.status === 200) {\n let responseData = http.response;\n let blobUrl = URL.createObjectURL(responseData);\n let downloadLink = document.createElement('a');\n downloadLink.href = blobUrl;\n downloadLink.download =\n (window as any).container.documentEditor.documentName + '.' + format.toLowerCase();\n document.body.appendChild(downloadLink);\n hideSpinner(document.getElementById('container'));\n downloadLink.click();\n document.body.removeChild(downloadLink);\n URL.revokeObjectURL(blobUrl);\n } else {\n console.error('Request failed with status:', http.status);\n hideSpinner(document.getElementById('container'));\n }\n };\n\n http.send(JSON.stringify(sfdt));\n }\n container.documentEditor.open(JSON.stringify((data)));\n container.documentEditor.documentName = 'Getting Started';\n\n container.documentChange = (): void => {\n container.documentEditor.focusIn();\n };\n let switchObj: Switch = new Switch({ value: 'Toolbar Mode', checked: true, cssClass: 'buttonSwitch' });\n switchObj.appendTo('#toolbarSwitch');\n switchObj.change = function (args : any) {\n if (args.checked) {\n container.toolbarMode = 'Ribbon';\n }\n else {\n container.toolbarMode = 'Toolbar';\n }\n }\n};\n"
}
]
}