CKEDitor removes class names, even with the exception in config

Question

CKEditor seems to be stripping out class names when I toggle between HTML view and Rich Text view.

As per many suggestions across the web I have added the following to the config.js file:

config.allowedContent = true;

Uploaded, cleared cache and even gone to the JS file directly to check it is not caching on my machine, but it's still removing classes.

Is there another solution?

Answer 1

Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).

Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.

Don't forget to flush the cache under "Performance tab."

Answer 2

Edit the full profile in Configuration > CKEditor

Open the Advanced Content Filter section and select Disabled

No need to add anything in the Extra Allowed Content field. No need to change the config.js. [...like this hasn't taken me hours and hours to figure out]

Answer 3

This issue has been solved in dev (7.x-2.3 when published) as part of CKeditor 4.1 ACF. You may try either to upgrade your WYSIWYG or try the below workarounds.

---

In Drupal 7 you can try the following hook:

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

or by using some other idea:

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
      $settings['extraAllowedContent'] = array(
        'img[src,title,alt,style,width,height,class,hspace,vspace,view_mode,format,fid]',
      );
  }
}
?>

or with the following jQuery code:

CKEDITOR.replace( textarea_id, {
    allowedContent: true
} );

Related:

• CKeditor 4 converts Media tags to string "false"
• CKeditor keeps removing my code when switching in and out of source mode

Answer 4

Go commando and disable the wysiwyg altogether.

If you know how to write basic HTML and CSS, i.e. you're not the client, then turn off the plugin. It'll also improve your HTML/CSS skills

I spent days figuring out how to prevent the wysiwyg butchering my classes and pre/code tags everytime I reloaded the editor. I realised that all I was doing was trying to disable all the wysiwyg plugin functionality. So I turned it off.

Yep, this is contrary to my answer above.