web-dev-qa-db-ja.com

TinyMCEに複数のボタンを追加する方法

私はTinyMCEにカスタムボタンを追加する方法についてNettutsのチュートリアルを続けました（ http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/ ）

それは素晴らしいとすべての作品、しかし私は多くのボタンを追加したいと思いますそして私はすべてのコードを何度も何度も複製する必要なしにこれをする賢い方法があるかどうか疑問に思います。

これが私がボタンを追加するために使うコードです：

add_shortcode("quote", "quote");  
function quote( $atts, $content = null ) {  
    return '<div class="right text">"'.$content.'"</div>';  
}

add_action('init', 'add_button');  
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
}  
function register_button($buttons) {  
   array_Push($buttons, "quote");  
   return $buttons;  
}  
function add_plugin($plugin_array) {  
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';  
   return $plugin_array;  
}

そして、私はこのコードでcustomcodes.jsファイルを作成します。

(function() {  
    tinymce.create('tinymce.plugins.quote', {  
        init : function(ed, url) {  
            ed.addButton('quote', {  
                title : 'Add a Quote',  
                image : url+'/image.png',  
                onclick : function() {  
                     ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  

                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);  
})();

繰り返しますが、新しいボタンごとにこのコードをすべて実行しなくても、複数のボタンを追加する方法はありますか。

ありがとう:)セバスチャン

shortcodeeditortinymcebuttons
7
sebfck

最初にボタンコールバックの内側に追加のボタンを追加します。

function register_button($buttons) {  
   array_Push($buttons, "quote","wpse-rules");  
   return $buttons;  
}

その後、プラグインのJavaScriptの内側に追加のボタン機能を追加します。

    init : function(ed, url) {  
        ed.addButton('quote', {  
            title : 'Add a Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  
            }  
        });
        ed.addButton('wpse-rules', {  
            title : 'WPSE Rules',  
            image : url+'/image.png',  
            onclick : function() {  
                 alert( 'WPSE Rules!' ); 
            }  
        });  
    },

そして、あなたが望む追加のボタンについても同様です。

5
t31os

テキストエディタセクションにボタンを追加したい場合は、ワードプレスのQuickTagを見てください（ビジュアルエディタ部分では動作しません）。

0
Soykot

私の これに関するチュートリアル の中のファイルを読み、そして/またはダウンロードしてください。私がこれを提案する理由は、私がそれをすべてクラスに入れるので、あなたが実際にそれぞれのボタンのために何度も何度もコードを書く必要がないからです！

今、クラスは基本的にあなたが物事のWordPress側でそれをインスタンス化するたびにあなたのためのコードを書くが、あなたはまだ各ボタンのためのJavaScript機能を書く必要があるだろう。

ボタンの作成は、必要な数に関係なく同じプロセスです。各ボタンの機能はそれぞれ異なります。そのため、ボタンごとに固有のJavaScript呼び出しが必要です。

0
Neil Davidson