How to Enable Ruler in ASP.NET Core DOCX Editor

2 Sep 20262 minutes to read

Enable ruler in DOCX Editor

Using the ruler, you can set specific margins, tab stops, or indentations within a document to ensure consistent formatting in the ASP.NET Core DOCX Editor (Document Editor).

The following example illustrates how to enable the ruler in the DOCX Editor.

<ejs-button id="container_ruler_button" content="Show/hide ruler" onclick="onClick()"></ejs-button>
<ejs-documenteditor id="container">
    <ejs-documenteditorcontainerevent (created)="onCreate()" documentEditorSettings="settings" isReadOnly=false></ejs-documenteditorcontainerevent>
</ejs-documenteditor>

<script>
    var container;
    var settings = { showRuler: true };
    function onCreate() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
        container.enableAllModules();
    }
    function onClick() {
        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
    }
</script>
public ActionResult Default()
{
    return View();
}

Enable ruler in Document Editor Container

Using the ruler, you can set specific margins, tab stops, or indentations within a document to ensure consistent formatting in the Document Editor Container.

The following example illustrates how to enable the ruler in the Document Editor Container.

<ejs-button id="container_ruler_button" content="Show/hide ruler" onclick="onClick()"></ejs-button>
<ejs-documenteditorcontainer id="container" (created)="onCreate()" documentEditorSettings="settings"></ejs-documenteditorcontainer>

<script>
    var container;
    var settings = { showRuler: true };
    function onCreate() {
        var documenteditorElement = document.getElementById("container");
        container = documenteditorElement.ej2_instances[0];
    }
    function onClick() {
        container.documentEditorSettings.showRuler = !container.documentEditorSettings.showRuler;
    }
</script>
public ActionResult Default()
{
    return View();
}