17

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?

19

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

snapshot

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

  • Works for me on Drupal 7 with CKEditor module 7.x-1.13 and CKEditor 4.3.2. Thanks, I was just starting having headache with that ! – Benj Feb 26 '14 at 16:43
  • 1
    Now under "Admin >> Content authoring >> Configuration >> CKEditor". – Hugo Jun 25 '15 at 8:36
7

Edit the full profile in Configuration > CKEditor

enter image description here

Open the Advanced Content Filter section and select Disabled enter image description here

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]

  • 2
    Now under "Admin >> Content authoring >> Configuration >> CKEditor". – Hugo Jun 25 '15 at 8:36
1

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:

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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