9

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 Oct 30 '13 at 16:38
  • using version 4.2 – jrharshath Oct 30 '13 at 17:07
4

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 Oct 30 '13 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 Oct 31 '13 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 Oct 31 '13 at 9:35
9

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

  • 1
    WHERE?!?!!?!? in which file!!! no one on the internet has ONCE mentioned where this config.allowedContent must be set? – coderama Oct 31 '14 at 7:46
  • @coderama in /admin/config/content/ckeditor, choose your profile to edit, expand Advanced options and put it in Custom JavaScript configuration – UnsettlingTrend Jan 6 '16 at 18:02
2

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.

0

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, 
  );
0

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)',
0

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 Mar 17 '16 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. – cptstarling Mar 19 '16 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 Mar 19 '16 at 15:59
  • Odd, because the answer you replied to is only about 2 days old :) – cptstarling Mar 19 '16 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 Mar 19 '16 at 16:02

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.