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

Insert HTML Content in the Editor through Custom Popup Tools


Product Progress® Kendo UI® Editor for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I insert HTML content in the Kendo UI for jQuery Editor?


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, which 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 the following resources:

    <div id="example">
      <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
        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.



        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>' +

            var editor = this;

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

            // Create a modal Window from a new DOM element.
            var popupWindow = $(popupHtml)
                // Modality is recommended in this scenario.
                modal: true,
                width: 600,
                resizable: false,
                title: "Insert custom content",
                // Ensure the opening animation.
                visible: false,
                // Remove the Window from the DOM after closing animation is finished.
                deactivate: function(e){ e.sender.destroy(); }

            // Insert the new content in the Editor when the Insert button is clicked.
                var customHtml = popupWindow.element.find("textarea").val();
                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();

            tools: [
                    name: "custom",
                    tooltip: "Insert HTML content",
                    exec: onCustomToolClick



See Also

In this article