# docx-editor-default

> Word editor provides document editing with switchable Ribbon or toolbar layouts.

**Framework:** vue  **Component:** DocxEditor  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/docx-editor-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-buttons @syncfusion/ej2-vue-documenteditor @syncfusion/ej2-vue-splitbuttons
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/docx-editor-default/DocxEditor.vue

```vue
<template>
    <div class="control-section">
        <div class="flex-container">
            <label class="switchLabel" for="checked">Ribbon UI</label>
            <div class="e-message render-mode-info">
                <span class="e-msg-icon render-mode-info-icon"
                    title="Turn OFF to switch from Ribbon to toolbar UI"></span>
            </div>
            <ejs-switch cssClass="buttonSwitch" id="toolbarSwitch" :change="change" :checked="true"></ejs-switch>
        </div>
        <div class="sample-container">
            <div class="default-section">
                <div ref="de_titlebar" id="documenteditor_titlebar" class="e-de-ctn-title">
                    <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">
                        <label v-on:blur="titleBarBlurEvent" id="documenteditor_title_name"
                            :style="titileStyle">{{ documentName }}</label>
                    </div>
                    <ejs-button id="de-print" ref="de-print" :style="iconStyle" :iconCss="printIconCss"
                        v-on:click="printBtnClick" title="Print this document (Ctrl+P).">Print</ejs-button>
                    <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>
                </div>
                <ejs-documenteditorcontainer ref="doceditcontainer" :toolbarMode="'Ribbon'" :serviceUrl="hostUrl" :enableToolbar='true'
                    height='600px'></ejs-documenteditorcontainer>
            </div>
        </div>
    </div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
import { DropDownButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
import { ButtonComponent, SwitchComponent } from "@syncfusion/ej2-vue-buttons";

export default {
    components: {
        'ejs-documenteditorcontainer': DocumentEditorContainerComponent,
        'ejs-dropdownbutton': DropDownButtonComponent,
        'ejs-button': ButtonComponent,
        'ejs-switch': SwitchComponent
    },
    data: function () {
        return {
            hostUrl: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
            documentName: 'Getting Started',
            documentTitle: 'Untitled Document',
            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;',
            titileStyle: 'text-transform:capitalize;font-weight:400;font-family:inherit;text-overflow:ellipsis;white-space:pre;overflow:hidden;user-select:none;cursor:text',
            openIconCss: 'e-de-icon-Open e-de-padding-right',
            printIconCss: 'e-de-icon-Print e-de-padding-right',
            exportIconCss: 'e-de-icon-Download e-de-padding-right',
            exportItems: [
                { text: 'Syncfusion Document Text (*.sfdt)', id: 'sfdt' },
                { text: 'Word Document (*.docx)', id: 'word' },
                { text: 'Word Template (*.dotx)', id: 'dotx' },
                { text: 'Plain Text (*.txt)', id: 'txt' },
            ]
        };
    },
    provide: {
        DocumentEditorContainer: [Toolbar, Ribbon]
    },
    methods: {
        onExport: function (args) {
            switch (args.item.id) {
                case 'word':
                    this.save('Docx');
                    break;
                case 'sfdt':
                    this.save('Sfdt');
                    break;
                case 'txt':
                    this.save('Txt');
                    break;
                case 'dotx':
                    this.save('Dotx');
                    break;
            }
        },
        openExportDropDown: function () {
            // tslint:disable-next-line:max-line-length
            document.getElementById('word').setAttribute('title', 'Download a copy of this document to your computer as a DOCX file.');
            // tslint:disable-next-line:max-line-length
            document.getElementById('sfdt').setAttribute('title', 'Download a copy of this document to your computer as an SFDT file.');
            // tslint:disable-next-line:max-line-length
            document.getElementById('txt').setAttribute('title', 'Download a copy of this document to your computer as a TXT file.');
            // tslint:disable-next-line:max-line-length
            document.getElementById('dotx').setAttribute('title', 'Download a copy of this document to your computer as a DOTX file.');
        },
        save: function (format) {
            // tslint:disable-next-line:max-line-length
            this.$refs.doceditcontainer.ej2Instances.documentEditor.save(this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName === '' ? 'sample' : this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName, format);
        },
        openBtnClick: function () {
            this.$refs.uploadDocument.click();
        },
        printBtnClick: function () {
            this.$refs.doceditcontainer.ej2Instances.documentEditor.print();
        },
        titleBarKeydownEvent: function (e) {
            if (e.keyCode === 13) {
                e.preventDefault();
                document.getElementById("documenteditor_title_contentEditor").contentEditable = 'false';
                if (document.getElementById("documenteditor_title_contentEditor").textContent === '') {
                    document.getElementById("documenteditor_title_contentEditor").textContent = 'Document1';
                }
            }
        },
        titleBarBlurEvent: function (args) {
            if (document.getElementById("documenteditor_title_contentEditor").textContent === '') {
                document.getElementById("documenteditor_title_contentEditor").textContent = 'Document1';
            }
            document.getElementById("documenteditor_title_contentEditor").contentEditable = 'false';
            this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName = document.getElementById("documenteditor_title_name").textContent;
        },
        titleBarClickEvent: function () {
            this.updateDocumentEditorTitle();
        },
        showButtons: function (show) {
            var displayStyle = show ? 'block' : 'none';
            if (this.$refs['de-print']) {
                this.$refs['de-print'].$el.style.display = displayStyle;
            }
            if (this.$refs['de-export']) {
                this.$refs['de-export'].$el.style.display = displayStyle;
            }
        },
        updateDocumentEditorTitle: function () {
            document.getElementById("documenteditor_title_contentEditor").contentEditable = 'true';
            document.getElementById("documenteditor_title_contentEditor").focus();
            window.getSelection().selectAllChildren(document.getElementById("documenteditor_title_contentEditor"));
        },
        documentChangedEvent: function () {
            var obj = this.$refs.doceditcontainer.ej2Instances.documentEditor;
            this.documentTitle = obj.documentName === '' ? 'Untitled Document' : obj.documentName;
            document.getElementById("documenteditor_title_name").textContent = obj.documentName;
            setTimeout(() => { obj.scrollToPage(1); }, 10);
        },
        change: function (args) {
            var container = this.$refs.doceditcontainer.ej2Instances;
            if (args.checked) {
                container.toolbarMode = "Ribbon";
            } else {
                container.toolbarMode = "Toolbar";
            }
            this.showButtons(container.toolbarMode != "Ribbon");
        }
    },
    mounted() {
        this.$nextTick(function () {
            var obj = this.$refs.doceditcontainer.ej2Instances.documentEditor;
            obj.open(JSON.stringify(<document-base64format>));
            obj.documentName = 'Getting Started';
            this.$refs.doceditcontainer.ej2Instances.documentChange = () => {
                this.documentChangedEvent();
            };
            this.showButtons(this.$refs.doceditcontainer.ej2Instances.toolbarMode != "Ribbon");
        });
    }
};
</script>

```

### src/components/docx-editor-default/DocxEditorView.vue

```vue
<template>
  <DOCXEditor />
</template>

<script setup>
import DOCXEditor from '../../components/DOCXEditor.vue'
</script>
```