3

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?

enter image description here

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;
}
7

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à:

Wordpress Visual Editor, Now With Anchor Button

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!

  • 1
    Putting the plugin into the /wp-includes/ folder likely means the files disappear on upgrades. It would be much better to put them into their own little plugin. – mrwweb Aug 20 '14 at 17:22
  • Thank you for your answer. I was starting to think it might be something like that. I'll look in to how to add the TinyMCE anchor code via a Plugin, as @mrwweb mentioned it would be best that way. But you've answered my question with lots of detail and it may help others with the same problem. – codeview Aug 28 '14 at 0:27
0

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

  • Thank you for your answer but the styleselect ("Formats" menu) works fine, it is populated with this (this is also where my code example comes from): https://gist.github.com/mrwweb/9937127 – codeview Jul 31 '14 at 12:37
  • Are you using a 3.9+ WordPress version? – Romain Jul 31 '14 at 16:47
  • Yes. I'm using 3.9.1 – codeview Jul 31 '14 at 19:46

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.