Integrate Editor into Dialog

Environment

Product	Progress® Kendo UI® Editor for jQuery	Progress® Kendo UI® Dialog for jQuery
Product Version	Tested up to version 2017.2.621

Description

How can I display the Kendo UI Editor in a Kendo UI Dialog?

Solution

Initialize the Kendo UI Editor in the Dialog by displaying the value of the Editor in an external div element.

<div id="editorDialog">
 <textarea id="editor"></textarea>
</div>

Content:
<div id="content" style="border: 2px solid black; width: 100%; height:300px; overflow: auto;">
  <h1>Sample</h1>
</div>

<button id="openBtn" class="k-button" type="button">Update Content</button>

<script>
var editor = $("#editor").kendoEditor()
    .data("kendoEditor");

    var dialog = $("#editorDialog").kendoDialog({
        width: "500px",
        title: "Editor",
        visible: false,
        actions: [
            { text: 'OK', primary: true, action: updateText },
            { text: 'Cancel'}
        ],
        open: function(){
            editor.refresh();
        }
    }).data("kendoDialog");

    $("#openBtn").click(function(){
        dialog.open();
    });

    function updateText(){
        $("#content").html(editor.value());
    }
</script>
<style>
    .k-dialog .k-content.k-window-content.k-dialog-content,
    .k-dialog .k-content iframe.k-content{
        padding: 0;
        margin: 0;
    }
</style>