Page 1 of 1

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

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

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.
Examples: "MacOS X - Your question", "MS Word - Your Tip or Trick".

Please note that switching to another language when reading a post will not work!
Posts will not have a translated counterpart.




RSS Feed

Home Forums Web Development WordPress 4.x – Bring back TinyMCE buttons (Anchor)

This topic contains 1 reply, has 1 voice, and was last updated by  hans 4 years, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • 4291

    hans
    Keymaster

    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).

    Attachments:
    4294

    hans
    Keymaster
Viewing 2 posts - 1 through 2 (of 2 total)



You must be logged in to reply to this topic.