Search code examples
apostrophe-cms

Apostrophe Rich Text Widget Styles

I've been having a small problem in the apostrophe-rich-text widget for a while now. For some reason, the only configuration options that save when editing a rich text widget is the element type, and even then only some of the time. I have 7 test configuration set up right now:

{ name: 'Heading', element: 'h3', class: 'testClass' },
{ name: 'Subheading', element: 'h4', class: 'testClass' },
{ name: 'Paragraph', element: 'p', class: 'testClass' },
{ name: 'Label', element: 'label', class: 'testClass' },
{ name: 'Centered Heading', element: 'h3', styles: { 'text-align': 'center'} },
{ name: 'Centered Subheading', element: 'h4', styles: { 'text-align': 'center'} },
{ name: 'Centered Paragraph', element: 'p', styles: { 'text-align': 'center', 'color': 'red'} }

Of those, all of them show up correctly when the option is chosen in the Styles dropdown. But when the page is reloaded, very little is apparently saved. In the first 3 examples (from the Apostrophe documentation), the element type is saved and shown correctly, but the class does not get applied to the element. On the 4th example, neither the element type or the class get applied correctly on page reload (it seems to default back to the "Heading" style). The last 3 do not get saved at all - the styles show up before reload, but after reload, they default to the Heading style.

Is there something I haven't configured correctly to enable these styles to be saved/applied correctly?

Thanks!

Solution

  • Configuring custom attributes for rich-text is a two part process: First, as you have, is defining what should come out of of CKEditor while editing and writing. The second is configuring sanitize-html to whitelist those attributes, which prevents them from being stripped out during save.

    In your project-level /lib/modules/apostrophe-rich-text-widgets/index.js you can provide configuration for sanitize-html.

    module.exports = {
  ...
  sanitizeHtml: {
    allowedClasses: {
      'p': ['testClass'],
      'h1': ['testClass']
    },
    allowedAttributes: {
      '*': ['style', 'href', 'color']
    }
  }
}

    Look over the README for sanitize-html to better understand its defaults and other configuration https://github.com/punkave/sanitize-html