Skip to content

Commit 1211b72

Browse files
dskesavandskesavan
authored
Merge pull request #2 from SyncfusionExamples/EJ2-55001-DocumenteditorVue
Updated vue2 and vue3 sample
2 parents 984d55d + 967bd98 commit 1211b72

File tree

22 files changed

+625
-283
lines changed

22 files changed

+625
-283
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
# View and edit Word document in Vue
2-
View and edit Word document in Vue application without Microsoft Word or Office interop dependencies.
1+
# View and edit Word document in Vue2 and Vue3
2+
View and edit Word document in Vue2 and Vue3 application without Microsoft Word or Office interop dependencies.

‎.babelrc‎ renamed to ‎Vue2/.babelrc‎

File renamed without changes.

‎.editorconfig‎ renamed to ‎Vue2/.editorconfig‎

File renamed without changes.

‎.gitignore‎ renamed to ‎Vue2/.gitignore‎

File renamed without changes.

‎Vue2/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# View and edit Word document in Vue2
2+
View and edit Word document in Vue2 application without Microsoft Word or Office interop dependencies.

‎index.html‎ renamed to ‎Vue2/index.html‎

File renamed without changes.

‎package.json‎ renamed to ‎Vue2/package.json‎

File renamed without changes.

‎src/App.vue‎ renamed to ‎Vue2/src/App.vue‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<template>
22
<div>
3-
4-
<div ref="de_titlebar" id="documenteditor_titlebar" class="e-de-ctn-title">
5-
<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">
6-
<label v-on:blur="titleBarBlurEvent" id="documenteditor_title_name" :style="titileStyle" >{{documentName}}</label>
7-
</div>
8-
<ejs-button id="de-print" :style="iconStyle" :iconCss="printIconCss" v-on:click.native="printBtnClick" title="Print this document (Ctrl+P).">Print</ejs-button>
9-
<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>
10-
</div>
11-
//Document editor control creation code
3+
<div ref="de_titlebar" id="documenteditor_titlebar" class="e-de-ctn-title">
4+
<div v-on:keydown="titleBarKeydownEvent" v-on:click="titleBarClickEvent" class="single-line"
5+
id="documenteditor_title_contentEditor" title="Document Name. Click or tap to rename this document."
6+
contenteditable="false">
7+
<label v-on:blur="titleBarBlurEvent" id="documenteditor_title_name" :style="titileStyle">{{documentName}}</label>
8+
</div>
9+
<ejs-button id="de-print" :style="iconStyle" :iconCss="printIconCss" v-on:click="printBtnClick"
10+
title="Print this document (Ctrl+P).">Print</ejs-button>
11+
<ejs-dropdownbutton ref="de-export" :style="iconStyle" :items="exportItems" :iconCss="exportIconCss"
12+
cssClass="e-caret-hide" content="Download" v-bind:select="onExport" :open="openExportDropDown"
13+
title="Download this document."></ejs-dropdownbutton>
14+
</div>
1215
<ejs-documenteditorcontainer id='container' ref="doceditcontainer" :enableToolbar='true' height="590px"></ejs-documenteditorcontainer>
1316
</div>
1417

@@ -63,7 +66,6 @@ export default Vue.extend({
6366
document.getElementById('sfdt').setAttribute('title', 'Download a copy of this document to your computer as an SFDT file.');
6467
},
6568
save: function (format) {
66-
debugger;
6769
// tslint:disable-next-line:max-line-length
6870
this.$refs.doceditcontainer.ej2Instances.documentEditor.save( this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName == '' ? 'sample' : this.$refs.doceditcontainer.ej2Instances.documentEditor.documentName, format);
6971
},
@@ -103,56 +105,54 @@ export default Vue.extend({
103105
document.getElementById("documenteditor_title_name").textContent = obj.documentName ;
104106
setTimeout(() => { obj.scrollToPage(1); }, 10);
105107
},
106-
updateDocumentEditorSize: function () {
107-
//Resizes the document editor component to fit full browser window. (Reduced title bar left padding which is 18)
108-
var windowWidth = window.innerWidth -18;
109-
//Reducing the size of title bar, to fit Document editor component in remaining height.
110-
var windowHeight = window.innerHeight - (document.getElementById("documenteditor_titlebar").offsetHeight +26);
111-
this.$refs.doceditcontainer.ej2Instances.resize(windowWidth, windowHeight);
112-
},
113-
openTemplate: function () {
114-
115-
var uploadDocument = new FormData();
116-
uploadDocument.append('DocumentName', 'Getting Started.docx');
117-
var loadDocumentUrl = this.$refs.doceditcontainer.ej2Instances.serviceUrl + 'LoadDocument';
118-
var httpRequest = new XMLHttpRequest();
119-
httpRequest.open('POST', loadDocumentUrl, true);
120-
var dataContext = this;
121-
httpRequest.onreadystatechange = function () {
122-
if (httpRequest.readyState === 4) {
123-
if (httpRequest.status === 200 || httpRequest.status === 304) {
124-
//Opens the SFDT for the specified file received from the web API.
125-
dataContext.$refs.doceditcontainer.ej2Instances.documentEditor.open(httpRequest.responseText);
108+
,
109+
updateDocumentEditorSize: function () {
110+
//Resizes the document editor component to fit full browser window. (Reduced title bar left padding which is 18)
111+
var windowWidth = window.innerWidth -18;
112+
//Reducing the size of title bar, to fit Document editor component in remaining height.
113+
var windowHeight = window.innerHeight - (document.getElementById("documenteditor_titlebar").offsetHeight +26);
114+
this.$refs.doceditcontainer.ej2Instances.resize(windowWidth, windowHeight);
115+
},
116+
onWindowResize: function () {
117+
//Resizes the document editor component to fit full browser window automatically whenever the browser resized.
118+
this.updateDocumentEditorSize();
119+
},
120+
openTemplate: function () {
121+
var uploadDocument = new FormData();
122+
uploadDocument.append('DocumentName', 'Getting Started.docx');
123+
var loadDocumentUrl =
124+
this.$refs.doceditcontainer.ej2Instances.serviceUrl + 'LoadDocument';
125+
var httpRequest = new XMLHttpRequest();
126+
httpRequest.open('POST', loadDocumentUrl, true);
127+
var dataContext = this;
128+
httpRequest.onreadystatechange = function () {
129+
if (httpRequest.readyState === 4) {
130+
if (httpRequest.status === 200 || httpRequest.status === 304) {
131+
//Opens the SFDT for the specified file received from the web API.
132+
dataContext.$refs.doceditcontainer.ej2Instances.documentEditor.open(
133+
httpRequest.responseText
134+
);
135+
}
126136
}
127-
}
128-
};
129-
//Sends the request with template file name to web API.
130-
httpRequest.send(uploadDocument);
131-
},
132-
onWindowResize: function () {
133-
//Resizes the document editor component to fit full browser window automatically whenever the browser resized.
134-
this.updateDocumentEditorSize();
135-
}
136-
137-
137+
};
138+
//Sends the request with template file name to web API.
139+
httpRequest.send(uploadDocument);
140+
}
138141
},
139142
mounted() {
140-
this.$nextTick(function () {
141-
142-
this.$refs.doceditcontainer.ej2Instances.locale='en-US';
143-
var obj = this.$refs.doceditcontainer.ej2Instances.documentEditor;
144-
this.$refs.doceditcontainer.ej2Instances.serviceUrl = this.hostUrl + 'api/documenteditor/';
145-
146-
this.$refs.doceditcontainer.ej2Instances.documentChange = () => {
147-
this.documentChangedEvent();
148-
};
149-
var obj=this;
150-
setTimeout(()=>{
151-
obj.updateDocumentEditorSize();
152-
},100);
153-
window.addEventListener("resize", obj.onWindowResize);
154-
155-
});
143+
this.$nextTick(function () {
144+
this.$refs.doceditcontainer.ej2Instances.locale = 'en-US';
145+
this.$refs.doceditcontainer.ej2Instances.serviceUrl = this.hostUrl + 'api/documenteditor/';
146+
this.$refs.doceditcontainer.ej2Instances.documentChange = () => {
147+
this.documentChangedEvent();
148+
};
149+
var obj = this;
150+
setTimeout(() => {
151+
obj.updateDocumentEditorSize();
152+
}, 100);
153+
window.addEventListener('resize', obj.onWindowResize);
154+
this.openTemplate();
155+
});
156156
}
157157
});
158158
</script>

‎src/assets/logo.png‎ renamed to ‎Vue2/src/assets/logo.png‎

File renamed without changes.

‎src/main.js‎ renamed to ‎Vue2/src/main.js‎

File renamed without changes.

0 commit comments

Comments
 (0)