tinymce 3.x advlink plugin - set links to open in new window/tab by default

Question

Using the advlink plugin, the default value for "target" is "_self" (i.e. links open in same window/tab). How can I make it so that links open in a new window/tab by default?

Answer 1

We need to make the following changes in the file advlink.js located in [yourTinymcePluginsDirectory]/advlink/js/advlink.js.

Locate the following part:

    function getTargetListHTML(elm_id, target_form_element) {

        var targets = tinyMCEPopup.getParam('theme_advanced_link_targets', '').split(';');
        var html = '';

        html += '<select id="' + elm_id + '" name="' + elm_id + '" onchange="this.form.' + target_form_element + '.value=';
        html += 'this.options[this.selectedIndex].value;">';
        html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
        html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
        html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
        html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';

We need to change the order of the options. So just put the "_blank" option on top:

        html += '<option value="_blank">' + tinyMCEPopup.getLang('advlink_dlg.target_blank') + ' (_blank)</option>';
        html += '<option value="_self">' + tinyMCEPopup.getLang('advlink_dlg.target_same') + '</option>';
        html += '<option value="_parent">' + tinyMCEPopup.getLang('advlink_dlg.target_parent') + ' (_parent)</option>';
        html += '<option value="_top">' + tinyMCEPopup.getLang('advlink_dlg.target_top') + ' (_top)</option>';

And voila, that was it. Was it? No!

Although this will indeed work, if we try changing the target of a link back to _self, although the HTML will indeed be updated correctly, the dropdown will falsely show the _blank option as selected. This happens because when selecting the _self option the target Tinymce attribute is not updated to _self but rather to "" - so an empty string. Therefore, when selecting _self the script will try to look for an attribute named "", will of course find none, therefore it will select the first option by default. While this works when the first option is _self, it will not work when _self is not the first option.

To solve this problem, we need to tell the script that when the target Tinymce attribute is set to an empty string, it should look for the attribute named _self instead. That way it will be able to locate it even if it's not the first option.

To achieve this we also need to make one more change to the script's behavior. Locate the following line:

selectByValue(formObj, 'targetlist', inst.dom.getAttrib(elm, 'target'), true);

And replace it with:

    var target_value = inst.dom.getAttrib(elm, 'target');
    if (inst.dom.getAttrib(elm, 'target') == ""){
        target_value = "_self";
    }//end if

    selectByValue(formObj, 'targetlist', target_value, true);

And now everything should work perfectly, with _blank being the default target option.