This jquery plugin adds drag and resize feature to editable iframes or WYSIWYG editors like TinyMCE , CKEditor or Telerik. The plugin was tested in IE(7,8,9), Firefox, Safari and Chrome.


Click here to download full jquery.wysiwyg-resize.js version. The plugin can be used under GPLv3 or commercial licenses. Please check license information. For jquery 1.9+ version please make sure you include jquery.mb.browser.min.js right after the place where jquery is included. This is adding back removed $.browser property.

The plugin consists from one javascript file: “jquery.wysiwyg-resize.js”. It requires Jquery 1.7.1+ to work. Below is a sample usage of the plugin:

    /*1. simple initialization*/
    $("#editorIframe").wysiwygResize({selector: "div, td, h1, h3"});

    /*2. initialization with callbacks configuration*/
    $("#editorIframe")
        .wysiwygResize(
        {
            /*simple jquery selector*/
            selector: "div, td, h1, h3",
            beforeElementSelect: function(img){
            },
            afterResize: function(img){
            },
            beforeResizeStart: function(img){
            },
            afterElementSelect: function(img){
            },
            afterRefresh: function(){
                /*Fires when resize elements are refreshed*/
            },
            afterReset: function(){
                /*Fires when resize elements are removed*/
            }            
        });

    /*3. initialization with webkitresize plugin*/
    if ($.browser.webkit) {
        //make sure if it's a webkit browser you don't include the td element into the wysiwygResize selector option.
        $("#simpleIFrame").wysiwygResize({
            selector: "div, h1, h3"
        }).webkitimageresize().webkittableresize().webkittdresize();
    }
    else {
        $("#simpleIFrame").wysiwygResize({
            selector: "div, td, h1, h3",
        });
    }