Customising the WordPress TinyMce editor and it's buttons

Question

Customising the WordPress TinyMce editor and it's buttons

Brett

2018年7月27日 16:34

I'm trying to cutomise the TinyMce editor within WordPress and I took this code from an older WP site I did, but the buttons I have set don't seem to be working, for example, this is what I have:

add_filter( 'tiny_mce_before_init', 'blm_format_tiny_mce' );

function blm_format_tiny_mce( $in ) {
    $in['remove_linebreaks']            = true;
    $in['convert_newlines_to_brs']      = false;
    $in['keep_styles']                  = true;
    $in['tabfocus_elements']            = 'major-publishing-actions';
    $in['paste_remove_styles']          = false;
    $in['paste_remove_spans']           = true;
    $in['paste_strip_class_attributes'] = 'mso';
    $in['paste_text_linebreaktype']     = 'combined';
    $in['plugins']                      = 'tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs';
    $in['theme_advanced_buttons1']      = 'formatselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,wp_adv';
    $in['theme_advanced_buttons2']      = 'pastetext,pasteword,selectall,removeformat,|,charmap,|,outdent,indent,|,undo,redo';
    $in['theme_advanced_buttons3']      = '';
    $in['theme_advanced_buttons4']      = '';
    //$in['valid_children']               = '+div[p]';

    return $in;
}

Now, even though I have bullist,numlist listed, I don't see them on the editor; however I see strikethrough even though it's not listed.

The only two other ones missing are horizontal line and special character; on top of that they don't show up in the order I put them, the order seems somewhat random.

I'm happy to just not set the buttons, as with this site it's ok if everything is available, but I thought I needed to use it to insert the plugin buttons such as pastetext,pasteword,selectall?

What am I doing wrong here?

Topic plugin-tinymce tinymce visual-editor Wordpress

Category Web

Brett · Accepted Answer · 2018年7月27日 16:34

I just found out you can do it this way too, where you can keep using the original array and not have to use additional filters:

Instead of the array keys being named theme_advanced_buttons*, they are now named toolbar*, so for example:

$in['toolbar1'] = 'formatselect, bold, italic, underline, bullist, numlist, blockquote, link, image, alignleft, aligncenter, alignright, alignjustify, wp_more, fullscreen';
$in['tollbar2'] = 'strikethrough, forecolor, outdent, indent, pastetext, removeformat, wp_help';
$in['toolbar3'] = '';
$in['toolbar4'] = '';

However, for some reason, even though I don't have the undo & redo buttons in my data, they show anyway, where with using the additional filters as shown in junking's answer you get exactly what you list.

junkrig · Accepted Answer · 2018年7月27日 05:44

I think theme_advanced_buttons1, theme_advanced_buttons2 etc were part of the TinyMCE advanced theme which is no longer available in TinyMCE 4. WordPress 4.9.7 is using TinyMCE version 4.7.11.

The two rows of controls are now referred to with:

mce_buttons
mce_buttons_2

Here is a good example, taken from https://www.kevinleary.net/customizing-tinymce-wysiwyg-editor-wordpress/ which allows easy customisation of the buttons on both rows.

// TinyMCE: First line toolbar customizations
if( !function_exists('base_extended_editor_mce_buttons') ){
    function base_extended_editor_mce_buttons($buttons) {
        // The settings are returned in this array. Customize to suite your needs.
        return array(
            'formatselect', 'bold', 'italic', 'subscript', 'superscript', 'bullist', 'numlist', 'link', 'unlink', 'blockquote', 'outdent', 'indent', 'charmap', 'removeformat', 'spellchecker', 'fullscreen', 'wp_more', 'wp_help'
        );
    }
    add_filter("mce_buttons", "base_extended_editor_mce_buttons", 0);
}

// TinyMCE: Second line toolbar customizations
if( !function_exists('base_extended_editor_mce_buttons_2') ){
    function base_extended_editor_mce_buttons_2($buttons) {
        // The settings are returned in this array. Customize to suite your needs. An empty array is used here because I remove the second row of icons.
        return array('bold, italic, pastetext, paste, selectall');
    }
    add_filter("mce_buttons_2", "base_extended_editor_mce_buttons_2", 0);
}

N.B. selectall seems to work, but there isn't an icon showing when I try it. Possibly the same as this problem - https://github.com/tinymce/tinymce/issues/634

Also there doesn't seem to be a 'pasteword' option, but there is 'paste' and 'pastetext' and also a paid plugin 'powerpaste'.

https://www.tiny.cloud/docs/plugins/paste/

https://www.tiny.cloud/docs/plugins/powerpaste/

Customising the WordPress TinyMce editor and it's buttons

About