Dialog in Vue Document editor component
16 Oct 202424 minutes to read
Document Editor provides dialog support to major operations such as insert or edit hyperlink, formatting text, paragraph, style, list and table properties.
Font Dialog
Font dialog allows you to modify all text properties for selected contents at once such as bold, italic, underline, font size, font color, strikethrough, subscript and superscript.
Refer to the following example.
<template>
<div id="app">
<div>
<button v-on:click='showFontDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableFontDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, FontDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, FontDialog, SfdtExport]);
const showFontDialog = function () {
//Open the font dialog.
documenteditor.value.showDialog('Font');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div id="app">
<div>
<button v-on:click='showFontDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableFontDialog='true' :enableSfdtExport='true' height="370px" style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, FontDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules.
DocumentEditor: [Selection, Editor, FontDialog, SfdtExport]
},
methods: {
showFontDialog: function () {
//Open the font dialog.
this.$refs.documenteditor.showDialog('Font');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
Paragraph dialog
This dialog allows modifying the paragraph formatting for selection at once such as text alignment, indentation, and spacing.
To open this dialog, refer to the following example.
<template>
<div id="app">
<div>
<button v-on:click='showParagraphDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableParagraphDialog='true' :enableSfdtExport='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, ParagraphDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, ParagraphDialog, SfdtExport]);
const showParagraphDialog = function () {
//Open the paragraph dialog.
documenteditor.value.showDialog('Paragraph');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div id="app">
<div>
<button v-on:click='showParagraphDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableParagraphDialog='true' :enableSfdtExport='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, ParagraphDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules.
DocumentEditor: [Selection, Editor, ParagraphDialog, SfdtExport]
},
methods: {
showParagraphDialog: function () {
//Open the paragraph dialog.
this.$refs.documenteditor.showDialog('Paragraph');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
Table dialog
This dialog allows creating and inserting a table at cursor position by specifying the required number of rows and columns.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showTableDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableTableDialog='true' :enableSfdtExport='true' style="width: 100%;" height="370px"></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as Ejs, Selection, Editor, TableDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, TableDialog, SfdtExport]);
const showTableDialog = function () {
//Open the table dialog.
documenteditor.value.showDialog('Table');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showTableDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableTableDialog='true' :enableSfdtExport='true' style="width: 100%;" height="370px"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, TableDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, TableDialog, SfdtExport]
},
methods: {
showTableDialog: function () {
//Open the table dialog.
this.$refs.documenteditor.showDialog('Table');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
Bookmark dialog
This dialog allows you to perform the following operations:
- View all bookmarks.
- Navigate to a bookmark.
- Create a bookmark at current selection.
- Delete an existing bookmark.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showBookmarkDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableBookmarkDialog='true' :enableSfdtExport='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, BookmarkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, BookmarkDialog, SfdtExport]);
const showBookmarkDialog = function () {
//Open the bookmark dialog.
documenteditor.value.showDialog('Bookmark');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showBookmarkDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableBookmarkDialog='true' :enableSfdtExport='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, BookmarkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, BookmarkDialog, SfdtExport]
},
methods: {
showBookmarkDialog: function () {
//Open the bookmark dialog.
this.$refs.documenteditor.showDialog('Bookmark');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
Hyperlink dialog
This dialog allows editing or inserting a hyperlink at cursor position.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showHyperlinkDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true' v-bind:requestNavigate="onRequestNavigate"
:enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, HyperlinkDialog, SfdtExport]);
const showHyperlinkDialog = function () {
//Opens hyperlink dialog.
documenteditor.value.showDialog('Hyperlink');
}
const onRequestNavigate= function (args) {
if (args.linkType !== 'Bookmark') {
let link = args.navigationLink;
if (args.localReference.length > 0) {
link += '#' + args.localReference;
}
window.open(link);
args.isHandled = true;
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
@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" style="height:400px">
<div>
<button v-on:click='showHyperlinkDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableHyperlinkDialog='true' :enableSfdtExport='true' height="370px" v-bind:requestNavigate="onRequestNavigate"
style="width: 100%; "></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, HyperlinkDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, HyperlinkDialog, SfdtExport]
},
methods: {
showHyperlinkDialog: function () {
//Opens hyperlink dialog.
this.$refs.documenteditor.showDialog('Hyperlink');
},
onRequestNavigate: function (args) {
if (args.linkType !== 'Bookmark') {
let link = args.navigationLink;
if (args.localReference.length > 0) {
link += '#' + args.localReference;
}
window.open(link);
args.isHandled = true;
}
}
}
}
</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>
Table of contents dialog
This dialog allows creating and inserting table of contents at cursor position. If the table of contents already exists at cursor position, you can customize its properties.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showTableOfContentsDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableTableOfContentsDialog='true' :enableSfdtExport='true' :enableEditorHistory="true" height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, TableOfContentsDialog, SfdtExport, EditorHistory } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const documenteditor = ref(null);
//Inject require modules
provide('DocumentEditor', [Selection, Editor, TableOfContentsDialog, EditorHistory, SfdtExport])
const showTableOfContentsDialog = function () {
//Open the table of contents dialog.
documenteditor.value.showDialog('TableOfContents');
}
</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" style="height:400px">
<div>
<button v-on:click='showTableOfContentsDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableTableOfContentsDialog='true' :enableEditorHistory="true" :enableSfdtExport='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, TableOfContentsDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, TableOfContentsDialog, EditorHistory, SfdtExport]
},
methods: {
showTableOfContentsDialog: function () {
//Open the table of contents dialog.
this.$refs.documenteditor.showDialog('TableOfContents');
}
}
}
</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>
Styles Dialog
This dialog allows managing the styles in a document. It will display all the styles in the document with options to modify the properties of the existing style or create new style with the help of ‘Style dialog’. Refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showStylesDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableStylesDialog='true' :enableSfdtExport='true' :enableStyleDialog='true' :enableEditorHistory="true" height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, StylesDialog, StyleDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const documenteditor = ref(null);
//Inject require modules
provide('DocumentEditor', [Selection, Editor, StylesDialog, StyleDialog, EditorHistory, SfdtExport]);
const showStylesDialog = function () {
//Open the styles dialog.
documenteditor.value.showDialog('Styles');
}
</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" style="height:400px">
<div>
<button v-on:click='showStylesDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableStylesDialog='true' :enableSfdtExport='true' :enableStyleDialog='true' :enableEditorHistory="true" height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, StylesDialog, StyleDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, StylesDialog, StyleDialog, EditorHistory, SfdtExport]
},
methods: {
showStylesDialog: function () {
//Open the styles dialog.
this.$refs.documenteditor.showDialog('Styles');
}
}
}
</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>
Style dialog
You can directly use this dialog for modifying any existing style or add new style by providing the style name.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showStyleDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableStyleDialog='true' :enableEditorHistory="true" height="370px" style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, StyleDialog, StylesDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, StyleDialog, StylesDialog, EditorHistory, SfdtExport])
const showStyleDialog = function () {
//Open styles dialog.
documenteditor.value.showDialog('Style');
}
</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" style="height:400px">
<div>
<button v-on:click='showStyleDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableStyleDialog='true' :enableEditorHistory="true" height="370px" style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, StyleDialog, StylesDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, StyleDialog, StylesDialog, EditorHistory, SfdtExport]
},
methods: {
showStyleDialog: function () {
//Open styles dialog.
this.$refs.documenteditor.showDialog('Style');
}
}
}
</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>
List dialog
This dialog allows creating a new list or modifying existing lists in the document.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showListDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableListDialog='true' height="370px" style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, ListDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, ListDialog, SfdtExport]);
const showListDialog = function () {
//Open list dialog.
documenteditor.value.showDialog('List');
}
</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" style="height:400px">
<div>
<button v-on:click='showListDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableListDialog='true' height="370px" style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, ListDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, ListDialog, SfdtExport]
},
methods: {
showListDialog: function () {
//Open list dialog.
this.$refs.documenteditor.showDialog('List');
}
}
}
</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>
Borders and shading dialog
This dialog allows customizing the border style, border width, and background color of the table or selected cells.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showBordersAndShadingDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableBordersAndShadingDialog='true' height="370px" style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, BordersAndShadingDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
import { provide, ref } from 'vue';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, BordersAndShadingDialog, SfdtExport]);
const showBordersAndShadingDialog = function () {
//Open borders and shading dialog.
documenteditor.value.showDialog('BordersAndShading');
}
</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" style="height:400px">
<div>
<button v-on:click='showBordersAndShadingDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableBordersAndShadingDialog='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, BordersAndShadingDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, BordersAndShadingDialog, SfdtExport]
},
methods: {
showBordersAndShadingDialog: function () {
//Open borders and shading dialog.
this.$refs.documenteditor.showDialog('BordersAndShading');
}
}
}
</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>
Table options dialog
This dialog allows customizing the default cell margins and spacing between each cells of the selected table.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showTableOptionsDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableTableOptionsDialog='true' :enableTablePropertiesDialog='true' :enableEditorHistory="true" height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, TableOptionsDialog, TablePropertiesDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
import { onMounted, provide, ref } from 'vue';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, TableOptionsDialog, TablePropertiesDialog, EditorHistory, SfdtExport]);
const showTableOptionsDialog = function () {
//Open table options dialog.
documenteditor.value.showDialog('TableOptions');
}
onMounted(function () {
documenteditor.value.ej2Instances.editor.insertTable(2, 2);
})
</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" style="height:400px">
<div>
<button v-on:click='showTableOptionsDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableTableOptionsDialog='true' :enableTablePropertiesDialog='true' :enableEditorHistory="true" height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, TableOptionsDialog, TablePropertiesDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules
DocumentEditor: [Selection, Editor, TableOptionsDialog, TablePropertiesDialog, EditorHistory, SfdtExport]
},
methods: {
showTableOptionsDialog: function () {
//Open table options dialog.
this.$refs.documenteditor.showDialog('TableOptions');
}
},
mounted() {
this.$refs.documenteditor.ej2Instances.editor.insertTable(2, 2);
}
}
</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>
Table properties dialog
This dialog allows customizing the table, row, and cell properties of the selected table.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showTablePropertiesDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableTablePropertiesDialog='true' :enableEditorHistory="true" height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, TablePropertiesDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
import { onMounted, provide, ref } from 'vue';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, TablePropertiesDialog, EditorHistory, SfdtExport]);
const showTablePropertiesDialog = function () {
//Open table properties dialog.
documenteditor.value.showDialog('TableProperties');
}
onMounted(function () {
documenteditor.value.ej2Instances.editor.insertTable(2, 2);
})
</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" style="height:400px">
<div>
<button v-on:click='showTablePropertiesDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enableTablePropertiesDialog='true' :enableEditorHistory="true" height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, TablePropertiesDialog, EditorHistory, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
components: {
'ejs-documenteditor': DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
DocumentEditor: [Selection, Editor, TablePropertiesDialog, EditorHistory, SfdtExport]
},
methods: {
showTablePropertiesDialog: function () {
//Open table properties dialog.
this.$refs.documenteditor.showDialog('TableProperties');
}
},
mounted() {
this.$refs.documenteditor.ej2Instances.editor.insertTable(2, 2);
}
}
</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>
Page setup dialog
This dialog allows customizing margins, size, and layout options for pages of the section.
To open this dialog, refer to the following example.
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showPageSetupDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enablePageSetupDialog='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { DocumentEditorComponent as EjsDocumenteditor, Selection, Editor, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
const documenteditor = ref(null);
provide('DocumentEditor', [Selection, Editor, PageSetupDialog, SfdtExport]);
const showPageSetupDialog = function () {
//Open page setup dialog.
documenteditor.value.showDialog('PageSetup');
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>
<template>
<div id="app" style="height:400px">
<div>
<button v-on:click='showPageSetupDialog'>Open dialog</button>
</div>
<ejs-documenteditor ref="documenteditor" :enableSelection='true' :isReadOnly='false' :enableEditor='true'
:enableSfdtExport='true' :enablePageSetupDialog='true' height="370px"
style="width: 100%;"></ejs-documenteditor>
</div>
</template>
<script>
import { DocumentEditorComponent, Selection, Editor, PageSetupDialog, SfdtExport } from '@syncfusion/ej2-vue-documenteditor';
export default {
name: "App",
components: {
"ejs-documenteditor": DocumentEditorComponent
},
data: function () {
return {
};
},
provide: {
//Inject require modules.
DocumentEditor: [Selection, Editor, PageSetupDialog, SfdtExport]
},
methods: {
showPageSetupDialog: function () {
//Open page setup dialog.
this.$refs.documenteditor.showDialog('PageSetup');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-documenteditor/styles/material.css";
</style>