Wordpress/TinyMCE - Hook/Filter to add Target =“_blank” in a url

Question

I am trying it since last 6 hours and nothing seems to work for me. I want to add target="_blank" on click of a button inside Wordpress editor -TinyMce.

Here is what I did till now :

Ref : https://wordpress.stackexchange.com/questions/141344/add-button-in-tinymce-editor-to-insert-text

functions.php

    add_action( 'init', 'droid_buttons' );
function droid_buttons() {
    add_filter( "mce_external_plugins", "droid_add_buttons" );
    add_filter( 'mce_buttons', 'droid_register_buttons' );
}

function droid_add_buttons( $plugin_array ) {
    $plugin_array['droid'] = get_template_directory_uri() . '/js/text-button.js';
    echo get_template_directory_uri();
    return $plugin_array;
}

function droid_register_buttons( $buttons ) {
    array_push( $buttons, 'droid_title'); // droid_title
    return $buttons;
}

text-button.js

    (function() {
    tinymce.create('tinymce.plugins.Droid', {
    init : function(editor, url) {
    editor.addButton('droid_title', {
    title : 'Droid Title',
    cmd : 'droid_title',
    image : ''
    });

    editor.addCommand('droid_title', function() {
    var selected_text = editor.selection.getContent();
    var element = "http://www.google.com";
    var return_text = "";
    return_text = '<a href="'+element+'" class="droid_title" target="_blank">' + selected_text + '</span>';
    editor.execCommand('mceInsertContent', 0, return_text);
    });

    },

    });

    // Register plugin
    tinymce.PluginManager.add( 'droid', tinymce.plugins.Droid );
})();

So after adding above code in my functions.php file and text-button.js file, it adds a button in wordpress editor to add target="_blank" in on top of inserted link in selected text.

when I am inserting an url after clicking insert/edit link in editor, its showing as it is :

But after clicking the button..the url is changing to www.google.com as given in code.

I tried to figure out exactly what should I give as my element variable in js file but not able to figure out.

I went through the solution given here :

WordPress hook / filter to process link inside a post

and here :

How to set target attribute in tinyMCE

but not able to figure out the issue. Any help would be really appreciable. Thanks so much in advance.

Hi @AwladLiton , I am not getting you ! Can you please explain a bit more? — Ankit Pandey

Awlad Liton Awlad Liton · Accepted Answer · 2018-07-05T19:50:45

As per the documentation of the plugin you will need to add a callback function in the addButton event. In this call back you should be accomplish what you are wanted. Update: Please make sure you have the correct path for the js file in the functions.php file. It seems that in my case it will be $plugin_array['droid'] = get_template_directory_uri() . '/assets/js/text-button.js'; You have missed assets directory may be?

Try like this:

(function() {
        tinymce.create('tinymce.plugins.Droid', {
        init : function(editor, url) {
        editor.addButton('droid_title', {
        title : 'Droid Title',
        cmd : 'droid_title',
        image : '',
        onclick: function() {
            var selected_text = editor.selection.getContent();
            var element = "http://www.google.com";
            var return_text = "";
            return_text = '<a href="'+element+'" class="droid_title"  target="_blank">' + selected_text + '</span>';
            editor.insertContent(return_text);
           }
        });

Working example demo

Wordpress/TinyMCE - Hook/Filter to add Target =“_blank” in a url

1 Answers