Styles in ASP.NET MVC DOCX Editor

14 Aug 202610 minutes to read

Styles are useful for applying a set of formatting consistently throughout the document. In the Document Editor, styles are created and added to a document programmatically or via the built-in Styles dialog.

Styles definition overview

A Style in the Document Editor should have the following properties:

  • name: Name of the style. All styles in a document have a unique name, which is used as an identifier when applying the style.
  • type: Specifies the document elements that the style will target. For example, paragraph or character.
  • next: Specifies the style that should be automatically applied to a new paragraph created after the current one.
  • link: Provides a relation between the paragraph and character style.
  • characterFormat: Specifies the properties of paragraph and character style.
  • paragraphFormat: Specifies the properties of paragraph style.
  • basedOn: Specifies that the current style inherits the style set to this property. This is the basis for defining hierarchical styles. It can be optional.

NOTE

The style type should match the inherited style type. For example, it is not possible to have a character style inherit a paragraph style.

Default style

The default style for span and paragraph properties is Normal. It internally inherits the default style of the document loaded or the Document Editor component.

Style hierarchy

Each style initially checks its local value for the property that is being evaluated and falls back to the style it is based on. If no local value is found, it falls back to its default style.

Style inheritance for the different styles is listed as follows.

Character style

Character styles are based only on other character styles.

Character properties are inherited from the base character style.

Paragraph style

Paragraph styles are based on other paragraph styles or on linked styles.

When a paragraph style is based on another paragraph style:

  • Paragraph properties are inherited from the base paragraph style.
  • Span properties are inherited from the base paragraph style.

When a paragraph style is based on a linked style:

  • Paragraph properties are inherited from the paragraph style part in its base linked style.
  • Span properties are inherited from the span style part in its base linked style.

Linked style

Linked styles are composite styles whose components are paragraph and character styles with a link between them. The paragraph properties are taken from the linked paragraph style, and the character properties are taken from the linked character style. Linked styles are based on other linked styles or on paragraph styles.

When a linked style is based on a paragraph style:

  • Paragraph properties are inherited from the ‘basedOn’ paragraph style.
  • Character properties are inherited from the ‘basedOn’ paragraph style.

When a linked style is based on another linked style:

  • Paragraph properties are inherited from the paragraph style part in its base linked style.
  • Span properties are inherited from the span style part in its base linked style.

Defining new styles

New styles are defined and added to the style collection of the document. They are then discovered by the default UI and applied to the parts of the document.

Defining a character style

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        var styleJson = {
            "type": "Character",
            "name": "New CharacterStyle",
            "basedOn": "Default Paragraph Font",
            "characterFormat": {
                "fontSize": 16.0,
                "fontFamily": "Calibri Light",
                "fontColor": "#2F5496",
                "bold": true,
                "italic": true,
                "underline": "Single"
            }
        };
        documentEditor.editor.createStyle(JSON.stringify(styleJson));
    });
</script>

Defining a paragraph style

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).Render()

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        var styleJson = {
            "type": "Paragraph",
            "name": "New ParagraphStyle",
            "basedOn": "Normal",
            "characterFormat": {
                "fontSize": 16.0,
                "fontFamily": "Calibri Light",
                "fontColor": "#2F5496",
                "bold": true,
                "italic": true,
                "underline": "Single"
            },
            "paragraphFormat": {
                "leftIndent": 0.0,
                "rightIndent": 0.0,
                "firstLineIndent": 0.0,
                "beforeSpacing": 12.0,
                "afterSpacing": 0.0,
                "lineSpacing": 1.0791666507720947,
                "lineSpacingType": "Multiple",
                "textAlignment": "Left",
                "outlineLevel": "Level1"
            }
        };
        documentEditor.editor.createStyle(JSON.stringify(styleJson));
    });
</script>

Defining a linked style

@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSfdtExport(true).Render()

<script>
    var documenteditor;
    document.addEventListener('DOMContentLoaded', function () {
        documenteditor = document.getElementById("container").ej2_instances[0];
        var styleJson = {
                "type": "Paragraph",
                "name": "New Linked",
                "basedOn": "Normal",
                "next": "Normal",
                "link": "New Linked Char",
                "characterFormat": {
                        "fontSize": 16.0,
                        "fontFamily": "Calibri Light",
                        "fontColor": "#2F5496"
                },
                "paragraphFormat": {
                        "leftIndent": 0.0,
                        "rightIndent": 0.0,
                        "firstLineIndent": 0.0,
                        "beforeSpacing": 12.0,
                        "afterSpacing": 0.0,
                        "lineSpacing": 1.0791666507720947,
                        "lineSpacingType": "Multiple",
                        "textAlignment": "Left",
                        "outlineLevel": "Level1"
                }
        };
        documentEditor.editor.createStyle(JSON.stringify(styleJson));
    });
</script>

Applying a style

The styles are applied using the applyStyle method of editorModule; the parameter should be passed in the name of the style.

Character-type styles are applied to the currently selected part of the document. If there is no selection, the style will be applied to the word at the caret position. Paragraph-type styles follow the same logic and are applied to all paragraphs in the selection or the current paragraph.

When there is no selection, the Linked type applies both the Paragraph and Character properties of the paragraph. When there is a selection, Linked Style changes only the character properties of the selected text.

For example, the following line will apply the “New Linked” to the current paragraph.

documenteditor.editor.applyStyle('New Linked');
//Clear direct formatting and apply the specified style
documenteditor.editor.applyStyle('New Linked', true);

Get styles

You can get the styles in the document using the following code snippet.

//Get paragraph styles
var paragraphStyles = documentEditor.getStyles('Paragraph');
//Get character styles
var characterStyles = documentEditor.getStyles('Character');

Online demo

Explore how to apply and modify styles in Word documents using the ASP.NET MVC Document Editor in this live demo.