javascript - CKEditor 中的 jQuery UI 可调整大小

Question

我正在尝试在使用 jQuery UI Resizable 的 CKEditor 实例中获取一个。

我使用以下代码来设置 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 似乎无法调整大小。

有谁知道为什么 div 不会调整大小？

Answer 1

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

• editor.resize()用于按需调整大小
• config.resize_enabled , config.resize_maxHeight , config.resize_maxWidth等等 - 控制调整大小的过程

也许你应该更好地重新考虑你的目标。无论如何，如果您真的想使用 jQuery UI，请考虑以下 HTML：

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

以及以下 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容器。如果性能至关重要（旧浏览器），请考虑改用停止事件。

玩得开心！