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.

  • What CKEditor version did you download into your libraries folder?
    – Beebee
    Commented Oct 30, 2013 at 16:38
  • using version 4.2
    – jrharshath
    Commented Oct 30, 2013 at 17:07

6 Answers 6


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.

  • while the patch failed for me, I hard-coded "allowedContent = true" in editors/ckeditor.inc's wysiwyg_ckeditor_settings funciton
    – jrharshath
    Commented Oct 30, 2013 at 22:43
  • Glad you got it working. That patch needs to be applied to the -dev version of wysiwyg, so that could be why it didn't apply.
    – Dave Bruns
    Commented Oct 31, 2013 at 4:21
  • There's a lot more in the patch than that single line though. Make sure you test fully so that everything is working accordingly!
    – Beebee
    Commented Oct 31, 2013 at 9:35

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

  • 2
    WHERE?!?!!?!? in which file!!! no one on the internet has ONCE mentioned where this config.allowedContent must be set? Commented Oct 31, 2014 at 7:46
  • 1
    @coderama in /admin/config/content/ckeditor, choose your profile to edit, expand Advanced options and put it in Custom JavaScript configuration Commented Jan 6, 2016 at 18:02
  • 1
    @coderama If the 'Custom Javascript Configuration' section is missing, you may need to install the CKEditor Custom Config module
    – Timmah
    Commented Dec 9, 2020 at 1:39

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.


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, 

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(

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.


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

  • But, how to put class in the Allowed option of HTML elements. As far as my knowledge, you can put the HTML element in the list i.e. <div>, <span> etc. So as per this div and span will not be stripped off, but how to put class there, can you provide example?
    – CodeNext
    Commented Mar 17, 2016 at 21:15
  • There's no need to put a class in there. If the HTML element is in the list, its classe(s) will remain untouched and not stripped away. Commented Mar 19, 2016 at 15:55
  • I am not understanding why my post is showing yesterday, I had asked this several months ago, Is there any issue???????
    – CodeNext
    Commented Mar 19, 2016 at 15:59
  • Odd, because the answer you replied to is only about 2 days old :) Commented Mar 19, 2016 at 16:01
  • No man, very strange, I have not done anything for months on this...Oh my god, let me log out and re-login....
    – CodeNext
    Commented Mar 19, 2016 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.