Drupal - Prevent WYSIWYG+CKEditor from stripping html classes

I found a solution.

This turns off the filtering, it's working, but not a good idea...

config.allowedContent = true;

To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.

So my bet is for allowing any class in the editor is:

config.extraAllowedContent = '*(*)';

This allows any class and any inline style.

config.extraAllowedContent = '*(*);*{*}';

To allow only class="asdf1" and class="asdf2" for any tag:

config.extraAllowedContent = '*(asdf1,asdf2)';

(so you have to specify the classnames)

To allow only class="asdf" only for p tag:

config.extraAllowedContent = 'p(asdf)';

To allow id attribute for any tag:

config.extraAllowedContent = '*[id]';

etc etc

To allow style tag (<style type="text/css">...</style>):

config.extraAllowedContent = 'style';

To be a bit more complex:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

Hope it's a better solution...


What version of CKEditor are you using? There is an issue with CKEditor 4.1+, which has a feature called Automatic Content Filter (ACF) that will automatically strip attributes not defined for the editor: https://drupal.org/node/1956778

Patch #37 in the issue worked for me.


This seems like something that should be added into the WYSIWYG module, the ability to add custom settings to editors is a pretty widespread requirement. But in the absence of that, I still recommend not editing the module itself since it would break on upgrades... fortunately the module does provide a call to drupal_alter, so in a custom module:

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context){
    //check if the editor is ckeditor and the version is at least 4.0
    if($context['profile']->editor=='ckeditor' && $context['editor']['installed version'][0]>3){
        //add custom settings for ckeditor 4.+ here
        $settings['allowedContent'] = TRUE;
    }
}

where "mymodule" is obviously the name of your custom module. This accomplishes the task without editing someone elses module.

Tags:

Wysiwyg

7