How to set the default character, paragraph and section format in Document Editor component

5 Apr 20225 minutes to read

You can set the default character format, paragraph format and section format in Document editor.

Set the default character format

You can use setDefaultCharacterFormat method to set the default character format. For example, Document editor default font size is 11 and you can change it as 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 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;
        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 setDefaultParagraphFormat API to set the default paragraph format. You can change the required ParagraphFormatProperties default 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;
        var defaultParagraphFormat = {
            beforeSpacing: 8,
            lineSpacing: 1.5,
            leftIndent: 24,
            textAlignment: "Center"
        };
        container.documentEditor.setDefaultParagraphFormat(defaultParagraphFormat);
    }
</script>

Set the default section format

You can use setDefaultSectionFormat API to set the default section format. You can change the required SectionFormatProperties default 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;
        var defaultSectionFormat = {
            pageWidth: 500,
            pageHeight: 800,
            headerDistance: 56,
            footerDistance: 48,
            leftMargin: 12,
            rightMargin: 12,
            topMargin:0,
            bottomMargin:0
        };
        container.documentEditor.setDefaultSectionFormat(defaultSectionFormat);
    }
</script>