Cannot resize images in TinyMCE , CKEditor or Telerik when working in Safari or Chrome? This may be what you need. Webkitresize it’s a jquery plugin that makes possible to resize images, tables and table cells in WebKit browsers like Chrome and Safari when working with HTML WYSIWYG editor controls like Telerik, CKEditor and TinyMCE. No changes to the editor are required. It should be working with other editors too however it was tested only with the ones specified.


Click here to download full jquery.webkitresize.js verion. 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.webkitresize.js”. It requires Jquery 1.7.1+ to work. Below is a sample usage of the plugin:

    /*simple initialization*/
    $("#editorIframe").webkitimageresize().webkittableresize().webkittdresize();

    /*initialization with callbacks configuration*/
    $("#editorIframe")
        .webkitimageresize(
        {
            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*/
            }            
        })
        .webkittableresize(
        {
            beforeElementSelect: function(tbl){
            },
            afterResize: function(tbl){
            },
            beforeResizeStart: function(tbl){
            },
            afterElementSelect: function(tbl){
            },
            afterRefresh: function(){
                /*Fires when resize elements are refreshed*/
            },
            afterReset: function(){
                /*Fires when resize elements are removed*/
            }            
        })
        .webkittdresize(
        {
            beforeElementSelect: function(td){
            },
            afterResize: function(td){
            },
            beforeResizeStart: function(td){
            },
            afterElementSelect: function(td){
            },
            afterRefresh: function(){
                /*Fires when resize elements are refreshed*/
            },
            afterReset: function(){
                /*Fires when resize elements are removed*/
            }            
        });

To keep image aspect ratio hold ctr key and click and drag to resize or set keepAspectRatio parameter ex: webkitimageresize({keepAspectRatio: true})