# docx-editor-comments

> Word editor demonstrates threaded comments and at-mention support in the document.

**Framework:** vue  **Component:** DocxEditor  **Variant:** comments

## 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-comments.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-comments/DocxEditor.vue

```vue
<template>
<div>                
       <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 ref="de-print" id="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" :documentEditorSettings="settings"  :enableToolbar='true' height='600px' currentUser = 'Nancy Davolio' userColor='#b70f34' 
            :commentDelete="commentDelete"></ejs-documenteditorcontainer>
        </div>
    </div>
</div>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar, Ribbon } from "@syncfusion/ej2-vue-documenteditor";
import { DropDownButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
import { DialogUtility } from '@syncfusion/ej2-popups';
import { ButtonComponent, SwitchComponent } from "@syncfusion/ej2-vue-buttons";

let mentionData =  [
                { "Name": "Selma Rose", "Eimg": "3", "EmailId": "selma@mycompany.com" },
                { "Name": "Russo Kay", "Eimg": "8", "EmailId": "russo@mycompany.com" },
                { "Name": "Camden Kate", "Eimg": "9", "EmailId": "camden@mycompany.com" }
            ];
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/',
          settings: {showRuler: true, mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }}},
          documentName : 'Comments',
          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"));
        },
         commentDelete:function(args) 
        {  var obj = this.$refs.doceditcontainer.ej2Instances.documentEditor;
            if (args.author !== obj.currentUser) 
            {
                        args.cancel = true;
                        DialogUtility.alert({
                            title: 'Information',
                            content: "Delete restriction enabled. Only the author of the comment can delete it.",
                            showCloseIcon: true,
                            closeOnEscape: true,
                });
            }
        },
        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;
          this.$refs.doceditcontainer.ej2Instances.showPropertiesPane = false;          
          obj.open(JSON.stringify(<document-base64format>));
          obj.documentName='Comments';
          this.$refs.doceditcontainer.ej2Instances.documentEditor.showComments = true;
          this.$refs.doceditcontainer.ej2Instances.documentChange = () => {
          this.documentChangedEvent();
            };
            this.showButtons(this.$refs.doceditcontainer.ej2Instances.toolbarMode != "Ribbon");
       });

       
    }
};
</script>

```

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

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

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