Render ASP.NET MVC Rich Text Editor in Dialog

When rendering the Rich Text Editor inside a Dialog Control, the dialog container and its wrapper elements are initially styled with display: none. This styling prevents the editor’s toolbar from calculating the proper offset width. As a result, the toolbar may render incorrectly, appearing above the edit area container.

To resolve this issue, use the RefreshUI method of the Rich Text Editor together with the Open event. This refreshes the Rich Text Editor’s UI once the Dialog becomes visible.

CSHTML

@Html.EJS().Button("targetButton").Content("OPEN DIALOG").Render()

@Html.EJS().Dialog("dialog").Header("Dialog header").ShowCloseIcon(true).Width("350px").Height("400px").Open("onOpen").ContentTemplate(@<div class='dialogContent'>
    @Html.EJS().RichTextEditor("RTE").Render()
</div>).Render()


<script>
    document.getElementById('targetButton').onclick = function () {
        var dialogObj = document.getElementById('dialog').ej2_instances[0];
        dialogObj.show();
    };

    function onOpen(args){
        var rteObj = document.getElementById('RTE').ej2_instances[0];
        rteObj.refreshUI()
    }
</script>

<style>
    body, html {
        width: 100%;
        height: 100%;
    }
</style>

Controller.cs

public class HomeController : Controller
{

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