How to Set Default Format in ASP.NET MVC DOCX Editor

27 Aug 20265 minutes to read

You can set the default character format, paragraph format, and section format in the DOCX Editor.

Set the default character format

You can use the setDefaultCharacterFormat method to set the default character format. For example, the default font size of the DOCX Editor is 11, and you can change it to any valid value.

CSHTML

<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
</div>
<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        container.documentEditor.setDefaultCharacterFormat({fontSize: 20});
    }
</script>

Similarly, you can change the required CharacterFormatProperties default values.

CSHTML

<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
</div>
<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        var defaultCharacterFormat = {
            bold: false,
            italic: false,
            baselineAlignment: 'Normal',
            underline: 'None',
            fontColor: "#000000",
            fontFamily: 'Algerian',
            fontSize: 12
        };
      container.documentEditor.setDefaultCharacterFormat(defaultCharacterFormat);
    }
</script>

Set the default paragraph format

You can use the setDefaultParagraphFormat API to set the default paragraph format. You can change the required ParagraphFormatProperties default values.

CSHTML

<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
</div>
<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        var defaultParagraphFormat = {
            beforeSpacing: 8,
            lineSpacing: 1.5,
            leftIndent: 24,
            textAlignment: "Center"
        };
        container.documentEditor.setDefaultParagraphFormat(defaultParagraphFormat);
    }
</script>

Set the default section format

You can use the setDefaultSectionFormat API to set the default section format. You can change the required SectionFormatProperties default values.

CSHTML

<div>
@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
</div>
<script>
    var documenteditor;
    var container;
    function onCreated() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        documenteditor = container.documentEditor;
        var defaultSectionFormat = {
            pageWidth: 500,
            pageHeight: 800,
            headerDistance: 56,
            footerDistance: 48,
            leftMargin: 12,
            rightMargin: 12,
            topMargin:0,
            bottomMargin:0
        };
        container.documentEditor.setDefaultSectionFormat(defaultSectionFormat);
    }
</script>