web-dev-qa-db-ja.com

TinyMCEエディタにリストボックスを追加するにはどうすればいいですか？

WordpressのTinyMCEエディタにリストボックスを追加できません。私はすでにこの質問を完全に読んできましたが、それは私をそこまでずっと連れて行ってくれませんでした： WordPress TinyMCEインスタンスに分割ボタンまたはリストボックスを追加する方法 。その解決策はダイアログボックスの値を警告するだけです。私は実際にTinyMCEエディタにショートコードを挿入したいのですが、その方法がわかりません。 TinyMCEエディタにカスタムボタンとリストボックスを追加することに成功しました。ボタンは機能しますが、リストボックスは機能しません。これが私のfunctions.phpコードです。

// add shortcode buttons to the tinyMCE editor row 3
function add_button_3() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin_3');
     add_filter('mce_buttons_3', 'register_button_3');
   }
}
//setup array of shortcode buttons to add
function register_button_3($buttons) {
   array_Push($buttons, "dropcap");
   array_Push($buttons, "divider");
   array_Push($buttons, "quote");
   array_Push($buttons, "pullquoteleft");
   array_Push($buttons, "pullquoteright");
   array_Push($buttons, "boxdark");
   array_Push($buttons, "boxlight");
   array_Push($buttons, "togglesimple");
   array_Push($buttons, "togglebox");
   array_Push($buttons, "tabs");
   array_Push($buttons, "signoff");  
   array_Push($buttons, "fancylist");
   array_Push($buttons, "arrowlist");
   array_Push($buttons, "checklist");
   array_Push($buttons, "starlist");
   array_Push($buttons, "pluslist");
   array_Push($buttons, "heartlist");
   array_Push($buttons, "infolist"); 
   array_Push($buttons, "columns");
   return $buttons;
}
//setup array for tinyMCE editor interface
function add_plugin_3($plugin_array) {
   $plugin_array['fancylist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['arrowlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['checklist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['starlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pluslist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['heartlist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['infolist'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['signoff'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['dropcap'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['divider'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteleft'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['pullquoteright'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxdark'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['boxlight'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglesimple'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['togglebox'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['tabs'] = get_bloginfo('template_url').'/js/customcodes.js';
   $plugin_array['columns'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}
add_action('init', 'add_button_3'); // add the add_button function to the page init

そして、TinyMCEエディタにリストボックスを追加するための私のJSです：

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

                // Add some values to the list box
                mlb.add('One Third', 'one_third');
                mlb.add('One Third (last)', 'one_third_last');
                mlb.add('Two Thirds', 'two_thirds');

            // Return the new listbox instance
            return mlb;

        }
        return null;
    }
});
tinymce.PluginManager.add('columns', tinymce.plugins.columns);

モーダルダイアログにリストボックスの値を表示するだけでなく、実際にショートコードをエディタに追加するためにJSで何を変更する必要がありますか

filterstinymcewysiwyg
2
Industrial Themes

私が書いたTinyMCEプラグインでは、私のリストボックスは選択したテキストをHTMLでラップしています。

onselect : function(v) {
    // Set focus to WordPress editor
    ed.focus(); 

    // Get selected text
    var sel_txt = ed.selection.getContent();

    // If no text selected
    if( '' == sel_txt )
        return null;

    var active_style = toggle_styles[v];
    if( 'undefined' == active_style || typeof( active_style ) != 'object' )
        return null;

    tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, '<'+active_style.tag+' class="'+active_style.classes+'">'+sel_txt+'</'+active_style.tag+'> ' );
    //alert( tinyMCE.activeEditor.selection.getNode().nodeName );
    return false;
} // close onselect function

私の関数がJS varからいくつかのデータを読み込んでいることに気付くかもしれませんが、それはあなた自身のスクリプトの中では利用できないでしょうが、これはあなたにとってうまくいくはずの基本的な縮小版です。

onselect : function(v) {
    // Set focus to WordPress editor
    ed.focus(); 

    // Get selected text
    var sel_txt = ed.selection.getContent();

    // If no text selected
    if( '' == sel_txt )
        return null;

    tinyMCE.activeEditor.execCommand( 'mceInsertContent', false, '<div class="someclass">'+sel_txt+'</div> ' );

    return false;
}

私がはっきりしていることを確かめるために、上記はあなたのコードの次の部分を置き換えるでしょう….

onselect : function(v) {
    tinyMCE.activeEditor.windowManager.alert('Value selected:' + v);
}

それが役立つことを願っています... :)

フォローアップ＃1

あなたがあなた自身のTinyMCEインスタンスを作成していて、WordPressインスタンスに追加するだけではない場合、おそらくed varは設定されないでしょう。

これを変更してください。

// Set focus to WordPress editor
ed.focus(); 

// Get selected text
var sel_txt = ed.selection.getContent();

のために（私の頭の上から）

var sel_txt = tinyMCE.activeEditor.selection.getContent();

それが役立つかどうかを確認してください。

1
t31os

私はこれに対する1つの短い解決策があると思います：

   var mlb = cm.createListBox('columns', {
                title : 'Add a Column',
                onselect : function(v) {
                    /* simpler right? */
                    tinyMCE.activeEditor.selection.setContent(v);
                }
  })
1
Jesse