web-dev-qa-db-ja.com

WordPress TinyMCEインスタンスに分割ボタンまたはリストボックスを追加する方法

私は自分のショートコードを挿入するためにカスタムボタンをTinymceに追加しましたが、私はたくさん持っているので、代わりに分割ボタンを作りたいのですが、どうやって理解できないのでしょう。誰でも手伝うことができます。これが私がノーマルボタンを作成するのに使ったコードです：

functions.phpで：

/**
Hook into WordPress
*/

add_action('init', 'onehalf_button');  
/**
Create Our Initialization Function
*/

function onehalf_button() {

   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_plugin' );
     add_filter( 'mce_buttons', 'register_button' );
   }

}
/**
Register Button
*/

function register_button( $buttons ) {
 array_Push( $buttons, "|", "onehalf" );
 return $buttons;
}
/**
Register TinyMCE Plugin
*/

function add_plugin( $plugin_array ) {
   $plugin_array['onehalf'] = get_bloginfo( 'template_url' ) . '/js/tinymce_buttons.js';
   return $plugin_array;
}

そしてカスタムプラグインで.js

// JavaScript Document
(function() {
    tinymce.create('tinymce.plugins.onehalf', {
        init : function(ed, url) {
            ed.addButton('onehalf', {
                title : 'One Half Column',
                image : url+'/mylink.png',
                onclick : function() {
                     ed.selection.setContent('[one_half]' + ed.selection.getContent() + '[/one_half]');

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

私はここで何か見つけました http://tinymce.moxiecode.com/tryit/listbox_splitbutton.php しかしWPにそれを実装する方法を理解することはできません。

誰でも手伝える？ありがとう。

tinymcebuttonssplitplugin-tinymce
5
Gina Alessia

それはかなり単純明快であるべきです、あなたがリンクしているページからあなたの既存のTinyMCEプラグインに関連するコードの一部をコピーして、いくつかの文字列を更新してください... ..終わった！.

あなたのTinyMCEプラグインJSのためにこれで始めて、あなたがどうやって上達するか見てください..

// JavaScript Document
(function() {
    // Creates a new plugin class and a custom listbox
    tinymce.create('tinymce.plugins.onehalf', {
        createControl: function(n, cm) {
            switch (n) {
                case 'onehalf':
                    var mlb = cm.createListBox('onehalf', {
                        title : 'My list box',
                        onselect : function(v) {
                            tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
                        }
                    });

                    // Add some values to the list box
                    mlb.add('Some item 1', 'val1');
                    mlb.add('some item 2', 'val2');
                    mlb.add('some item 3', 'val3');

                // Return the new listbox instance
                return mlb;

                /*
                case 'onehalf':
                var c = cm.createSplitButton('onehalf', {
                    title : 'My split button',
                    image : 'img/example.gif',
                    onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
                    }
                });

                c.onRenderMenu.add(function(c, m) {
                    m.add({title : 'Some title', 'class' : 'mceMenuItemTitle'}).setDisabled(1);

                    m.add({title : 'Some item 1', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Some  item 1 was clicked.');
                    }});

                    m.add({title : 'Some item 2', onclick : function() {
                        tinyMCE.activeEditor.windowManager.alert('Some  item 2 was clicked.');
                    }});
                });

                // Return the new splitbutton instance
                return c;
                */
            }
            return null;
        }
    });
    tinymce.PluginManager.add('onehalf', tinymce.plugins.onehalf);
})();

うまくいかない場合は、できるだけ多くの情報を送ってください。何をしようとしたのか、何が起こったのか、何が起こったのか、何ができなかったのか…など.

4
t31os

t31os答えは素晴らしいです。ちょっとしたメモ：画像へのパスを取得するには

init : function(ed, url) {
    theurl = url;
},

createControl: function...の直前にそれを使用することができます

var c = cm.createSplitButton('onehalf', {
    title : 'My split button',
    image : theurl + '/theicon.png',
    onclick : function() {
           tinyMCE.activeEditor.windowManager.alert('Button was clicked.');
    }
});

あなたのアイコンがTinyMCEプラグインのJavaScriptの隣にあると仮定します。

4
Elliot