Updated vue2 and vue3 sample

README.md

@@ -1,2 +1,2 @@
-# View and edit Word document in Vue
-View and edit Word document in Vue application without Microsoft Word or Office interop dependencies.
+# View and edit Word document in Vue2 and Vue3
+View and edit Word document in Vue2 and Vue3 application without Microsoft Word or Office interop dependencies.

Vue2/README.md

@@ -0,0 +1,2 @@
+# View and edit Word document in Vue2
+View and edit Word document in Vue2 application without Microsoft Word or Office interop dependencies.

src/App.vue → Vue2/src/App.vue

@@ -1,14 +1,17 @@
 <template>
 <div>
-
-          <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" :style="iconStyle" :iconCss="printIconCss" v-on:click.native="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>
-//Document editor control creation code
+  <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" :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 id='container' ref="doceditcontainer" :enableToolbar='true' height="590px"></ejs-documenteditorcontainer>            
         </div>
 
@@ -63,7 +66,6 @@ export default Vue.extend({
             document.getElementById('sfdt').setAttribute('title', 'Download a copy of this document to your computer as an SFDT file.');
         },
         save: function (format) {
-          debugger;
             // 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);
         },
@@ -103,56 +105,54 @@ export default Vue.extend({
             document.getElementById("documenteditor_title_name").textContent = obj.documentName ;
             setTimeout(() => { obj.scrollToPage(1); }, 10);
         },
-        updateDocumentEditorSize: function () {
-    //Resizes the document editor component to fit full browser window. (Reduced title bar left padding which is 18)
-    var windowWidth = window.innerWidth -18;
-    //Reducing the size of title bar, to fit Document editor component in remaining height.
-    var windowHeight = window.innerHeight - (document.getElementById("documenteditor_titlebar").offsetHeight +26);
-    this.$refs.doceditcontainer.ej2Instances.resize(windowWidth, windowHeight);
-  },
-  openTemplate: function () {
-
-    var uploadDocument = new FormData();
-    uploadDocument.append('DocumentName', 'Getting Started.docx');
-    var loadDocumentUrl = this.$refs.doceditcontainer.ej2Instances.serviceUrl + 'LoadDocument';
-    var httpRequest = new XMLHttpRequest();
-    httpRequest.open('POST', loadDocumentUrl, true);
-    var dataContext = this;
-    httpRequest.onreadystatechange = function () {
-      if (httpRequest.readyState === 4) {
-        if (httpRequest.status === 200 || httpRequest.status === 304) {
-          //Opens the SFDT for the specified file received from the web API.
-          dataContext.$refs.doceditcontainer.ej2Instances.documentEditor.open(httpRequest.responseText);
+        ,
+    updateDocumentEditorSize: function () {
+      //Resizes the document editor component to fit full browser window. (Reduced title bar left padding which is 18)
+      var windowWidth = window.innerWidth -18;
+      //Reducing the size of title bar, to fit Document editor component in remaining height.
+      var windowHeight = window.innerHeight - (document.getElementById("documenteditor_titlebar").offsetHeight +26);
+      this.$refs.doceditcontainer.ej2Instances.resize(windowWidth, windowHeight);
+    },
+    onWindowResize: function () {
+      //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
+      this.updateDocumentEditorSize();
+    },
+    openTemplate: function () {
+      var uploadDocument = new FormData();
+      uploadDocument.append('DocumentName', 'Getting Started.docx');
+      var loadDocumentUrl =
+        this.$refs.doceditcontainer.ej2Instances.serviceUrl + 'LoadDocument';
+      var httpRequest = new XMLHttpRequest();
+      httpRequest.open('POST', loadDocumentUrl, true);
+      var dataContext = this;
+      httpRequest.onreadystatechange = function () {
+        if (httpRequest.readyState === 4) {
+          if (httpRequest.status === 200 || httpRequest.status === 304) {
+            //Opens the SFDT for the specified file received from the web API.
+            dataContext.$refs.doceditcontainer.ej2Instances.documentEditor.open(
+              httpRequest.responseText
+            );
+          }
         }
-      }
-    };
-    //Sends the request with template file name to web API. 
-    httpRequest.send(uploadDocument);
-  },
-  onWindowResize: function () {
-    //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
-    this.updateDocumentEditorSize();
-  }
-
-
+      };
+      //Sends the request with template file name to web API.
+      httpRequest.send(uploadDocument);
+    }
     },
     mounted() {
-        this.$nextTick(function () {
-
-          this.$refs.doceditcontainer.ej2Instances.locale='en-US';
-          var obj = this.$refs.doceditcontainer.ej2Instances.documentEditor;
-          this.$refs.doceditcontainer.ej2Instances.serviceUrl = this.hostUrl + 'api/documenteditor/';
-
-          this.$refs.doceditcontainer.ej2Instances.documentChange = () => {
-                this.documentChangedEvent();
-            };
-            var obj=this;
-            setTimeout(()=>{
-          obj.updateDocumentEditorSize();
-            },100);
-     window.addEventListener("resize", obj.onWindowResize);
-
-       });
+    this.$nextTick(function () {
+      this.$refs.doceditcontainer.ej2Instances.locale = 'en-US';
+      this.$refs.doceditcontainer.ej2Instances.serviceUrl = this.hostUrl + 'api/documenteditor/';
+      this.$refs.doceditcontainer.ej2Instances.documentChange = () => {
+        this.documentChangedEvent();
+      };
+      var obj = this;
+      setTimeout(() => {
+        obj.updateDocumentEditorSize();
+      }, 100);
+      window.addEventListener('resize', obj.onWindowResize);
+      this.openTemplate();
+    });
     }
 });
 </script>

Vue3/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Vue3/README.md

@@ -0,0 +1,12 @@
+# View and edit Word document in Vue3
+View and edit Word document in Vue3 application without Microsoft Word or Office interop dependencies.
+
+## Project setup
+```
+npm install
+```
+
+### To run
+```
+npm run serve
+```

Vue3/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

Vue3/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "quickstart",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@syncfusion/ej2-vue-buttons": "^19.3.53",
+    "@syncfusion/ej2-vue-documenteditor": "^19.3.54",
+    "@syncfusion/ej2-vue-navigations": "^19.3.54",
+    "@syncfusion/ej2-vue-splitbuttons": "^19.3.53",
+    "@syncfusion/ej2-vue-base": "*",
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0",
+    "vue-class-component": "^8.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

Vue3/public/index.html

@@ -0,0 +1,16 @@
+<div>
+  <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" :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 id='container' ref="doceditcontainer" :enableToolbar='true' height="590px"
+    :serviceUrl='serviceUrl'></ejs-documenteditorcontainer>
+</div>