0

I'm using the following to trim the TinyMCE editor

// Restrict buttons on the rich text editor
function formatTinyMCE($in)
{
    $in['remove_linebreaks']            = false;
    $in['gecko_spellcheck']             = false;
    $in['keep_styles']                  = true;
    $in['accessibility_focus']          = true;
    $in['tabfocus_elements']            = 'major-publishing-actions';
    $in['media_strict']                 = true;
    $in['paste_remove_styles']          = true;
    $in['paste_remove_spans']           = true;
    $in['paste_strip_class_attributes'] = 'none';
    $in['paste_text_use_dialog']        = true;
    $in['wpeditimage_disable_captions'] = true;
    $in['plugins']                      = 'inlinepopups,tabfocus,paste,media,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,infographic';
    $in['content_css']                  = get_template_directory_uri() . "/editor-style.css";
    $in['wpautop']                      = true;
    $in['apply_source_formatting']      = false;
    $in['theme_advanced_blockformats']  = 'p,h3';
    $in['theme_advanced_buttons1']      = 'formatselect,|,bold,italic,blockquote,|,link,unlink,|,bullist,numlist,infographic|,wp_fullscreen,wp_adv';
    $in['theme_advanced_buttons2']      = 'pastetext,pasteword,removeformat,|,undo,redo';
    $in['theme_advanced_buttons3']      = '';
    $in['theme_advanced_buttons4']      = '';
    return $in;
}
add_filter('tiny_mce_before_init', 'formatTinyMCE' );

I then have a plugin to create an extra shortcode button:

function fetchInfographic() {  
    return 'HERE BE THE INFOGRAPHIC';  
}
add_shortcode('infographic', 'fetchInfographic');

function addButton() {  
    if(current_user_can('edit_posts') &&  current_user_can('edit_pages'))  
    {  
        add_filter('mce_external_plugins', 'addPlugin');  
        add_filter('mce_buttons', 'registerButton');  
    }  
}  
add_action('init', 'addButton');

function registerButton($buttons) {  
    array_push($buttons, "infographic"); 
    return $buttons;  
}  

function addPlugin($pluginArray) {  
    $pluginArray['infographic'] = plugins_url('infographic_plugin.js', __FILE__); 
    return $pluginArray; 
}  

(infographic_plugin.js)

(function() {  
    tinymce.create('tinymce.plugins.infographic', {  
        init : function(ed, url) {  
            console.log('url');
            ed.addButton('infographic', {  
                title : 'Add an infographic',  
                image : url+'/dashboard.png',  
                onclick : function() {  
                     ed.selection.setContent('[infographic]');  

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

This works great if I remove the formatTinyMCE function, however with it, the button just doesn't appear. As you can see by the function I've tried adding "infographic" to $in['plugins'] and $in['theme_advanced_buttons1'] but it has no effect.

  • Do you get any JavaScript errors in your browser’s debugger? – fuxia Jun 4 '13 at 16:49
  • Nope, I console.log inside of the js plugin so I know when it's being initiated, and I see it logging twice as it seems to be initiated twice (I'm calling it in both $in['plugins'] and $in['theme_advanced_buttons1']). However no icon displays. – Titan Jun 4 '13 at 17:05
1

I was able to resolve this by moving 'infographic' to the front of the list in the $in['plugins'] string

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.