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>