自定义短代码无法在WordPress 3.9 TinyMCE 4可视编辑器中使用

时间:2014-05-06 17:17:08

标签: wordpress tinymce shortcode

我有一个下拉列表,显示我在tinymce编辑器中的所有自定义短代码。以下是我的函数文件中的代码:

function register_customcode_dropdown( $buttons ) {
   array_push( $buttons, "Shortcodes" );
   return $buttons;
}

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

function customcode_dropdown() {

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

}

add_action('init', 'customcode_dropdown');

升级到3.9后,不再显示下拉列表。我需要对代码进行哪些更改才能使其重新运行? (下面是我的javascript文件代码)

(function() {


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

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

            if(n=='Shortcodes'){
                var mlb = cm.createListBox('Shortcodes', {
                     title : 'Kleen Shortcodes',
                     onselect : function(v) {




                        if(v == 'Tabs Wrapper'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[tabs_wrap]'+selected+'[/tabs_wrap]';
                            }else{
                                content =  '[tabs_wrap][/tabs_wrap]';
                            }

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

                        }



                        if(v == 'Tab Content'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[tab_content title=""]'+selected+'[/tab_content]';
                            }else{
                                content =  '[tab_content title=""][/tab_content]';
                            }

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

                        }


                        if(v == 'Accordion Wrapper'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[accordion_wrap]'+selected+'[/accordion_wrap]';
                            }else{
                                content =  '[accordion_wrap][/accordion_wrap]';
                            }

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

                        }



                        if(v == 'Accordion Content'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[accordion_content title=""]'+selected+'[/accordion_content]';
                            }else{
                                content =  '[accordion_content title=""][/accordion_content]';
                            }

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

                        }

                        if(v == 'Button Link'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[button_link]'+selected+'[/button_link]';
                            }else{
                                content =  '[button_link][/button_link]';
                            }

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

                        }


                        if(v == 'Column 1/2'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half]'+selected+'[/one_half]';
                            }else{
                                content =  '[one_half][/one_half]';
                            }

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

                        }

                        if(v == 'Column 1/2 Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half_last]'+selected+'[/one_half_last]';
                            }else{
                                content =  '[one_half_last][/one_half_last]';
                            }

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

                        }

                        if(v == 'Column 1/3'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third]'+selected+'[/one_third]';
                            }else{
                                content =  '[one_third][/one_third]';
                            }

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

                        }

                        if(v == 'Column 1/3 Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third_last]'+selected+'[/one_third_last]';
                            }else{
                                content =  '[one_third_last][/one_third_last]';
                            }

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

                        }


                        if(v == 'Column 1/4'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth]'+selected+'[/one_fourth]';
                            }else{
                                content =  '[one_fourth][/one_fourth]';
                            }

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

                        }

                        if(v == 'Column 1/4 Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth_last]'+selected+'[/one_fourth_last]';
                            }else{
                                content =  '[one_fourth_last][/one_fourth_last]';
                            }

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

                        }



                        if(v == 'Column 1/2 Center'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half_center]'+selected+'[/one_half_center]';
                            }else{
                                content =  '[one_half_center][/one_half_center]';
                            }

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

                        }

                        if(v == 'Column 1/2 Center Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_half_center_last]'+selected+'[/one_half_center_last]';
                            }else{
                                content =  '[one_half_center_last][/one_half_center_last]';
                            }

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

                        }

                        if(v == 'Column 1/3 Center'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third_center]'+selected+'[/one_third_center]';
                            }else{
                                content =  '[one_third_center][/one_third_center]';
                            }

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

                        }

                        if(v == 'Column 1/3 Center Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_third_center_last]'+selected+'[/one_third_center_last]';
                            }else{
                                content =  '[one_third_center_last][/one_third_center_last]';
                            }

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

                        }


                        if(v == 'Column 1/4 Center'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth_center]'+selected+'[/one_fourth_center]';
                            }else{
                                content =  '[one_fourth_center][/one_fourth_center]';
                            }

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

                        }

                        if(v == 'Column 1/4 Center Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[one_fourth_center_last]'+selected+'[/one_fourth_center_last]';
                            }else{
                                content =  '[one_fourth_center_last][/one_fourth_center_last]';
                            }

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

                        }



                        if(v == 'Column 3/4'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[three_fourth]'+selected+'[/three_fourth]';
                            }else{
                                content =  '[three_fourth][/three_fourth]';
                            }

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

                        }

                        if(v == 'Column 3/4 Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[three_fourth_last]'+selected+'[/three_fourth_last]';
                            }else{
                                content =  '[three_fourth_last][/three_fourth_last]';
                            }

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

                        }

                                    if(v == 'Column 2/3'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[two_third]'+selected+'[/two_third]';
                            }else{
                                content =  '[two_third][/two_third]';
                            }

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

                        }

                        if(v == 'Column 2/3 Last'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[two_third_last]'+selected+'[/two_third_last]';
                            }else{
                                content =  '[two_third_last][/two_third_last]';
                            }

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

                        }

                        if(v == 'Highlight Text'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[highlight]'+selected+'[/highlight]';
                            }else{
                                content =  '[highlight][/highlight]';
                            }

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

                        }

                        if(v == 'Blockquote'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[blockquote]'+selected+'[/blockquote]';
                            }else{
                                content =  '[blockquote][/blockquote]';
                            }

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

                        }



                                    if(v == 'Recent Post'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[post_recent posts="2"]';
                            }else{
                                content =  '[post_recent posts="2"]';
                            }

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

                        }


                                    if(v == 'Recent Sermons'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[recent_sermons posts="2"]';
                            }else{
                                content =  '[recent_sermons posts="2"]';
                            }

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

                        }


                                    if(v == 'Staff List'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[staff_category posts="4" staff_category=""]';
                            }else{
                                content =  '[staff_category posts="4" staff_category=""]';
                            }

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

                        }



                        if(v == 'Check List'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[check_list]'+selected+'[/check_list]';
                            }else{
                                content =  '[check_list][/check_list]';
                            }

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

                        }

                                    if(v == 'Times List'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[times_list]'+selected+'[/times_list]';
                            }else{
                                content =  '[times_list][/times_list]';
                            }

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

                        }

                                    if(v == 'Arrow List'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[arrow_list]'+selected+'[/arrow_list]';
                            }else{
                                content =  '[arrow_list][/arrow_list]';
                            }

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

                        }

                                                if(v == 'Horizontal Rule Center'){

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

                            if( selected ){
                                //If text is selected when button is clicked
                                //Wrap shortcode around it.
                                content =  '[horizontal_rule_center]'+selected+'[/horizontal_rule_center]';
                            }else{
                                content =  '[horizontal_rule_center][/horizontal_rule_center]';
                            }

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

                        }






                     }
                });


                // Add some menu items
                var my_shortcodes = ['Accordion Content','Accordion Wrapper','Arrow List','Blockquote','Button Link','Check List','Column 1/4 Last','Column 1/4','Column 1/2 Last','Column 1/2','Column 1/3 Last','Column 1/3','Column 3/4 Last','Column 3/4','Column 2/3 Last','Column 2/3','Column 1/2 Center','Column 1/2 Center Last','Column 1/3 Center','Column 1/3 Center Last','Column 1/4 Center','Column 1/4 Center Last','Highlight Text','Horizontal Rule Center','Recent Post','Recent Sermons','Staff List','Tab Content','Tabs Wrapper','Times List'];

                for(var i in my_shortcodes)
                    mlb.add(my_shortcodes[i],my_shortcodes[i]);

                return mlb;
            }
            return null;
        }


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

2 个答案:

答案 0 :(得分:0)

使用tinymce4时,需要处理的事情与tinymce3不同。 createControl不再存在。您必须修改插件代码才能使用tinymce4(参见migration guide from tinymce3.x)。

以下是自定义下拉按钮选择样式的示例。

        ed.addButton('xstyle', {
            type: 'listbox',
            text: 'my_text',
            icon: false,
            tooltip: 'my_tooltip_text',
            fixedWidth: true,
            onselect: function(e)
            {
                var options = {paragraphs: 1, calldirect: 1};
                var format_to_apply = this.text();
                                    ...
                ed.focus();
            },
            values: xstyle_options, // array
            onPostRender: function() 
            {
                ed.my_style_control = this;
            }
        });

答案 1 :(得分:0)

我找到了一个帮助我在编辑器中添加短代码按钮的插件。我昨天安装了它,非常好。您必须创建一个包含短代码信息的文件,其余部分由插件完成:

http://wordpress.org/plugins/wp-shortcode-helper/

安装插件,激活它并在模板文件夹中创建一个文件“shortcodes.json”。在那里你可以保存插件所需的一切。请参阅示例代码:

[{
    "text": "Button",
    "value": "btn",
    "content": true,
    "description": true,
    "description_text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
    "options": [
        {
            "type": "textbox",
            "name": "href",
            "label": "URL"
        },
        {
            "type": "select",
            "name": "blank",
            "label": "New Tab",
            "options": [
                {
                    "text": "No",
                    "value": "no"
                },
                {
                    "text": "Yes",
                    "value": "yes"
                }
            ]
        }
    ]
},

{
    "text": "1/2 Column",
    "value": "one_half",
    "content": true,
    "description": true,
    "description_text": "Creates a 1/2 column",
    "options": [
        {
            "type": "select",
            "name": "position",
            "label": "Position",
            "options": [
                {
                    "text": "First",
                    "value": "first"
                },
                {
                    "text": "Last",
                    "value": "last"
                }
            ]
        }
    ]
},

{
    "text": "1/3 Column",
    "value": "one_third",
    "content": true,
    "description": true,
    "description_text": "Creates a 1/3-Column",
    "options": [
        {
            "type": "select",
            "name": "position",
            "label": "Position",
            "options": [
                {
                    "text": "First",
                    "value": "first"
                },
                {
                    "text": "Last",
                    "value": "last"
                }
            ]
        }
    ]
},

{
    "text": "2/3 Column",
    "value": "two_third",
    "content": true,
    "description": true,
    "description_text": "Creates a 2/3-Column",
    "options": [
        {
            "type": "select",
            "name": "position",
            "label": "Position",
            "options": [
                {
                    "text": "First",
                    "value": "first"
                },
                {
                    "text": "Last",
                    "value": "last"
                }
            ]
        }
    ]
},

{
    "text": "Tabwrapper",
    "value": "tabwrapper",
    "description": true,
    "content": true,
    "description_text": "Creates a Wrapper for Tabs"
},

{
    "text": "Tab",
    "value": "tab",
    "content": true,
    "description": true,
    "description_text": "Creates a Tab",
    "options": [
        {
            "type": "select",
            "name": "active",
            "label": "Active",
            "options": [
                {
                    "text": "Yes",
                    "value": "yes"
                },
                {
                    "text": "No",
                    "value": "no"
                }
            ]
        },
        {
            "type": "textbox",
            "name": "title",
            "label": "Title"
        }
    ]
}]

如您所见,现在有6个短代码。显然你必须根据自己的需要进行编辑。