CKEditor - The link plugin is painfully "clever"

Been building “a thing” lately, that is in the need of a WYSIWYG editor. After looking around a bit, CKEditor was what I went with. It has been both one and two curses while trying to get it “working” as needed, but I still think it’s a winner for the requirements I had and it has a nice and extensive documentation. This post is about one particular issue that I have with it. I hope it’s just me. But their link-plugin is just utterly unfortunate by trying to be to “clever”. There are numerous solution on how to make it “simple”. Well guess what. They do not work! Even if StackOverflow answers says so. There’s a really simple solution and that’s what this post is about.

First rule – Do not waste time on configuration

First, lets be clear: DO NOT TRY TO CONFIGURE IT. IF YOU WANT A SIMPLE LINK PLUGIN. DISABLE IT INSTEAD.

config.removePlugins = 'link'

Do not waste your time on “removing tabs by configuration”, e.g. by providing suggestions like:

config.removeDialogTabs = 'link:advanced;link:upload';
config.linkShowTargetTab = false;

Second rule – Do not waste time on fiddling with the tab definition

Secondly: DO NOT TRY TO FIDDLE WITH IT. IF YOU WANT A SIMPLE LINK PLUGIN. DISABLE IT INSTEAD.

There are a bunch of suggested solutions about “detecting” when someone activates/opens a dialog for links, and then “tweak” the dialog definition by removing some UI-elements. DO NOT DO IT! IT DOES NOT WORK. I really hope I’m doing it wrong, and that it actually should work and that I have messed something up. But it does not work.

If you use Google to search for a solution (read “if you google”) you will find suggestion about removing the controls from the dialogs Info tab definition. Looking something like this:

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

    if (dialog.name === 'link') {
        var infoTab = dialog.definition.getContents('info');
        infoTab.remove('linkType');
        infoTab.remove('protocol');
        infoTab.remove('browse');
    }
});

JSFiddle demo

I have put together a JSFiddle for this. Showing that you will waste your time.

1. Run it and select some text to create a link of.
2. In URL type in e.g. http://google.com
3. Inspect the behavior, the console and the resulting link

It blows up. Because it has some clever logic in there, extracting e.g. the protocol and using that to set values in controls that you have removed. It’s a freaking link. Really. A link.

How about anchors?

Well again, it has logic that looks in the actual content that you are editing, to match the targeted anchor/id with. Now, what happens if you are modular and just edits parts of the whole page?

Go to the demo again. Imagine you are editing parts of a page and want to link to #something-something. Try it. The way I think it’s supposed to be done is to:

1. Select Link type = Link to anchor in the text
2. And then….Nothing. Since you are not editing the whole page. You are not provided with the drop downs with possible anchors. Try here

A bit frustrating. Right?

The solution

Thankfully, it’s really simple to write a “dumb/simple” plugin. There’s an excellent guide on how to write plugins in the documentation. And the code is nice and can be found on GitHub.

Finally. I still stick with CKEditor. So far it has mostly done its work and it’s really easy to get started with it.

//Daniel