CKEditor strips inline attributes

Question

I have been using CKEditor for some time and it has worked great. I've pretty much gotten rid of any problems that ive had but this one i cant seem to figure out. When i add inline attributes to elements for instance style = "color: #ff0;" on a <p></p> tag they are stripped out when i switch from wysiwyg to source view. No saving or submission is done and ckeditor is has been added to my site which is my own script. Any ideas as to what would cause this. All of the search results i can find correspond to this happening in Drupal but Drupal seems to be the problem not the editor in all instances. Thanks again!

Feria

Also the editor has been configured to fullPage mode which allows me to add <style></style> but inline attributes are still stripped. – Feria

Answer 1

It feels like you're using CKEditor 4.1+ that comes with Advanced Content Filter (ACF). If so, you need to specify config.allowedContent and configure it to get your things working. You may also be interested in config.extraAllowedContent.

See this answer for more details.

Educe

Links appear broken. The documentation is available at docs.ckeditor.com for those interested. – Lothians

@Nenotlep Links seem to be working just fine. Try again and confirm please. – Educe

Still not working. For me all the links look like "ckeditor-docs.t/#!...", which obviously fails. Both IE and Chrome. – Lothians

The links look like [1]: http://ckeditor-docs.t/#!/guide/dev_advanced_content_filter in Edit mode as well. Are you in the same network as the ckeditor-docs.t or maby you have a hardcoded DNS resolve to that address? – Lothians

@Nenotlep Haha! ;) Thanks. I didn't figure it out since I have documentation configured locally. Fixed domains. Thanks again. – Educe

Answer 2

For anyone looking for a simple sample on how to enabled additional markup in CKEditor without disabling ACF completely, here is a short snippet:

CKEDITOR.replace( 'editor1', {
    extraAllowedContent: 'style;*[id,rel](*){*}'
} );

extraAllowedContent here enables the <style> element, allows two additional attributes (in square brackets) for all (* is a wildcard) already allowed elements, allows usage of any class names (*) for them and allows usage of any inline styles {*}

Coloration

And you can take that one step further and allow everything (I think): style;*(*)[*]{*}; – Considerable

Answer 3

hi you can stop ACF easily . by default your configaration is---

function ckeditor($name,$value='',$height=300){
    return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{});});</script>';
} 

just add this in the curly brackets:

allowedContent: true

now your configuration will be:

function ckeditor($name,$value='',$height=300){
    return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{allowedContent: true});});</script>';
}

Pet

Answer 4

I faced the same issue and below answer solved my problem:

config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

Varmint

I tried with same, I am adding ckeditor in mobile app and its working on Android devices but striping style and tags from html in iOS devices. – Alvertaalves

Answer 5

I had the same problem, that ck was stripping not only some attributes, but whole elements when pasting a block element, inside a block element (div with some attributes pasted inside a p) while using this method:

editor.insertHtml(html);

what solved the problem was using this workaround instead:

editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));

High