Contact Support
Deploy document editor component for mobile in Vue Document editor component
11 Jun 20244 minutes to read
Document editor component for Mobile
At present, Document editor component is not responsive for mobile, and we haven’t ensured the editing functionalities in mobile browsers. Whereas it works properly as a document viewer in mobile browsers.
Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke fitPage
method with FitPageWidth
parameter in document change event, such as to display one full page by adjusting the zoom factor.
The following example code illustrates how to deploy Document Editor component for Mobile.
<template>
<div id="app">
<ejs-documenteditorcontainer ref="container" height="590px" :serviceUrl='serviceUrl' :enableToolbar='true'
:documentChange='onDocumentChange'> </ejs-documenteditorcontainer>
</div>
</template>
<script setup>
import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const container = ref(null);
const serviceUrl = 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
//Inject require modules.
provide('DocumentEditorContainer', [Toolbar])
const onDocumentChange = function (args) {
//To detect the device
let isMobileDevice = /Android|Windows Phone|webOS/i.test(navigator.userAgent);
if (isMobileDevice) {
container.value.ej2Instances.restrictEditing = true;
setTimeout(() => {
container.value.ej2Instances.documentEditor.fitPage("FitPageWidth");
}, 50);
}
else {
container.value.ej2Instances.restrictEditing = false;
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div id="app">
<ejs-documenteditorcontainer ref="container" height="590px" :serviceUrl='serviceUrl' :enableToolbar='true'
:documentChange='onDocumentChange'> </ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return { serviceUrl: 'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/' }
},
provide: {
//Inject require modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onDocumentChange: function (args) {
//To detect the device
let isMobileDevice = /Android|Windows Phone|webOS/i.test(navigator.userAgent);
if (isMobileDevice) {
this.$refs.container.ej2Instances.restrictEditing = true;
setTimeout(() => {
this.$refs.container.ej2Instances.documentEditor.fitPage("FitPageWidth");
}, 50);
}
else {
this.$refs.container.ej2Instances.restrictEditing = false;
}
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
You can download the complete working example from this GitHub location
Note: You can use the
restrictEditing
in DocumentEditorContainer andisReadOnly
in DocumentEditor based on your requirement to change component to read only mode.