Page 1 of 1
Forum

Welcome to the Tweaking4All community forums!
When participating, please keep the Forum Rules in mind!

Topics for particular software or systems: Start your topic link with the name of the application or system.
For example “MacOS X – Your question“, or “MS Word – Your Tip or Trick“.

Please note that switching to another language when reading a post will not bring you to the same post, in Dutch, as there is most likely no translated for the post!





Share:
Notifications
Clear all

WordPress 4.x - Bring back TinyMCE buttons (Anchor)  

  RSS

Hans
 Hans
(@hans)
Noble Member Admin
Joined: 7 years ago
Posts: 1437
February 23, 2015 11:39 PM  

Another missing button in the WP 4.x version of tinyMCE is the so called "Anchor" button (adds HTML anchor so you can easily refer and jump to other locations in your article).

Unfortunately, the new tinyMCE included in WordPress no longer comes with the code to enable the anchor button. So we need to add this manually.

Step 1 - Get the Anchor plugin from tinyMCE

You can download the full version of tinyMCE from the tinyMCE download page, unzip it, and you'll find the plugin in the js/tinymce/plugins/anchor directory. You can of course also download the attached file, but just be aware that this one is from tinyMCE 4.17, so by the time you read this, it might be outdated.

Note : I've renamed this file to anchor.plugin.min.js (was: plugin.min.js) so I will recognize it in the future.

Step 2 - Place the plugin in a safe place

We most certainly do not want to modify any of the WordPress core files, since they can/will be overwritten with new WordPress releases.
So I copied this file in the "js" directory of my theme. You can create one if you do not have one in your theme directory.

Step 3 - Modify functions.php so tinyMCE picks up the plugin

Now that we have the plugin, we need to enable it in the functions.php with some code:

// Add tinyMCE Anchor
function add_tinymce_anchor_plugin($plugin_array) 
{  
 $the_js_file = get_bloginfo('template_url').'/js/anchor.plugin.min.js';
 $plugin_array['anchor'] = $the_js_file;  
 return $plugin_array;  
}  
add_filter('mce_external_plugins', 'add_tinymce_anchor_plugin'); 

And we need to tell tinyMCE to place the anchor button on the button bar (if your code didn't already do this):

function set_tinymce_buttons_row2($buttons)
{
 array_push($buttons, "superscript", "subscript", "anchor", "hr", "wp_page");
 return $buttons;
}
add_filter('mce_buttons_2', 'set_tinymce_buttons_row2');

In this example I'm adding SuperScript, SubScript, Anchor, horizontal line (HR) and PageBreak to the second button bar in MCE.

While working on this, I noticed that clearing the browser cache may be needed to see the effect (see attached screenshot).


ReplyQuote
Hans
 Hans
(@hans)
Noble Member Admin
Joined: 7 years ago
Posts: 1437
February 23, 2015 11:42 PM  

Oops, I forgot to add a direct link to the tinyMCE Download page ... 


ReplyQuote
Share: