web-dev-qa-db-ja.com

Wp_editorのカスタムインスタンスを操作するための、管理領域用のカスタムTinyMCEボタンの登録

この回答 のおかげで、私はそれぞれの異なるTinyMCEインスタンスがどのボタンを使うかを決定するためにwp_editorの異なるインスタンスを使うことができます。

しかし、私は実際に私のボタンを登録するのに苦労しています - それらは私が彼らがそうするべきであると思う方法で単にTinyMCEインターフェースに現れていません！

私は2つの異なる方法を試しました - 私のspecies-profilesプラグイン（私はTinyMCEインスタンスが機能することを望むspeciesと呼ばれるカスタム投稿タイプ）にコードを入れることと、私のテーマのfunctions.phpにコードを入れることです。

私が使っているコードは：

function add_SF_buttons() {
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
        return;
    if ( get_user_option('rich_editing') == 'true') {
        add_filter('mce_external_plugins', 'add_SF_buttons_plugins');
    }
}

function add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH/editor_plugin.js';
    $plugin_array['pH_min'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH_min/editor_plugin.js';
    $plugin_array['pH_max'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH_max/editor_plugin.js';
    return $plugin_array;
}

add_action( 'init', 'add_SF_buttons' );

前述の答えのようにwp_editorインスタンスを初期化するために私が使っているコードはこれです：

<?php
    wp_editor(
        $distribution,
        'distribution',
        array(
          'media_buttons' => false,
          'textarea_rows' => 8,
          'tabindex' => 4,
          'tinymce' => array(
            'theme_advanced_buttons1' => 'bold, italic, |, bullist, numlist, |, pH, pH_min',
            'theme_advanced_buttons2' => '',
            'theme_advanced_buttons3' => '',
            'theme_advanced_buttons4' => '',
          ),
        )
    );
?>

私が使用しようとしているプラ​​グインはすべて次のようになります。

(function() {
    tinymce.create('tinymce.plugins.pH', {
        init : function(ed, url) {
            ed.addButton('pH', {
                title : 'pH',
                image : url+'/pH.png',
                onclick : function() {
                    var caret = "caret_pos_holder";
                    var insert = '[pH]';
                    ed.execCommand('mceInsertContent', false, insert);
                    ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
                    ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
        getInfo : function() {
            /*
             * I intentionally left the information of
             * Brett Terpstra, as his code was the
             * foundation for this.
            */
            return {
                longname : "Brett's YouTube Shortcode",
                author : 'Brett Terpstra',
                authorurl : 'http://brettterpstra.com/',
                infourl : 'http://brettterpstra.com/',
                version : "1.0"
            };
        }
    });
    tinymce.PluginManager.add('pH', tinymce.plugins.pH);
})();

私が知っている限りでは、私が行ったことはすべて正しいですか。それでもカスタムボタンは表示されません。間違ったことをしているのではないかと思います。

How the TinyMCE interface appears

前もって感謝します、

tinymcewp-editorplugin-tinymce
2
dunc

Functions.phpにコードをコピーし、エディターを表示するためのシンプルな管理パネル（「Foo」）を追加しました。次に、現在のテーマ内にエディターボタンの新しいディレクトリを作成し、エディターボタンJSを関連ファイル/wp-content/themes/[my-theme-dir]/tinymce_buttons/pH/editor_plugin.jsに配置します。

結果：ダッシュボード> Foo（作成したパネル）に移動すると、期待どおりに機能しました。スクリーンショット：

Screenshot

コード：

/**
 * This function conditionally hooks the function that adds custom buttons to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons() {
    if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
        return;
    if ( get_user_option('rich_editing') == 'true') {
        add_filter('mce_external_plugins', 'wpse_48782_add_SF_buttons_plugins');
    }
}
add_action( 'init', 'wpse_48782_add_SF_buttons' );

/**
 * Adds the pH button to the TinyMCE init array
 */
function wpse_48782_add_SF_buttons_plugins($plugin_array) {
    $plugin_array['pH'] = get_bloginfo('template_directory') . '/tinymce_buttons/pH/editor_plugin.js';
    return $plugin_array;
}

/**
 * Load a dummy admin panel to display editor
 */
function wpse_48782_add_panel() {
    add_menu_page( 'Foo', 'foo', 'manage_options', 'foo', 'wpse_48782_render_panel' );
}
add_action( 'admin_menu', 'wpse_48782_add_panel' );

/**
 * Callback to render the 'Foo' admin panel'
 */
function wpse_48782_render_panel() {
    ?>

    <div class="wrap">

    <?php

    $distribution = 'abc';

    wp_editor(
        $distribution,
        'distribution',
        array(
          'media_buttons' => false,
          'textarea_rows' => 8,
          'tabindex' => 4,
          'tinymce' => array(
            'theme_advanced_buttons1' => 'bold, italic, |, bullist, numlist, |, pH, pH_min',
            'theme_advanced_buttons2' => '',
            'theme_advanced_buttons3' => '',
            'theme_advanced_buttons4' => '',
          ),
        )
    );

    ?>
    </div>
    <?php
}

ですから、基本的には正しいと思いますし、あなたが持っていないであなたが説明したことに関して私がやっていることとは違うことをしているに違いありません。いくつかの可能性：

  1. Editor_plugin.jsファイルを適切な場所に配置していません。上記のように、パスは[your-theme-dir]/tinymce_buttons/pH/editor_plugin.js（および-maxおよび-minバージョン）につながります。これらのファイルが存在し、上記で投稿したeditor_plugin jsが含まれていることを確認してください。ブラウザのJSコンソールを開くと、パスが正しいかどうかが一目でわかるはずです。そうでない場合は、「NetworkError」などが表示されます。

  2. プラグインの競合。非常に失礼なプラグイン/テーマmay'mce_external_plugins'をフィルタリングし、他のプラグインによって行われた変更を消去します（渡される$pluginsArrayとは関係のないinit配列を返すことによりフィルタ）。 'mce_external_plugins'のwp-contentディレクトリをGrepし、見つけたものを調べます。または、他のすべてのプラグインを無効にして、Twenty Elevenに切り替えてみてください。プラグインは、'tiny_mce_before_init'フィルターで愚かなことを行って設定を消去することもできます。これは、エディターがレンダリングされる前に最後に起動するものです-コンテンツディレクトリでもそれを探してください。

  3. コードをすべて間違った場所に配置しているため、WPによってロードされていません。テーマのfunctions.phpにそれを入れたと言っていることは知っていますが、確かですか？たぶん、あなたはそれを間違ったテーマまたはそのようなものに入れましたか？私たちは皆そのような日を持っています;）

  4. 最初の関数の冒頭には、現在のユーザーがedit_postsを編集できず、edit_pagesも実行できない場合、ボタンを表示しないという条件があります。これらの上限の少なくとも1つを持つユーザーを使用してテストを実行していることを確認してください。 （または、テストとしてこのチェックをすべてコメントアウトしてみてください。）

3
Boone Gorges

Booneのすばらしい答えのおかげで、私は正確な問題を見つけました。

何らかの理由で、wp_editorで設定されたページにteeny=trueのインスタンスがある場合、カスタムボタンはwp_editorのどのインスタンスでも使用できません。

teeny=true引数を削除すると、問題は解消されます。

1
dunc