How to Set Default Format in Vue DOCX Editor
28 Aug 202613 minutes to read
You can set the default character format, paragraph format, and section format in Vue DOCX Editor (Document Editor).
Set the default character format
You can use setDefaultCharacterFormat method to set the default character format. For example, the DOCX Editor default font size is 11, and you can change it to any valid value.
The following example code illustrates how to change the default font size in the DOCX Editor.
<template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></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://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar])
const onCreated = function () {
container.value.ej2Instances.documentEditor.setDefaultCharacterFormat({ fontSize: 20 });
}
</script><template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl:
'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
};
},
provide: {
//Inject required modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onCreated: function () {
this.$refs.container.ej2Instances.documentEditor.setDefaultCharacterFormat({ fontSize: 20 });
},
},
};
</script>The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
Similarly, you can change the required CharacterFormatProperties default values in the DOCX Editor.
The following example code illustrates how to change other default character format values in the DOCX Editor.
<template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></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://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar])
const onCreated = function () {
let defaultCharacterFormat = {
bold: false,
italic: false,
baselineAlignment: 'Normal',
underline: 'None',
fontColor: '#000000',
fontFamily: 'Algerian',
fontSize: 12,
};
container.value.ej2Instances.documentEditor.setDefaultCharacterFormat(
defaultCharacterFormat
);
}
</script><template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl:
'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
};
},
provide: {
//Inject required modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onCreated: function () {
let defaultCharacterFormat = {
bold: false,
italic: false,
baselineAlignment: 'Normal',
underline: 'None',
fontColor: '#000000',
fontFamily: 'Algerian',
fontSize: 12,
};
this.$refs.container.ej2Instances.documentEditor.setDefaultCharacterFormat(
defaultCharacterFormat
);
},
},
};
</script>The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
Set the default paragraph format
You can use setDefaultParagraphFormat API to set the default paragraph format. You can change the required ParagraphFormatProperties default value.
The following example code illustrates how to change the paragraph format (before spacing, line spacing, etc.) default value in the DOCX Editor.
<template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></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://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar]);
const onCreated = function () {
let defaultParagraphFormat = {
beforeSpacing: 8,
lineSpacing: 1.5,
leftIndent: 24,
textAlignment: "Center"
};
container.value.ej2Instances.documentEditor.setDefaultParagraphFormat(defaultParagraphFormat);
}
</script><template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl:
'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
};
},
provide: {
//Inject required modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onCreated: function () {
let defaultParagraphFormat = {
beforeSpacing: 8,
lineSpacing: 1.5,
leftIndent: 24,
textAlignment: "Center"
};
this.$refs.container.ej2Instances.documentEditor.setDefaultParagraphFormat(defaultParagraphFormat);
},
}
};
</script>The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.
Set the default section format
You can use setDefaultSectionFormat API to set the default section format. You can change the required SectionFormatProperties default value.
The following example code illustrates how to change the section format (header and footer distance, page width and height, etc.) default value in the DOCX Editor.
<template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></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://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
//Inject required modules.
provide('DocumentEditorContainer', [Toolbar]);
const onCreated = function () {
let defaultSectionFormat = {
pageWidth: 500,
pageHeight: 800,
headerDistance: 56,
footerDistance: 48,
leftMargin: 12,
rightMargin: 12,
topMargin: 0,
bottomMargin: 0
};
container.value.ej2Instances.documentEditor.setDefaultSectionFormat(defaultSectionFormat);
}
</script><template>
<div id="app">
<ejs-documenteditorcontainer ref='container' :serviceUrl='serviceUrl' v-on:created="onCreated" height="590px"
id='container' :enableToolbar='true'></ejs-documenteditorcontainer>
</div>
</template>
<script>
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditorcontainer': DocumentEditorContainerComponent
},
data() {
return {
serviceUrl:
'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/',
};
},
provide: {
//Inject required modules.
DocumentEditorContainer: [Toolbar]
},
methods: {
onCreated: function () {
let defaultSectionFormat = {
pageWidth: 500,
pageHeight: 800,
headerDistance: 56,
footerDistance: 48,
leftMargin: 12,
rightMargin: 12,
topMargin: 0,
bottomMargin: 0
};
this.$refs.container.ej2Instances.documentEditor.setDefaultSectionFormat(defaultSectionFormat);
},
},
};
</script>The Web API hosted link
https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/utilized in the DOCX Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use for the serviceUrl property.