Prevent WYSIWYG+CKEditor from stripping html classes

Question

I'm using WYSIWYG editor with CKEditor. I'm finding that when adding custom classes to my elements from the "source" view, CKEditor strips those classes when switching out of the source view.

When googling for a solution to this, I found the CKEditor module page which describes how to fix this when using CKEditor alone. (Basically, we need to set up a JS config config.allowedContent = true in its Advanced Content Filter settings).

However, when using CKEditor via WYSIWYG, these settings are not exposed in the admin interface. How do you achieve the same when using CKEditor via WYSIWYG?

PS: I cannot use CKEditor alone because it does not integrate with the media plugin.

Answer 1

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.

Answer 2

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...

Answer 3

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.

Answer 4

Try adding the following to modules/wysiwyg/editors/ckeditor.inc

'allowedContent' => TRUE, to function wysiwyg_ckeditor_settings($editor, $config, $theme)

so that it now reads:

function wysiwyg_ckeditor_settings($editor, $config, $theme) {
  $settings = array(
    'width' => 'auto',
    // For better compatibility with smaller textareas.
    'resize_minWidth' => 450,
    'height' => 420,
    // @todo Do not use skins as themes and add separate skin handling.
    'theme' => 'default',
    'skin' => !empty($theme) ? $theme : 'kama',
    // By default, CKEditor converts most characters into HTML entities. Since
    // it does not support a custom definition, but Drupal supports Unicode, we
    // disable at least the additional character sets. CKEditor always converts
    // XML default characters '&', '<', '>'.
    // @todo Check whether completely disabling ProcessHTMLEntities is an option.
    // ADDED  'allowedContent' => TRUE, to keep WYSIWYG from removing classes
    'entities_latin' => FALSE,
    'entities_greek' => FALSE,
    'allowedContent' => TRUE, 
  );

Answer 5

Without hacking any sources, and also without trying to figure out WHERE the bleep these settings are being read, you could add this to you own custom module

function mymodule_wysiwyg_editor_settings_alter(&$settings, $context) {
    if ($context['profile']->editor == 'ckeditor') {
        $settings['extraAllowedContent'] = array(
            'a[download,type,length,href]',
            'span;ul;li;table;tr;td;style;*[id];*(*);*{*}'
        );
    }
}

The settings the OP is asking for are *(*);*{*} from the answer of @Tommy above. This seems to allow class and style attributes on any element. The rest are just example entries. As another example, this entry allows the tags needed by the media module.

'img[title,alt,src,data-cke-saved-src](wysiwyg-break,drupal-content);video[width,height,controls,src](*);source[src,type];audio[controls,src](*);img[*](media-element,file-default)',

Answer 6

The Filtered HTML-filter strips out the classes from elements that are not in its allowed HTML elements. The paragraph tag (<p>) is not in there by default (which may be confusing and unnatural), eventhough it may the most frequent element where class is applied upon. Once you put it in there, Filtered HTML will no longer strip the classes from these tags. Same goes for image tags (<img>).