How to Make the WordPress Post Editor Default to Opening Links in a New Tab

This one definitely fits into the “Minor annoyances have a ridiculous amount of effort expended on them” category. See the pic for the minor annoyance; I had to click the “open link in a new tab” checkbox every time I added an external link in a post. One second wasted? Two tops on a slow day pre-coffee.

I should have just shrugged my shoulders and moved on, but that is not how things work in geek-land 😉

So; I went searching. I was a bit surprised to discover that there wasn’t a way of setting this default, it seemed obvious. Maybe there was a plugin? Nope1.

Maybe someone else had asked the question? Yes they had and there was a solution … which was wrong as it didn’t work2.

OK, I can see where this is going. I’m quite good at Javascript, so how hard can it be?3

Turns out the solution is harder than you may think and it requires supplying a setup function for TinyMCE4. I found a post on a related topic here which also doesn’t work (it’s for an older version of TinyMCE), but gave me enough clues that I could put the rest of the pieces together myself after reading the V4 docs.

The code snippet below is the solution; I stuck it in a site-specific plugin I already had, but it could go in functions.php or wherever:

add_filter('tiny_mce_before_init', function($initArray){
    //add a setup fn
    $initArray['setup'] = <<<JS
function(editor) {
    //catch the ExecCommand event. The tinyMce mceInsertLink command then
    //triggers a custom WP_Link command
    editor.on('ExecCommand', function (e) {
      //console.debug('Command: ', e);
      if(e.command === 'WP_Link'){
          //release to UI so link value is populated
          setTimeout(function(){
            var linkSel = document.querySelector('.wp-link-input input');
            
            if(linkSel.value === ''){
                //no link so set the "Open link in a new tab" checkbox
                //to force the default as checked
                var linkTargetCheckSel = document.querySelector('#wp-link-target');
                linkTargetCheckSel.checked = true;
            }
          }, 0);
      };
    });

}
JS;
    $initArray['setup'] = trim($initArray['setup']); //prevent leading whitespace before fn
    return $initArray;
});

The trick is to catch the WP_Link event that the editor emits, look at the link value to see if it is blank and if it is, set the “open link in new tab” checkbox so that becomes the default.

Works just fine and would make the lamest plugin ever 🙂

[Update Dec 17 – Bah! one of the WP updates since I created this solution has broken it. I’ll research what happened and try and fix it again when I can be bothered. ]

Notes:

  1. There are actually lots of link-related plugins, but I couldn’t find one that did this one simple thing.
  2. I found this: http://wordpress.stackexchange.com/questions/230417/open-link-in-a-new-tab-checked-by-default-when-adding-a-new-link-in-visual-post That doesn’t work for reasons. (boring ones to do with when TinyMCE is initialised)
  3. Considerably harder than it seems – TinyMCE stomps on everything when it starts up, traps most events and doesn’t allow them to propagate i.e. you are f*cked unless you play the game the TinyMCE way…
  4. The WordPress visual editor is TinyMCE V4.