Extending link plugin: allow custom attributes to be added more easily

[lukenofurther]

Type of report

Feature request

Provide description of the new feature

When extending the link plugin with a plugin of my own, I haven't found a way to add custom attributes to NEW links. With a link that already exists it's possible, in the commit handler of a newly-defined dialog field for example, to get the selected element and add an attribute like so:

var element = CKEDITOR.plugins.link.getSelectedLink(editor);
element.setAttribute('data-for-bar', this.getValue());

However, with a new link this isn't possible because there is no element at that point, so a plugin author is forced to rely on the link generation mechanism in the insertLinksIntoSelection function, which uses getLinkAttributes to determine what attributes to add. This method only permits a defined set of attributes that cannot be added to from an external plugin, forcing authors to clone the entire plugin and edit its source.

An easy way to implement the improvement would be to add a key (e.g. "custom") to the data object that's passed between plugin.getLinkAttributes, dialog.insertLinksIntoSelection and the commit methods of the fields. The commit handlers of additional fields could then add attributes to the custom key on data and insertLinksIntoSelection would process the attributes on that key (via a new function e.g. getCustomAttributes) and merge them with the attributes passed to CKEDITOR.style.

The only consideration with backwards compatibility that I can see would be how to merge in the custom attributes with the currently-defined ones - i.e. which would overwrite which.

I'm happy to make these changes and make a pull request, although I haven't contributed to this project before.

[jacekbogdanski]

Hello,

I'm not quite sure what you want to accomplish on the business level of your application, but as I understand you would like to have an option to add custom attribute into a link element? Does it need to be necessary done using link API?

We already have Content Transformations API which is pretty powerful in context of editor content manipulation and may resolve your issue.

You can see some examples at filter.addTransformations docs API.

Adding additional attribute for links may be as easy as:

// Add this before content will be loaded into editor
// e.g. on `editor#pluginsLoaded` event.
editor.filter.addTransformations( [
    [
        {
            element: 'a',
            left: function( el ) {
                return !el.attributes.foo;
            },
            right: function( el ) {
                el.attributes.foo = '1';
            }
        }
    ]
] );

[lukenofurther]

Thanks for the reply, I've not looked into content transformations. I don't think it would work for this use case though. The use case I'm proposing is:

• User clicks on the external link button.
• The external link dialog opens, displaying a custom field defined by the plugin extending the external link plugin.
• User enters value (e.g. "user's random value") into the custom field and clicks ok.
• If there is a value for the custom field, then the custom attribute is added to the link's markup (e.g. <a href="www.google.com" my-custom-attribute="user's random value") by the extending plugin's callbacks.

Our specific use case would be to add a custom data attribute onto the link for analytics tracking. Not currently a priority.

[jacekbogdanski]

Such customization would be plugin wise and we have to repeat a lot of code for similar feature requests for other plugins. It should be done on the dialog level and actually, we are working on the feature which will allow users to fetch the plugin model - in this case link element.

You can subscribe #2423 for more information about the feature state, but in a shortcut, it should allow you to retrieve and modify link element using dialog API e.g. using editor#dialogHide event.

I would also still recommend to check out content transformation - I'm pretty sure it should suit your needs.

[ajaybmishra25]

Hi,

I am also looking for such kind of functionality, where while adding link it must add custom attribute using "Display text field" for link.