Insert HTML Content in the Editor through Custom Popup Tools
Environment
| Product | Progress® Kendo UI® Editor for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I insert HTML content in the Kendo UI for jQuery Editor?
Solution
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:
- Configure Editor Tools
- Execute Editor Commands
- Editor Custom Tools Demo
- Configure a Window
- Obtain Widget's Element from Its Client Object
- Notes on Destroying Windows
<div id="example">
<textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
It provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows accessibility standards and provides API for content manipulation.
</p>
</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;
// 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 the 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>