Unable to allow style attribute (htmlpurifier issue?)

[patrikalienus]

Description

I am trying to allow our web editors to use style om pretty much any tag, but specifically h1-h6, p, ul, and ol. The CK Editor plugin doesn't seem to care about the changes in the .json config file in this regard. Adding new elements to HTML.AllowedElements works just fine, but changed to CSS.AllowedProperties does nothing, nor does adding (for instance) h1[style] to the HTML.Allowed string.

I don't know if this is an issue with htmlpurifier, or if it's the Craft plugin. The .json config below looks correct as it's similar to what I've used in other, non Craft projects, where it has worked fine.

I also tried disabling html purifier completely, but the style attributes are still being removed, so I'm becoming more and more confident that it's not a htmlpurifier issue.

This is my .json config for this CK Editor field:

{
  "Attr.AllowedFrameTargets": [
    "_blank"
  ],
  "Attr.EnableID": true,
  "HTML.SafeIframe": true,
  "URI.SafeIframeRegexp": "%^(https?:)?//(www.youtube.com/|youtube.com/|youtu.be/|player.vimeo.com/)%",
  "HTML.Allowed": "a[href|title],b,blockquote[cite],br,caption,code,del,div,em,figure,figcaption,h1[style],h2[style],h3[style],h4[style],h5[style],h6[style],hr,img[alt|src|title],li[style],ol[style],start,ul[style],p[style],span[style],strike[style],strong[style],table[border|cellpadding|cellspacing|summary],tbody,td[abbr|axis|colspan|rowspan],tfoot,th[abbr|axis|colspan|rowspan|scope|valign],thead,tr[valign],tt,u",
  "HTML.AllowedElements": [
    "a", "acronym", "blockquote", "br", "caption", "cite", "code", "div", "dl", "dt", "em", "figcaption", "figure", "h1", "h2", "h3", "h4", "h5", "h6", "hr", "img", "li", "ol", "p", "span", "strike", "strong", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "tt", "ul", "u"
  ],
  "HTML.AllowedAttributes": "style,src,alt,class",
  "Attr.AllowedRel": [
    "nofollow",
    "noopener",
    "noreferrer"
  ],
  "CSS.AllowImportant": true,
  "CSS.AllowTricky": true,
  "CSS.AllowedProperties": [
    "color", "text-decoration", "text-transform", "font-size", "width", "height", "max-width", "letter-spacing", "margin", "padding"
  ],
  "CSS.MaxImgLength": null
}

Additional info

• Craft version: Pro 4.12.8
• PHP version: 8.2.24
• Database driver & version: postgres 13.15

Plugins & versions:

"codemix/yii2-streamlog": "^1.3",
"craftcms/azure-blob": "2.1.0",
"craftcms/ckeditor": "3.10.0",
"craftcms/cms": "4.12.8",
"craftcms/element-api": "4.1.0",
"craftcms/redactor": "3.1.0",
"doublesecretagency/craft-inventory": "3.2.0",
"goldinteractive/craft-publisher": "3.0.1",
"james-heinrich/getid3": "^1.9",
"mutation/translate": "4.0.2",
"nystudio107/craft-retour": "4.1.19",
"sebastianlenz/linkfield": "2.1.5",
"spicyweb/craft-neo": "4.2.18",
"verbb/navigation": "2.1.1",
"vlucas/phpdotenv": "^3.4.0",
"yiisoft/yii2-redis": "^2.0"```

[i-just]

Hi, thanks for getting in touch.

I also tried disabling html purifier completely, but the style attributes are still being removed, so I'm becoming more and more confident that it's not a htmlpurifier issue.

It sounds like a CKEditor configuration issue.

You have to configure both CKEditor and HTML Purifier for this to work. You might find those two issues helpful: #250 and #217.

I’ll close this now, but feel free to reply if you’re still having problems.

[patrikalienus]

https://ckeditor.com/docs/ckeditor5/latest/features/link.html

This link that you provided in one of those issue links, does not apply to this plugin. In fact none of the code examples on ckeditor.com are written in languages that are relevant to this plugin.
I don't get it. Am I supposed to use docs from ckeditor.com, transform the examples in my head into the relevant language, and figure out how it relates to this plugin? Because I'm having a very hard time doing that.

[i-just]

How are you adding a style attribute to the content of the CKEditor field - via Source editing?

[patrikalienus]

How are you adding a style attribute to the content of the CKEditor field - via Source editing?

Yes, source editing.

[i-just]

Thanks for confirming! You need to configure both CKEditor and HTML Purifier to allow for that attribute on the tags you want it to be allowed on.

To allow the style attribute on all the tags, you can add the following to the CKEditor Config used by your field (control panel → Settings → CKEditor; in the “Config Options” field; the examples below use JavaScript, just like the CKEditor 5 docs do):

return {
  htmlSupport: {
    allow: [
      {
        styles: true,
      },
    ],
  },
}

To allow the style tag only for h1-h4 tags, you could use:

return {
  htmlSupport: {
    allow: [
      {
        name: /h[1-4]/,
        styles: true,
      },
    ],
  },
}

The list of all the config option properties can be found here: https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html. If you scroll to htmlSupport and expand that item, you can see a link to the configuration options supported by that plugin (GeneralHtmlSupportConfig).

I hope this helps!

[patrikalienus]

Thanks for getting back to me so quick @i-just. I appreciate it.

When editing the config within the Control Panel, it autocompletes as I type, however "htmlSupport" never popped up unlike all the other config options, which made me think I wasn't doing it in the right place. And merely doing it anyway and testing didn't actually occur to me since every other property had auto-completed :)