How to configure CKEditor so it keeps data attributes instead of removing them?

Question

I use CKeditor for editing rich HTML pages, but some javascript functionality relies on special attributes of the <a> tags that triggers them.

Those are rare cases, just a few records on a database of 5000+ records need to trigger this functionality, and this particular js module needs special attributes as a way of parametrization:

<a href="#" data-from="ROM" data-to="NYC" data-promo="8373794">Buy your tickets</a>

CKeditor allows me to add those attributes (by editing the source code of the entry), but when the client edits the page the editor removes them and breaks that functionality.

Instructing my client to not edit this particular record seems unprofessional. Changing to another WYSIWYG editor may work, but I see that as the last resort.

CKEditor has to have a solution to that!

Sebastián Grignoli Sebastián Grignoli · Accepted Answer · 2014-03-14T00:37:05

I found it:

The special configuration option:

            extraAllowedContent: '*[*]{*}(*)'

did the trick.

So the constructor I use is:

    $('.wysiwyg').ckeditor({
            toolbar : 'Basic',
            extraAllowedContent: '*[*]{*}(*)'
    });

Note that it's the "EXTRA" allowed content option, so it does not overwrite the default.

Update: It turns out that my special attribute had some & in it, and CKEditor was replacing them with the HTML entity &. I added these two options:

            entities: false,
            basicEntities: false,

but they prevented that from happening in text nodes only, not inside attributes. Then I found this option:

            forceSimpleAmpersand: true

and it worked. It'll be okay for now, but if eventually I have to put & as part of any value --the entity, not just the & (this is usually required in content sharing links)-- the editor will break them, changing them to plain &.

How to configure CKEditor so it keeps data attributes instead of removing them?

1 Answers