Search results

Render model dialog with Rich Text Editor

30 Jul 2021 / 1 minute to read

This section explains how to render model dialog with the Rich Text Editor component. when you render model dialog with the Rich Text Editor component, the first row of the content will be hidden because the dialog container and its wrapper elements are styled with display as none. so, the editor’s toolbar does not get proper offset width and rendered above the edit area container. In this scenario, we could use the refreshUI method on the Dialog open event.

tagHelper
controller.cs
Copied to clipboard
<div id='container' style="height:400px;">
    <ejs-button id="targetButton" content="Open Modal Dialog"></ejs-button>
    <ejs-dialog id='dialog' isModal="true" width="300px" overlayClick="onOverlayClick" open="dlgopen" target="#container">
        <e-content-template>
            <ejs-richtexteditor id="defaultRTE">

            </ejs-richtexteditor>
            </e-content-template>
</ejs-dialog>
</div>

<script>
    window.onload = function () {
        document.getElementById('targetButton').onclick = function () {
            var dialog = document.getElementById("dialog").ej2_instances[0];
            dialog.show();
        }
    }
    function onOverlayClick() {
        var dialog = document.getElementById("dialog").ej2_instances[0];
        dialog.hide();
    }
    function dlgopen() {
        var RTE = document.getElementById("defaultRTE").ej2_instances[0];
        RTE.refreshUI();
    }
</script>
Copied to clipboard
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}