在CKEditor中可调整大小的jQuery UI [英] jQuery UI Resizable in CKEditor

问题描述

我正在尝试在CKEditor实例中使用jQuery UI Resizable.

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

我使用以下代码来设置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();
});

这似乎完成了一半.如果我检查CKEditor实例中的HTML，则div具有用于句柄等的所有jQuery UI Resizable标签，但是div似乎无法调整大小.

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.

有人知道为什么div不会调整大小吗?

Does anyone know why the div won't resize?

推荐答案

我不明白为什么jQuery UI可调整大小. CKEditor已经拥有自己的大小调整API:

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

• editor.resize()用于按需调整大小
• config.resize_enabled ，

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

也许您最好重新考虑您的目标.无论如何，如果您真的想使用jQuery UI，请考虑以下HTML:

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>

以及以下JavaScript:

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 );

编辑器将自动调整为您的#resizable容器.如果性能至关重要(使用旧浏览器)，请考虑使用停止事件.

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

玩得开心！

这篇关于在CKEditor中可调整大小的jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！