Kendo UI Editor inside Kendo Window

Question

I am using a kendo-editor for WYSIWYG text editing and works great. But when the kendo-editor is inside a kendo-window I get this error

TypeError: Cannot read property 'open' of null
    at Widget.extend._createContentElement (webpack:///./kendo-ui/js/kendo.editor.js?:426:16)
    at Widget.extend._initializeContentElement (webpack:///./kendo-ui/js/kendo.editor.js?:512:40)
    at new Widget.extend.init (webpack:///./kendo-ui/js/kendo.editor.js?:282:18)
    at HTMLTextAreaElement.eval (webpack:///./kendo-ui/js/kendo.core.js?:3104:32)
    at Function.jQuery.extend.each (webpack:///../Scripts/jquery.js?:374:23)
    at jQuery.fn.jQuery.each (webpack:///../Scripts/jquery.js?:139:17)
    at $.fn.(anonymous function) [as kendoEditor] (webpack:///./kendo-ui/js/kendo.core.js?:3103:26)
    at createIt (webpack:///./kendo-ui/js/kendo.angular.js?:192:31)
    at createWidget (webpack:///./kendo-ui/js/kendo.angular.js?:168:20)
    at link (webpack:///./kendo-ui/js/kendo.angular.js?:681:34)

occuring in kendo.editor.js.

iframe = $("<iframe />", { title: editor.options.messages.editAreaTitle, frameBorder: "0" })[0];

$(iframe)
    .css("display", "")
    .addClass("k-content")
    .insertBefore(textarea);


iframe.src = src;

wnd = iframe.contentWindow || iframe;
doc = wnd.document || iframe.contentDocument;

$(iframe).one("load", function() {
    editor.toolbar.decorateFrom(doc.body);
});

doc.open(); // throws TypeError: Cannot read property 'open' of null
doc.write(

Note there's no error and it works great when the kendo-editor is not inside the kendo-window.

Has anyone ever run into something like this and what's a solution / workaround?

Answer 1

The Kendo Editor instance should be called after the kendo Window has been opened, in other words after its container is in the DOM.

You should create the kendoEditor in the open event:

$("<div/>").kendoWindow({
  open: function(e){
    $("#myTextarea").kendoEditor();
  }
});