web-dev-qa-db-ja.com

Wp_editorをカスタムウィジェットで使用できないのはなぜですか？

私はあなたがwysiwygエディタでコンテンツを編集することを可能にするウィジェットを追加するプラグインの開発に取り組んでいます。 wp_editor()を呼び出して、デフォルトのワードプレスエディタを使いたいのです。私は人々があなたがこれをすることができないと言うのを見ました、そして、確かに、あなたがウィジェットコンテンツを更新しようとするとそれはクラッシュします。

wp_editor()がウィジェットで使用できない理由を誰かが説明できますか？

それがうまくいかない理由がわかったら、どうやってそれを回避するかを考え出したいと思います。しかし、Chromeはコンソールにエラーを表示しないので、何が起こっているのかわからない。

ありがとう、goldentoa11

widgetswp-editor
3
Goldentoa11

短い答え：TinyMCEが最初に現れる隠れたウィジェットがあるからです。

長い答え（すみません、非常に長い答え）：

Codexに行き、例のウィジェットFoo_Widget をコピーして、同じコードについて話していることを確認します。それではあなたのIDE（エディタではない）を開いて、プラグインとして短いテストウィジェットを書いてください。最小限のプラグインヘッダから始めて...

<?php
/*
Plugin Name: Widget Test Plugin
Description: Testing plugincode
*/

...コーデックスからウィジェットコードを追加し、add_action()呼び出しでウィジェットを登録します。次に示すように、ウィジェットクラス内のformメソッドを変更します。

public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
        $title = $instance[ 'title' ];
    }
    else {
        $title = __( 'New title', 'text_domain' );
    }
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    </p>
    <?php

/*** add this code ***/
    $content   = 'Hello World!';
    $editor_id = 'widget_editor';

    $settings = array(
        'media_buttons' => false,
        'textarea_rows' => 3,
        'teeny'         => true,
    );

    wp_editor( $content, $editor_id, $settings );
/*** end editing ***/
}

ブログに移動し、プラグインをアクティブにし、ウィジェットページに移動してFoo Widgetをサイドバーにドラッグします。あなたはそれが失敗するのを見るでしょう。

左側にFoo Widgetの説明がありますか？説明を右クリックして、開発者ツールから[検査]を選択します（FireBugやChrome DevToolsなどの開発者ツールがいくつかありますか？FireFoxでは、[要素の検査]でビルドも選択できます）。 HTMLコードを閲覧すると、 'hidden'ウィジェットの内側にエディタの折り返しがあることがわかります。 wp_editor in the hidden widget

右側のサイドバーに1人のエディタが表示され、左側の「非表示」ウィジェットに1人のエディタが表示されます。 TinyMCEはどのエディタを使用すべきかわからないため、これは正しく機能しません。

私たちは何が必要なのか？

エディタにはunique IDが必要です。

/*** add this code ***/
    $Rand    = Rand( 0, 999 );
    $ed_id   = $this->get_field_id( 'wp_editor_' . $Rand );
    $ed_name = $this->get_field_name( 'wp_editor_' . $Rand );

    $content   = 'Hello World!';
    $editor_id = $ed_id;

      $settings = array(
      'media_buttons' => false,
      'textarea_rows' => 3,
      'textarea_name' => $ed_name,
      'teeny'         => true,
    );

    wp_editor( $content, $editor_id, $settings );
/*** end edit ***/

上記のコードを使用して、formメソッド内のコードをもう一度変更します。 Rand()で一意の番号を作成し、この番号をidおよびname属性に追加します。しかし、やめて、値の保存はどうでしょうか。

updateメソッドに行き、最初の行にdie(var_dump($new_instance));を追加します。ウィジェット上でSaveを押すと、スクリプトは終了し、送信された値を表示します。 wp_editor_528のような値があるのがわかります。ページをリロードしてウィジェットをもう一度保存すると、番号は乱数であるため別のものに変更されます。

どの乱数がウィジェットに設定されているのか、どうすればわかりますか？ウィジェットデータと一緒に乱数を送信するだけです。これをformメソッドに追加します

printf(
  '<input type="hidden" id="%s" name="%s" value="%d" />',
  $this->get_field_id( 'the_random_number' ),
  $this->get_field_name( 'the_random_number' ),
  $Rand
);

更新ルーチンで、$new_instance['the_random_number'];を使って乱数にアクセスできるようになりました。そのため、次のようにしてエディタのコンテンツにアクセスできます。

$Rand = (int) $new_instance['the_random_number'];
$editor_content = $new_instance[ 'wp_editor_' . $Rand ];
die(var_dump($editor_content));

ご覧のとおり、エディタのコンテンツが送信され、保存したり、それ以外のことを行うことができます。

警告

エディタのコンテンツは、TinyMCEがビジュアルモード（WYSIWYGモード）でnotの場合にのみ正しく送信されます。 「保存」を押す前にテキストモードに切り替える必要があります。それ以外の場合は、事前定義されたコンテンツ（この場合は$content = 'Hello World!';）が送信されます。理由はわかりませんが、これには簡単な回避策があります。

ウィジェットのコンテンツを保存する前に「テキスト」タブをクリックする小さなjQueryスクリプトを書きます。

JavaScript（あなたのテーマ/プラグインフォルダのどこかにwidget_script.jsとして保存されています）：

jQuery(document).ready(
    function($) {
        $( '.widget-control-save' ).click(
            function() {
                // grab the ID of the save button
                var saveID   = $( this ).attr( 'id' );

                // grab the 'global' ID
                var ID       = saveID.replace( /-savewidget/, '' );

                // create the ID for the random-number-input with global ID and input-ID
                var numberID = ID + '-the_random_number';

                // grab the value from input field
                var randNum  = $( '#'+numberID ).val();

                // create the ID for the text tab
                var textTab  = ID + '-wp_editor_' + randNum + '-html';

                // trigger a click
                $( '#'+textTab ).trigger( 'click' );

            }
        );
    }
);

そしてそれをエンキューする

function widget_script(){

    global $pagenow;

    if ( 'widgets.php' === $pagenow )
        wp_enqueue_script( 'widget-script', plugins_url( 'widget_script.js', __FILE__ ), array( 'jquery' ), false, true );

}

add_action( 'admin_init', 'widget_script' );

それでおしまい。簡単ですね。 ;）

10
Ralf912

ウィジェットでtinyMCEを達成することはかなり可能です。実际 それはすでに行われています 。単にwp_editor()を呼び出すことがウィジェットフォームで機能しない理由は、フォームマークアップがAJAXを使って非同期的に配信されるからです。 ここで検索 詳細については/を試してください。

1
Zlatev

wp_editor（）がウィジェットの内部で動作していない理由を正確に答えてはいけませんが、ウィジェットにはいくつかの制限があります。

しかし、wp_editorはWordPressのバックエンドでビジュアルエディタを使用する多くの可能性のうちの1つにすぎません。どういうわけかjQueryを使ってビジュアルエディタを初期化してみてください。私はあなたがウィジェットウィンドウ自体の中でそれをすることができるとは思わないが、ライトボックスかそのような何かが役に立つかもしれません。

これを行う方法は次のとおりです。

/**
 * Add TinyMCE to multiple Textareas (usually in backend).
 */
//  add_action('admin_print_footer_scripts','my_admin_print_footer_scripts',99);
function my_admin_print_footer_scripts() {
    ?><script type="text/javascript">/* <![CDATA[ */
        jQuery(function($)
        {
            var i=1;
            $('.customEditor textarea').each(function(e)
            {
                var id = $(this).attr('id');

                if (!id)
                {
                    id = 'customEditor-' + i++;
                    $(this).attr('id',id);
                }

                tinyMCE.execCommand('mceAddControl', false, id);

            });
        });
    /* ]]> */</script><?php
}
1
Blackbam