Edit this page

Insert HTML Content through Custom Popup Tools

The HTML markup in the Window resembles the HTML markup internally used by the Kendo UI widgets—for example, the popup editing of the Grid and the Editor dialogs.

However, this is not required as demonstrated in the following example. It shows how to use a custom Kendo UI Editor tool and a Kendo UI Window for inserting HTML content in the Editor.

For additional information about the code used in the example, refer to:

Example
    <div id="example">
      <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
        &lt;p&gt;
        Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt;
        It provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
        and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows
        accessibility standards and provides API for content manipulation.
        &lt;/p&gt;
      </textarea>
    </div>

    <script>

    $(function(){

        function onCustomToolClick (e) {
            var popupHtml =
                '<div class="k-editor-dialog k-popup-edit-form k-edit-form-container" style="width:auto;">' +
                  '<div style="padding: 0 1em;">' +
                    '<p><textarea cols="60" rows="10" style="width:90%"></textarea></p>' +
                  '</div>' +
                  '<div class="k-edit-buttons k-state-default">' +
                    '<button class="k-dialog-insert k-button k-primary">Insert</button>' +
                    '<button class="k-dialog-close k-button">Cancel</button>' +
                  '</div>' +
                '</div>';

            var editor = $(this).data("kendoEditor");

            // Store the editor range object
            // Needed for IE
            var storedRange = editor.getRange();

            // create a modal Window from a new DOM element
            var popupWindow = $(popupHtml)
            .appendTo(document.body)
            .kendoWindow({
                // modality is recommended in this scenario
                modal: true,
                width: 600,
                resizable: false,
                title: "Insert custom content",
                // ensure opening animation
                visible: false,
                // remove the Window from the DOM after closing animation is finished
                deactivate: function(e){ e.sender.destroy(); }
            }).data("kendoWindow")
            .center().open();

            // insert the new content in the Editor when the Insert button is clicked
            popupWindow.element.find(".k-dialog-insert").click(function(){
                var customHtml = popupWindow.element.find("textarea").val();
                editor.selectRange(storedRange);
                editor.exec("inserthtml", { value: customHtml });
            });

            // close the Window when any button is clicked
            popupWindow.element.find(".k-edit-buttons button").click(function(){
                // detach custom event handlers to prevent memory leaks
                popupWindow.element.find(".k-edit-buttons button").off();
                popupWindow.close();
            });
        }

        $("#editor").kendoEditor({
            tools: [
                {
                    name: "custom",
                    tooltip: "Insert HTML content",
                    exec: onCustomToolClick
                }
            ]
        });

    });

    </script>

See Also

For more runnable examples on the Kendo UI Editor, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy