在CKEditor中可调整大小的jQuery UI

Question

I am trying to get a within a CKEditor instance working with jQuery UI Resizable.

I use the following code to setup jQuery UI Resizable:

var ckinstance = CKEDITOR.instances.ckeditor-1;
ckinstance.on("instanceReady", function() {
    $(ckinstance.document.$).find(".gallery").resizable();
});

This seems to half work. If I inspect the HTML within the CKEditor instance the div has all the jQuery UI Resizable tags for handles etc but the div doesn't seem to be able to resize.

Does anyone know why the div won't resize?

Answer 1

I don't understand why jQuery UI Resizable. CKEditor already has own resizing API:

• editor.resize() for resizing on-demand
• config.resize_enabled , config.resize_maxHeight , config.resize_maxWidth and so on - to control resizing process

Perhaps you should better rethink your goal. Anyway, if you really want to use jQuery UI, consider this HTML:

<div id="resizable" style="overflow: hidden;">
    <textarea id="editor1">
        Initial content
    </textarea>
</div>

And the following JavaScript:

(function( $ ) {
    var editor = CKEDITOR.replace( 'editor1', {
        width: '100%',
        resize_enabled: false       // Disable native CKEditor resize.
    });

    $( "#resizable" ).resizable({
        resize: function( event, ui ) {
            editor.resize( '100%', ui.size.height - 2 );        // Play with this.
        }
    });
})( jQuery );

Editor will be automatically adjusted to your #resizable container. If the performance is crucial (old browsers), consider using the stop event instead.

Have fun!