Missing Content when Drag Dropping Kendo Editor

Environment

Product

Progress® Kendo UI® Editor for jQuery

Description

Editor within Sortable loses it's content when dragged.

Solution

Because of the embedded <iframe> when changing the position of the Editor widget in the DOM, the widget will need its refresh() method to be called to properly display its content again. Here you could find a small sample demonstrating that.

    <ul id="sortable">
        <li>Editor <textarea id="editor1" rows="10" cols="30">Editor content</textarea></li>
        <li>Textarea <textarea id="editor2" rows="10" cols="30"></textarea></li>
        <li>DropDownList <input id="ddl"/></li>
        <li>iframe <span id="test"></span></li>
    </ul>

    <script>
        $("#sortable").kendoSortable({
            ignore: "table, textarea, input",
            change: function(e) {
                var editor = $("#editor1").getKendoEditor();

                if (!!editor) {
                    editor.refresh();
                }
            }
        });

        $("#editor1").kendoEditor()

        $("#ddl").kendoDropDownList({
            dataSource: ["A", "B"]
        })

        var iframe = document.createElement('iframe');
        document.getElementById('test').appendChild(iframe);
        iframe.contentWindow.document.write('<div>foo</div>');
    </script>

See Also

• API Reference of the Editor