How to enable ruler in ASP.NET Core Document Editor component

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.

The following example illustrates how to enable ruler in Document Editor

CSHTML

<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>

Document-editor.cs

public ActionResult Default()
{
    return View();
}

How to enable ruler in Document Editor Container component

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor Container.

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

CSHTML

<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>

Document-editor.cs

public ActionResult Default()
{
    return View();
}