Tinymce 中的简码下拉框在 WordPress 3.9 中不起作用？

Question

您好，由于新版本即将发布，我想我会下载它，看看我的主题是否仍然有效。

除了现在显示时间更长的下拉框之外，一切都很好。

这是我们在以前的版本中用来展示它的代码。

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 知之甚少 :(

谢谢

Answer 1

在 tinymce4 中 createControl 不再存在。

您必须创建一个按钮并将文本值对作为值分配给该按钮。 当你从下拉列表中选择一个元素时，使用 onSelect 函数来做一些事情。

这是一段示例代码：

var my_options = [];
my_options.push({text: "title1", value: "value1"});
my_options.push({text: "title2", value: "value2"});
my_options.push({text: "title3", value: "value3"});

ed.addButton('shortcodes', {
    type: 'listbox',
    text: 'my_own_decription',
    icon: false,
    tooltip: 'my_own_decription',
    fixedWidth: true,
    onselect: function(e)
    {
        var options = {paragraphs: 1, calldirect: 1};
        var text = this.text();
        var value = this.value();

        console.log("Text choosen:", text);
        console.log("Value choosen:", value);

        // get selection and range
        var selection = ed.selection;
        var rng = selection.getRng();
        ...

        ed.focus();
    },
    values: my_options,
    onPostRender: function() 
    {
        ed.my_control = this; // ui control element
    }
});

Answer 2

我遇到了同样的问题，正在网上搜索。我发现的最佳解决方案是this article。 它对我很有用。

(function() {
"use strict"; 

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

        init : function(ed, url) {

            ed.addButton( 'shortcodes', {
                type: 'listbox',
                text: 'My Shortcodes',
                icon: false,
                onselect: function(e) {
                }, 
                values: [

                    {text: 'H1 Title', onclick : function() {
                        tinymce.execCommand('mceInsertContent', false, '[h1][/h1]');
                    }},

                    {text: 'H2 Title', onclick : function() {

                        var selected2 = false;
                        var content2 = selected2 = tinyMCE.activeEditor.selection.getContent();
                        var h2titleclass = prompt("Would you like a custom class?", "");

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

                        if (selected2 !== '') {
                            content2 = '[h2'+h2titleclass+']' + selected2 + '[/h2]';
                        } else {
                            content2 = '[h2'+h2titleclass+'][/h2]';
                        }

                        tinymce.execCommand('mceInsertContent', false, content2);
                    }},

                ]

            });     

        },


    });

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