2

I'm trying to extend Rich Text Widgets Style in Apostrophe but it doesn't work.

In home.html

{ apos.area(data.page, 'body', {

        widgets: {
            'apostrophe-rich-text': {
                toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 
                                   'Unlink'],
                styles: [
                    { name: 'Heading', element: 'h2'},
                    { name: 'Subheading', element: 'h3'},
                    { name: 'Paragraph', element: 'p'}
                ]
            }
            }
    }) }}

In lib/modules/apostrophe-rich-text-widgets/index.js

module.exports = {
  // The standard list copied from the module, plus sup and sub

  sanitizeHtml: {

    allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 
                   'ul', 'ol', 'li', 'b', 'i', 'strong', 'em', 'strike', 
                   'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 
                   'tbody', 'tr', 'th', 'td', 'pre', 'sup', 'sub'
    ],

    allowedAttributes: {
      a: [ 'href', 'name', 'target' ],
      // We don't currently allow img itself by default, but this
      // would make sense if we did
      img: [ 'src' ]
    },

    // Lots of these won't come up by default because we don't allow them
    selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont',
      'input', 'link', 'meta' ],
    // URL schemes we permit
    allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
    allowedSchemesByTag: {}
  }
};

The HTML tags h3 and p work correctly but h2 work like p. It's there something that I don't put correctly?

Thanks!

Jose García
  • 125
  • 8
  • You mention that `h2` works like `p` – could you clarify exactly what it is that doesn't work? Your configuration looks correct to me – fredrikekelund Jan 30 '19 at 15:16
  • It does look correct. Does the H2 come directly out of CKE as the wrong tag or does the wrong tag appear after refresh / apostrophe sanitization? Peek in the inspector – Stuart Romanek Jan 30 '19 at 16:15
  • When I inspect the page in the navigator I can see that the tag it appears is h2 so I think that the H2 tag comes out as the wrong tag from the CKE. – Jose García Feb 01 '19 at 08:21
  • It sounds like you need to inspect the styles that are applied onto the h2 tag. If a h2 tag is being outputted correctly when you select heading, then it sounds like CKE is doing its job correctly - if I understand correctly, it appears there is CSS somewhere which is effecting your h2 tag and making it look like a p tag. – Joseph Feb 11 '19 at 01:20
  • I check it and the style that is applying is the reset.less file that is located in _apostrophe-assets/public/css/utils/_ . How can I check if CKE is doing its job correctly? – Jose García Feb 11 '19 at 15:11

1 Answers1

1

I fixed it adding a style for the h2 tag. I've noticed that h3 have its own style in site.less

h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  h4 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  strong { font-weight: bold; }
  em { font-style: italic; }

So I added the style I wanted to my h2 tag, and it worked.

Jose García
  • 125
  • 8