Resize the Editor by Dragging
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 resize the Kendo UI for jQuery Editor by dragging?
Solution
The following example demonstrates how to resize the Kendo UI Editor by dragging its bottom-right corner.
<style>
.editor-wrap {
position: relative;
}
.editor-wrap .k-overlay {
position: absolute;
opacity: 0;
z-index: 1;
}
.editor-wrap .k-resize-se {
position: absolute;
z-index: 2;
bottom: 6px;
right: 6px;
}
.editor-wrap > .k-editor {
height: 100%;
}
</style>
<div class="editor-wrap">
<textarea id="editor1" class="kendoEditor"></textarea>
</div>
<br /><br />
<div class="editor-wrap">
<textarea id="editor2" class="kendoEditor"></textarea>
</div>
<script>
// When you use server-side wrappers, the Editor initialization statements will be autogenerated.
$(function(){
$("#editor1").kendoEditor();
$("#editor2").kendoEditor();
});
</script>
<script>
// Custom code starts here.
// Wrap it in a document.ready handler.
// Otherwise, it will be executed before the Editors are created.
$(function(){
var wrappers = $(".editor-wrap");
wrappers.each(function(idx, element){
var wrapper = $(element);
// Add the resize handle.
var resizeHandle = $("<span class='k-icon k-resize-se' />").appendTo(wrapper);
resizeHandle.kendoDraggable({
dragstart: function(e) {
// Overlay the iframe to prevent an event gap.
wrapper.append("<div class='k-overlay' />");
// Cache some offsets for later use.
this.top = wrapper.offset().top - this.element.height();
this.left = wrapper.offset().left - this.element.width();
var win = $(window);
this.scrollTop = win.scrollTop();
this.scrollLeft = win.scrollLeft();
},
drag: function(e) {
// Update the wrapper height.
wrapper.children(".k-editor").height((e.clientY || e.originalEvent.clientY) - this.top + this.scrollTop);
wrapper.width((e.clientX || e.originalEvent.clientX) - this.left + this.scrollLeft);
},
dragend: function(e) {
// Remove the overlay.
wrapper.children(".k-overlay").remove();
}
});
});
});
</script>