Enable ruler

18 Nov 20182 minutes to read

How to enable ruler in 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

<div>
    @Html.EJS().Button("container_ruler_button").Content("Show/Hide Ruler").Click("onClick").Render()
    @Html.EJS().DocumentEditor("container").Created("onCreate").IsReadOnly(false).DocumentEditorSettings("settings").Render()
</div>

<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

<div>
    @Html.EJS().Button("container_ruler_button").Content("Show/Hide Ruler").Click("onClick").Render()
    @Html.EJS().DocumentEditorContainer("container").Created("onCreate").DocumentEditorSettings("settings").Render()
</div>

<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();
}