New to Kendo UI for jQuery? Download free 30-day trial

Integrate Editor into Dialog


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


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


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 id="content" style="border: 2px solid black; width: 100%; height:300px; overflow: auto;">

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

var editor = $("#editor").kendoEditor()

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


    function updateText(){
    .k-dialog .k-content.k-window-content.k-dialog-content,
    .k-dialog .k-content iframe.k-content{
        padding: 0;
        margin: 0;
In this article