How to Enable Ruler in React ASP.NET MVC Editor

27 Aug 20262 minutes to read

To enable the ruler, set the showRuler property to true in the documentEditorSettings of the DOCX Editor component. By default, the ruler is disabled. The ruler can be used to set specific margins, tab stops, or indentations within a document to ensure consistent formatting.

How to enable ruler in the DOCX Editor component

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

<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>
public ActionResult Default()
{
    return View();
}

How to enable ruler in the Document Editor Container component

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

<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>
public ActionResult Default()
{
    return View();
}