Make hyperlinks in ckeditor open in browser

In this post, we are going to see how we can make hyperlinks in ckeditor clickable. Normally, ckeditor prevents the hyperlinks to open in the edit mode to enable proper formatting. But, sometimes, users may want the links to open in browser. This can be accomplished by following snippet

How to make hyperlinks in ckeditor open in browser

CKEDITOR.on('instanceReady', function(env) {
//get ctrl+clicks on <a>'s in edit mode to open the value of "href" open in new tab.
    $('iframe').contents().click(function(e) {
        if(typeof e.target.href != 'undefined' && e.ctrlKey == true) {
            window.open(e.target.href, 'new' + e.screenX);
        }
    });
});

Here, we are simply targeting the iframe element and attaching a click event to its contents. When the contents are clicked, our script checks if the target content has “href” attribute. If the attribute is present, a new browser tab is opened with corresponding hyperlink.

Now this might cause a bit of issue in mac osx as the key-code for command is different in different browsers and also the commad key in mac is not considered as modifier key (as far as I know 😛 ). A workaround could be to remove the ctrlKey restriction in above snippet.

CKEDITOR.on('instanceReady', function(env) {
//get ctrl+clicks on <a>'s in edit mode to open the value of "href" open in new tab.
    $('iframe').contents().click(function(e) {
        if(typeof e.target.href != 'undefined' ) {
            window.open(e.target.href, 'new' + e.screenX);
        }
    });
});