Customize the Visual Editor Toolbar

The Text Area field can be configured to use the TinyMCE visual editor by changing the Type setting to Visual Editor. Two versions of the visual editor can then be chosen:

  • Full
  • Compact

Default Toolbars

The Full toolbar looks as follows:

WS Form - Text Area Field - Visual Editor - Full Toolbar

The Compact toolbar looks as follows:

WS Form - Text Area Field - Visual Editor - Compact Toolbar

Filter Hooks

Both the Full and Compact toolbars can be customized using WordPress filter hooks.

Each toolbar is configured using a string containing the name of each button. The pipe | character is used to create separators in the toolbar. A complete list of the available buttons can be found on the TinyMCE website.

Some buttons and features require plugins which can also be configured using hooks.

The filter hooks are as follows:

Full Toolbar

Hook Name Default Value
wsf_tinymce_toolbar1_full formatselect bold italic underline strikethrough | bullist numlist | alignleft aligncenter alignright alignjustify | link unlink | wp_adv
wsf_tinymce_toolbar2_full forecolor | pastetext | hr | removeformat charmap | outdent indent blockquote | wp_more | undo redo | fullscreen
wsf_tinymce_toolbar3_full Blank
wsf_tinymce_toolbar4_full Blank
wsf_tinymce_plugins_full charmap colorpicker hr lists media paste tabfocus textcolor fullscreen wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview

Compact Toolbar

Hook Name Default Value
wsf_tinymce_toolbar1_compact bold italic underline strikethrough | bullist numlist | alignleft aligncenter alignright alignjustify | link unlink | pastetext | undo redo | fullscreen
wsf_tinymce_toolbar2_compact Blank
wsf_tinymce_toolbar3_compact Blank
wsf_tinymce_toolbar4_compact Blank
wsf_tinymce_plugins_compact lists media tabfocus fullscreen paste wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview

Sample Code

An example for the Full toolbar, implementing a change to the second toolbar that removes the fullscreen button is given below.

// Add filter
add_filter( 'wsf_tinymce_toolbar2_full', 'wsf_tinymce_toolbar2_full_function' );

// Filter function
function wsf_tinymce_toolbar2_full_function( $toolbar ) {

    // Create a toolbar string
    $toolbar = 'forecolor | pastetext | hr | removeformat charmap | outdent indent blockquote | wp_more | undo redo';

    // Return the toolbar string
    return $toolbar;
}