TinyMCE Anchor Button not showing

Question

I'm using this filter and function to display a custom, stripped-down version of the TinyMCE editor. Everything works as it should...except the 'Anchor' button will not show ('anchor')? According to the TinyMCE website (http://www.tinymce.com/wiki.php/Controls), that is the control to use.

Does anyone know why the anchor button will not show?

EDIT: the code example comes from here (this shows the full code I am using, not just the snippet below): https://gist.github.com/mrwweb/9937127

add_filter( 'mce_buttons', 'wpse_mce_buttons_1' );
function wpse_mce_buttons_1( $buttons ) {
    $buttons = array( 'styleselect', 'bold', 'italic', 'link', 'unlink', 'bullist', 'numlist', 'table', 'anchor');

    return $buttons;
}
add_filter( 'mce_buttons_2', 'wpse_mce_buttons_2' );
function wpse_mce_buttons_2( $buttons ) {
    $buttons = array();
    return $buttons;
}

Answer 1

I had the exact same problem and found the solution to this.

The problem is that the anchor plugin for TinyMCE is not being included as part of the default Wordpress install. So while Wordpress says to include:

$buttons[] = 'anchor';

…that's not going to work because the TinyMCE plugin for anchors isn't there.

If you go to TinyMCE's website, you can download the full package directly. Once you have it, you'll want to move /js/tinymce/plugins/anchor/ into your Wordpress install at /wp-includes/js/tinymce/plugins/.

Basically, you want to have /wp-includes/js/tinymce/plugins/anchor/ in your install.

Once that's available, you need to add a function that tells TinyMCE to look for that plugin (either in your theme's functions.php or added to a plugin):

function my_mce_external_plugins($plugins) {

    $plugins['anchor'] = '/wp-includes/js/tinymce/plugins/anchor/plugin.min.js';
    return $plugins;
}
add_filter('mce_external_plugins', 'my_mce_external_plugins');

And now it will be available for the button to be added to the visual editor:

function extra_editor_buttons($buttons) {
    $buttons[] = 'anchor';
    $buttons[] = 'superscript';
    $buttons[] = 'subscript';
    return $buttons;
}
add_filter("mce_buttons_2", "extra_editor_buttons");

Et voilà:

This solution was inspired by this related question which was about the code button in TinyMCE, but had the exact same solution (the plugin was missing). Both anchor and code plugins are missing and there is an open bug to add the files, so maybe this won't be an issue in future versions.

Hopefully this can help someone else as well!

Answer 2

Your first filter isn't correct. 'styleselect' give you and generate a dropdown on the tinyMCE. You can't add information like that.

Here is what to do.

Nice way:

First, create a separate file called 'custom_wp_admin_editor_tinymce.php' (or what ever). Inside the function.php, include your file with the correct path where you created your previous function.

// Add the heading dropdown (x6) and add the format dropdown
include_once(TEMPLATEPATH.'/Path to you doc/custom_wp_admin_editor_tinymce.php');

Here is your 'custom_wp_admin_editor_tinymce' template.

<?php
// Add the heading dropdown (x6) and add the format dropdown
function enable_style_dropdown($buttons) {
    $buttons[] = 'styleselect';
    return $buttons;
}
add_filter("mce_buttons_2", "enable_style_dropdown");


function myformatTinyMCE( $in ) {
    $in['block_formats'] = 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6';
    $style_formats = array (
        array( 'title' => 'bold', 'block' => 'p', 'classes' => 'bold' ),
        array( 'title' => 'italic', 'block' => 'p', 'classes' => 'italic' ),    
        array( 'title' => 'link', 'block' => 'p', 'classes' => 'link' ),
        array( 'title' => 'unlink', 'block' => 'p', 'classes' => 'unlink' ),
        array( 'title' => 'bullist', 'block' => 'p', 'classes' => 'bullist' ),
        array( 'title' => 'numlist', 'block' => 'p', 'classes' => 'numlist' ),
        array( 'title' => 'table', 'block' => 'p', 'classes' => 'table' ),
        array( 'title' => 'anchor', 'block' => 'p', 'classes' => 'anchor' )
    );
    $in['style_formats'] = json_encode( $style_formats );
    $in['style_formats_merge'] = false;
    $in['wordpress_adv_hidden'] = false;
    return $in;
}
add_filter( 'tiny_mce_before_init', 'myformatTinyMCE' );
?>

Dirty way:

Past the previous code directly inside function.php