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.