1

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 のサイズが変更されない理由を知っている人はいますか?

4

1 に答える 1

1

jQuery UI がサイズ変更可能である理由がわかりません。CKEditor にはすでに独自のサイズ変更 API があります。

おそらく、目標を再考したほうがよいでしょう。いずれにせよ、本当に 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エディターはコンテナーに合わせて自動的に調整されます。パフォーマンスが重要な場合 (古いブラウザー) は、代わりにstop イベントの使用を検討してください。

楽しむ！

于 2012-09-19T11:16:16.957 に答える