Modify CKEditor link dialog to add custom attribute to links

Question

I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:

CKEDITOR.on('dialogDefinition', function(ev) {
    if (ev.data.name == "link") {
        var info = dialog.getContents("info");
        info.elements.push({
            type: "vbox",
            id: "urlOptions",
            children: [{
                type: "hbox",
                children: [{
                    id: "button",
                    type: "checkbox",
                    label: "Button",
                    commit: function(data) {
                        data.button = this.getValue()
                        console.log("commit", data.button, data);
                    },
                    setup: function(data) {
                        this.setValue(data.button);
                        console.log("setup", data.button, data);
                    }
                }]
            }]
        });
    }
});

Now I have two problems. The first one is that despite me adding the code in the commit and setup functions that should save the state of the checkbox, it's not working. It's as if the data can't hold any other parameters but the ones there by default.

The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOk callback on the dialog, however, the link dialog already has an onOk callback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.

How can I accomplish these things?

Answer 1

You best option is to modify the plugin. So you need to open the source code and find the file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\

The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/

I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239

What you need to do:

First add this line just before the dialog "browse" button is appended. Approx. in line: 547:

                        {
                            id: "button",
                            type: "checkbox",
                            label: "Button",
                            setup: function (data) {
                                this.allowOnChange = false;

                                if (data.button)
                                    this.setValue(data.button);

                                this.allowOnChange = true;
                            },
                            commit: function (data) {
                                data.button = this.getValue()
                                this.allowOnChange = false;
                            }
                        },

This part is actually your code. I just copied and pasted it.

Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:

this.commitContent( data );

//My custom attribute
if (data.button)
    attributes["custom-attribute"] = "button";
else
    attributes["custom-attribute"] = "";

This will modify your link adding the attribute to the element such as <a href="#" custom-attribute="button">text</a>

That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink . Approx. line 179 to load the attributes:

...
if ( element )
{
    retval.button = element.getAttribute('custom-attribute');

    var target = element.getAttribute( 'target' );
...