Dialog in Document Editor Component
9 Jan 202314 minutes to read
Documenteditor 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 to modify all text properties for selected contents at once such as bold, italic, underline, font size, font color, strikethrough, subscript and superscript.
NOTE
To enable font dialog for a document editor instance, set ‘enableFontDialog’ to true.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableFontDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
var containerPanel;
document.addEventListener('DOMContentLoaded', function () {
var documenteditorElement = document.getElementById("container");
documenteditor = documenteditorElement.ej2_instances[0];
documenteditor.resize();
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open Font Dialog
documenteditor.showDialog('Font');
});
});
</script>
public ActionResult Default()
{
return View();
}
Paragraph dialog
This dialog allows modifying the paragraph formatting for selection at once such as text alignment, indentation, and spacing.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableParagraphDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
var containerPanel;
document.addEventListener('DOMContentLoaded', function () {
var documenteditorElement = document.getElementById("container");
documenteditor = documenteditorElement.ej2_instances[0];
documenteditor.resize();
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open Paragraph Dialog
documenteditor.showDialog('Paragraph');
});
});
</script>
Table dialog
This dialog allows creating and inserting a table at cursor position by specifying the required number of rows and columns.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open Table Dialog
documenteditor.showDialog('Table');
});
});
</script>
Bookmark dialog
This dialog allows to perform the following operations:
- View all bookmarks.
- Navigate to a bookmark.
- Create a bookmark at current selection.
- Delete an existing bookmark.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableBookmarkDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
var containerPanel;
document.addEventListener('DOMContentLoaded', function () {
var documenteditorElement = document.getElementById("container");
documenteditor = documenteditorElement.ej2_instances[0];
documenteditor.resize();
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open Bookmark Dialog
documenteditor.showDialog('Bookmark');
});
});
</script>
Hyperlink dialog
This dialog allows editing or inserting a hyperlink at cursor position.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("DocumentEditor").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).EnableHyperlinkDialog(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById('DocumentEditor').ej2_instances[0];
documenteditor.resize();
});
//Click the Dialog button, the hyperlink dialog will open
document.getElementById('dialog').addEventListener('click', function () {
documenteditor.showDialog('Hyperlink');
});
</script>
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.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableOfContentsDialog(true).EnableSelection(true).EnableEditorHistory(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open TableOfContents Dialog
documenteditor.showDialog('TableOfContents');
});
});
</script>
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’.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableStyleDialog(true).EnableEditorHistory(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open Styles Dialog
documenteditor.showDialog('Styles');
});
});
</script>
Style dialog
You can directly use this dialog for modifying any existing style or add new style by providing the style name.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableStyleDialog(true).EnableEditorHistory(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open Style Dialog
documenteditor.showDialog('Style');
});
});
</script>
List dialog
This dialog allows creating a new list or modifying existing lists in the document.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableListDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open List Dialog
documenteditor.showDialog('List');
});
});
</script>
Borders and shading dialog
This dialog allows customizing the border style, border width, and background color of the table or selected cells.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableBordersAndShadingDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open BordersAndShading Dialog
documenteditor.showDialog('BordersAndShading');
});
});
</script>
Table options dialog
This dialog allows customizing the default cell margins and spacing between each cells of the selected table.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTableOptionsDialog(true).EnableTablePropertiesDialog(true).EnableEditorHistory(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
documenteditor.editor.insertTable(2,2);
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open TableOptions Dialog
documenteditor.showDialog('TableOptions');
});
});
</script>
Table properties dialog
This dialog allows customizing the table, row, and cell properties of the selected table.
@Html.EJS().Button("dialog").Content("Dialog").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableTablePropertiesDialog(true).EnableEditorHistory(true).EnableSelection(true).EnableSfdtExport(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
documenteditor.editor.insertTable(2,2);
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open TableProperties Dialog
documenteditor.showDialog('TableProperties');
});
});
</script>
Page setup dialog
This dialog allows customizing margins, size, and layout options for pages of the section.
@Html.EJS().Button("dialog").Content("Dialog").Render()
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnablePageSetupDialog(true).EnableSelection(true).EnableSfdtExport(true).Render()
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var button = document.getElementById('dialog');
button.addEventListener('click', function () {
// To open PageSetup Dialog
documenteditor.showDialog('PageSetup');
});
});
</script>