Resize the Editor by Dragging
The following example demonstrates how to resize the Kendo UI Editor by dragging its bottom-right corner.
Example
<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 using server-side wrappers, the Editor initialization statements will be autogenerated.
$(function(){
$("#editor1").kendoEditor();
$("#editor2").kendoEditor();
});
</script>
<script>
// Custom code starts here. Wrapping it in a document.ready handler is required, otherwise it will be executed before the Editors are created.
$(function(){
var wrappers = $(".editor-wrap");
wrappers.each(function(idx, element){
var wrapper = $(element);
// add resize handle
var resizeHandle = $("<span class='k-icon k-resize-se' />").appendTo(wrapper);
resizeHandle.kendoDraggable({
dragstart: function(e) {
// overlay iframe to prevent 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 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 overlay
wrapper.children(".k-overlay").remove();
}
});
});
});
</script>
See Also
- Editor JavaScript API Reference
- How to Get Reference to Child Widgets
- How to Insert HTML Content via Custom Popup Tools
- How to Set Caret Position
- How to Show Editor in Full Screen
- How to Use Inline Editor inside Windows
For more runnable examples on the Kendo UI Editor, browse its How To documentation folder.