Ckeditor Strips Inline Attributes

CKEditor strips inline attributes

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.

Drupal 8 stripping style attributes from table tags

I believe inline styles are removed by default for security reasons. But, there has been a lot of discussion about this issue on Drupal.org over the past few years. If you're looking for a workaround and accept the risk, here are two approaches I have found:

• How to fix: CKEditor is removing style attributes. Drupal 8.
• Refactor Xss::attributes() to allow filtering of style attribute values

Fair warning: I have not personally implemented either of these.

configuring CKEditor pasteFilter to strip out certain inline styles

According to How to Allow Everything Except…, you can use:

config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
config.disallowedContent = '*{font*}';
// if you want to be more specific: config.disallowedContent = 'span{font-size,font-family}';

I tested it and it works, see for yourself in this JSFiddle I've created.

TYPO3: CKEditor strips data-attributes in span-Tags

I have done this for iframe tag with attribbuts, no allowAttributes used for this:

processing:
  allowTags:
    - iframe

editor:
  config:    
    extraAllowedContent:
      - iframe[*]

for you this should do the trick:

editor:
  config:    
    extraAllowedContent:
      - span[*]

CKEditor removing inline CSS

You might not have configured the allowed content.

see: http://docs.ckeditor.com/#!/api/CKEDITOR.feature-property-allowedContent

CKEditor remove inline img style

Since version 4.1, CKEditor offers so called Content Transformations and already defines some of them. If you restrict in your config.allowedContent that you don't want to have width and height in <img> styles, then editor will automatically convert styles to attributes. For example:

CKEDITOR.replace( 'editor1', {
    allowedContent: 
        'img[!src,alt,width,height]{float};' + // Note no {width,height}
        'h1 h2 div'
} );

then:

<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>

becomes in the output:

<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p>

and, as I guess, it completely solves your problem.

---

Related Topics