web-dev-qa-db-ja.com

Tinymceのショートコードドロップダウンボックスは、WordPress 3.9では機能しません。

こんにちは、新しいバージョンがリリースされようとしているので、私はそれをダウンロードして私のテーマがまだ機能するかどうかを確認したいと思った。

現在表示されているドロップダウンボックスとは別に、すべてがうまく機能しています。

これが以前のバージョンで表示するために使用したコードです。

PHPコード:

function register_ppp_shortcodes( $buttons ) {
   array_unshift( $buttons, "Shortcodes" );
   return $buttons;
}

function add_ppp_shortcodes( $plugin_array ) {
   $plugin_array['Shortcodes'] = get_template_directory_uri() . '/js/Shortcodes_js.js';
   return $plugin_array;
}

function ppp_shortcodes() {

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

}

add_action('init', 'ppp_shortcodes');

JSコード:

/*global tinyMCE, tinymce*/
/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, devel:true, maxerr:50 */
(function() {
"use strict";   

    tinymce.create('tinymce.plugins.Shortcodes', {

        init : function(ed, url) {
          ed = ed;
            url = url;
        },
        createControl : function(n, cm) {

            if(n==='Shortcodes'){
                var mtb = cm.createListBox('Shortcodes', {
                     title : 'Shortcodes',
                     onselect : function(p) {
                        var selected = false;
                        var content = '';
                        switch (p){

                        case 'H1 Title':{

                            var h1titleclass = Prompt("Would you like a custom class?", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if(h1titleclass != ''){
                                h1titleclass = 'class= "'+h1titleclass+'"';
                            }

                            if (selected) {
                                content = '[h1'+h1titleclass+']' + selected + '[/h1]';
                            } else {
                                content = '[h1'+h1titleclass+'][/h1]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // finished shortcode
                        break;

                        case 'H2 Title':{

                            var h2titleclass = Prompt("Would you like a custom class?", "");

                            selected = tinyMCE.activeEditor.selection.getContent();

                            if(h2titleclass != ''){
                                h2titleclass = 'class= "'+h2titleclass+'"';
                            }

                            if (selected) {
                                content = '[h2'+h2titleclass+']' + selected + '[/h2]';
                            } else {
                                content = '[h2'+h2titleclass+'][/h2]';
                            }

                            tinymce.execCommand('mceInsertContent', false, content);

                        } // finished shortcode
                        break;

                        }   
                     }
                });


                // Add some menu items
                var my_shortcodes = ['H1 Title','H2 Title'];

                for(var i in my_shortcodes){
                  if (true) {mtb.add(my_shortcodes[i],my_shortcodes[i]);}
                }

                return mtb;
            }
            return null;
        }


    });
    tinymce.PluginManager.add('Shortcodes', tinymce.plugins.Shortcodes);
})();

どこから始めようと正しい方向に私を向けることはできますか。

あなたが言うことができるように私はTinymceについてほとんど知らない:(

ありがとう

1
Robert

私は似たような問題を抱えています。 (ボタンがMceエディタのツールバーに表示されない)。このパターンはWP 3.9/tinymce 4.0で私のために働きました:

tinymce.PluginManager.add( 'thing' , function( editor ){
    editor.addButton('thing', {
        type: 'listbox',
        text: 'My listbox',
        onselect: function(e) {
            // do things...
        },
        values: [
            {text: 'Menu item 1', value: 'Some text 1'},
            {text: 'Menu item 2', value: 'Some text 2'}
        ]
    });
});

残念ながら、これは後方互換性がないため、3.8のサポートを中断するか、またはバージョンスニッフィングを実装する必要があります。

2
Jörn Lund