Ckeditor automatically strips classes from div

Detailed configurations to preserve classes

When CKEditor removes your classes, the likely issue is the Advanced Content Filter (ACF), a feature designed to maintain the cleanliness and security of your content. Achieving a balance between filtering unnecessary elements and preserving necessary ones is an ongoing task. Here are some tips to enhance CKEditor's behavior:

Precise filtering with config.js

You can influence CKEditor's parsing behavior at a granular level with the config.js file. Here's an example:

config.allowedContent = {
    'div': {
        classes: 'myClass' // "myClass" is the only game in town
    }
};


Note: Replace 'myClass' with your specific classes you want to allow or use '*' for any class.

Extra control with extraAllowedContent

CKEditor provides an extraAllowedContent option that you can use to define specific elements and attributes that should be preserved:

config.extraAllowedContent = 'div(myClass)'; // "myClass allowed, just on the divs though"


Alternatively, to allow any styles, classes, and ids on all elements, use:

config.extraAllowedContent = '*(*);*{*}'; // "I'm generous, anything goes!"


Custom configurations for unique behaviors

Harness the power of CKEditor's Custom Configurations for even more control:

For allowing IDs on all elements:

config.extraAllowedContent = '*[id]'; // "IDs are the gold standard"


A mixed specific configuration:

config.extraAllowedContent = 'p(margin, padding);div(row, column)'; // "Only allow these on selected elements"


Implementation and testing considerations

Testing, validation and clearing cache

Test and validate your configurations after each change. Follow these best practices for optimal results:

1. Clear your browser's cache: This ensures that your changes take immediate effect and CKEditor isn't using old cached files.
2. Test various types of content: Try out different classes and styles in your content to verify that everything you need is preserved.

Security considerations

Ending up with peculiar or unfitting content is like catching a cold; it happens when you let your guard down. That's why content filtering is critical. While it is tempting to turn off content filtering for the sake of convenience, doing so without a security plan in place is like leaving your front door unlocked with a "I'm away, come in" sign.

Drupal-specific configurations

For Drupal users, meet your new best friend: CKEditor profile configuration under Drupal's text formats and editors. Customize the configurations here to avoid any conflicts with CKEditor's default behavior -- because no one likes unnecessary drama.