In CKEditor, how to set link open in a new window as default while removing the target tab?

Question

I want links to open on a new window as default. I tried:

CKEDITOR.on('dialogDefinition', function ( ev ){
   if(ev.data.name == 'link'){
      ev.data.definition.getContents('target').get('linkTargetType')['default']='_blank';
   }
});

It doesn't work. But I figured out that if I remove the following line. It works.

config.removeDialogTabs = 'image:advanced;image:Link;link:advanced;link:target';

But then the problem is now there is the target tab that allow user to change the link target.

What I want to keep the editor as simple as possible and don't want to allow users to change the link target. Yet, I want to set default target as target:_blank. Any suggestions? Thanks!

Answer 1

It seems that if you remove the Target tab, you cannot change the default value to "new window".

However, you can remove all the options in the Target list except "new window", and set it as the default value.

Try the following code:

CKEDITOR.on('dialogDefinition', function(e) {
    if (e.data.name === 'link') {
        var target = e.data.definition.getContents('target');
        var options = target.get('linkTargetType').items;
        for (var i = options.length-1; i >= 0; i--) {
            var label = options[i][0];
            if (!label.match(/new window/i)) {
                options.splice(i, 1);
            }
        }
        var targetField = target.get( 'linkTargetType' );
        targetField['default'] = '_blank';
    }
});

In this case, the Target tab still exists, but there's only one value ("new window") to select, so the users can't change this.

Hope this helps.

Answer 2

Another way to do it to provide the necessary data in onOk function, see this particular commit

You add target attribute to data object in the onOk function in plugins/link/dialogs/link.js

onOk: function() {
            var data = {};

            // Collect data from fields.
            this.commitContent( data );


            // Overwrite, always set target="_blank"
            data.target = {
                dependent: "",
                fullscreen: "",
                height: "",
                left: "",
                location: "",
                menubar: "",
                name: "_blank",
                resizable: "",
                scrollbars: "",
                status: "",
                toolbar: "",
                top: "",
                type: "_blank",
                width: ""
            };
     //more code below
     }

Answer 3

Here is how I updated my links so they open in new tab, without affecting any other links on the page but only those from ckEditor. This is in Angular, but you can use the same idea depending on your platform.

I created a Pipe to transform the link to include a target:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'setlinktarget'
})
export class SetLinkTarget implements PipeTransform {

  transform(value: any): any {
    return value.split('<a ').join('<a target="_new"');
  }

}

I then applied the pipe to my content:

<div [innerHTML]="myRecord.commentsWithHTML | setlinktarget">

This seems much easier than all the other options out there where you have to modify the ckeditor files. Hope this helps someone.

Answer 4

CKEDITOR.on('dialogDefinition', function (ev) { 
   var dialogName = ev.data.name;
   var dialog = ev.data.definition.dialog;
   var dialogDefinition = ev.data.definition;

   if(dialogName == 'link') {
      dialogDefinition.onLoad = function () {
         if(dialogName == 'link'){
             dialogDefinition.getContents('target').get('linkTargetType')['default']='_blank';
         }
         dialog.hidePage( 'target' );                   
    };
}
});

//And configure the below
 config.removeDialogTabs = 'image:advanced;link:advanced;link:upload;';

Answer 5

Go to ckeditor/plugins/link/dialogs/link.js and paste the below code:

/* Here we are latching on an event ... in this case, the dialog open event */

CKEDITOR.on('dialogDefinition', function(ev) {
    try {    
        /* this just gets the name of the dialog */    
        var dialogName = ev.data.name;

        /* this just gets the contents of the opened dialog */
        var dialogDefinition = ev.data.definition;

        /* Make sure that the dialog opened is the link plugin ... otherwise do nothing */
        if(dialogName == 'link') {`enter code here`    
            /* Getting the contents of the Target tab */
            var informationTab = dialogDefinition.getContents('target');

            /* Getting the contents of the dropdown field "Target" so we can set it */
            var targetField = informationTab.get('linkTargetType');

            /* Now that we have the field, we just set the default to _blank
               A good modification would be to check the value of the
               URL field and if the field does not start with "mailto:" or a
               relative path, then set the value to "_blank" */
            targetField['default'] = '_blank';
        }
    } catch(exception) {
         alert('Error ' + ev.message);
    }
});