3

こんにちは、オーバーフロー者！

jQuery-UIモーダルダイアログボックス内にCKEditorインスタンスをロードするボタンを介してコンテンツのさまざまなブロックを編集できるようにするアプリケーションをPHPで作成しています。

これらのスクリーンショットに示すように、ダイアログを起動するボタンが機能しています。

編集ボタン

代替テキスト

この例は、ダイアログ内の「メイン コンテンツ」コンテンツを編集する準備ができていることを示しています。私が現在これを行っている方法は、単にデモ目的のためのハックです - 非表示の #dialog div にハードコードされた重複したコンテンツがあります。

私ができるようにしたいのは、「メインコンテンツの編集」ボタンが押されたときに、すべてのコンテンツ (HTML、スタイリングなど) が jQuery によって編集のために CKEditor インスタンスに渡されるようにすることです。ダイアログ内で [保存/送信] ボタンを押すと、変更が Ajax 経由で保存され、編集中のページに戻されます。

この質問の範囲外である WordPress Ajax API を使用する必要があるため、現時点では Ajax ビットについてはあまり心配していません。

ただし、主なことは、[メイン コンテンツの編集] ボタンがクリックされたときに、[メイン コンテンツ] div から #dialog にデータを渡し、編集されたデータを #ダイアログ ウィンドウから [メイン コンテンツ] に戻すことです。 「変更を保存」ボタンが押された後の div。

どんな助けでも大歓迎です！私は完全に立ち往生しています。

ありがとう！

~PF

4

1 に答える 1

2

html関数を探しているようです。

[メイン コンテンツの編集] ボタンがクリックされたときに、[メイン コンテンツ] div から #dialog にデータを渡すには:

$('#edit-main-content-button').click(function() {
    var content = $('#Main_Content').html();
    $('#dialog').html(content);
});

「変更を保存」ボタンを押した後、編集したデータを #dialog ウィンドウから「Main_Content」div に戻すには、次のようにします。

$('#dialog').dialog({
    /*
    your other settings/buttons
    */
    buttons: {
        'Save Changes': function() {
            // TODO: submit changes to server via ajax once its completed:
            var content = $(this).html();
            $('#Main_Content').html(content);
            $(this).dialog('close');
        }
    }
});
于 2010-04-19T16:42:11.590 に答える