apostrophe-rich-text anchor name and adding attributes to elements in CKEditor programmatically

Question

My Problem is that and anchor in apostrophe-rich-text produces a not working markup in html.

I have the following setup for my apostrophe-rich-text:

'apostrophe-rich-text': {
    toolbar: [
        'Styles',
        'Bold',
        'Italic',
        'Blockquote',
        'BulletedList',
        'Link',
        'Anchor',
        'Table'
  ],
    styles: [
        { name: 'Default', element: 'p' }
  ]
}

I'm using more styles in general but didn't wanted to list them all here. Everything works like expected except Anchor.

Anchor produces this this in html.

<p>Lorem ipsum dolor <a name="section-one">incididunt</a> qui officia deserunt</p>

Which obviously can not work. Did I made something wrong or is this a bug?

There is also the possibility to select "Link" and choose "Anchor" in the dropdown menu for "Link Type", unfortunately my anchors are not recognized, I only get the message "(No anchors present in the document)".

I use a dropdwon menu for on page navigation the anchors are definitely there. You can see it here.

Additionally i want to add a class to all a elements and for performance and safety reasons rel="noopener noreferrer" to all external links.

Answer 1

I was able to modify the CKEDITOR instance with a really good solution. With this you can programmatically add just about anything to any element.

As described in the Global CKeditor configuration section I have added the following:

// lib/modules/apostrophe-areas/public/js/user.js

apos.define('apostrophe-areas', {
  construct: function(self, options) {
    // Use the super pattern - don't forget to call the original method
    var superEnableCkeditor = self.enableCkeditor;
    self.enableCkeditor = function() {
      superEnableCkeditor();
      // Now do as we please
      CKEDITOR.on('instanceReady', function(ev) {
        var editor = ev.editor;
        editor.dataProcessor.htmlFilter.addRules({
          elements : {
            // Add attributes to a
            a : function( element ) {
              // Add accent-color class to all links
              if ( !element.attributes.class ){
                element.attributes.class = 'accent-color';
              }
              // Add _blank and noopener and noreferrer to external links
              if ( !element.attributes.rel ){
                // Get content's a href values
                var url = element.attributes.href;
                // Extract host names from URLs (IE safe)
                var parser = document.createElement('a');
                parser.href = url;
                // Set additional attributes
                var hostname = parser.hostname;
                if ( hostname !== window.location.host) {
                    element.attributes.rel = 'noopener noreferrer';
                    element.attributes.target = '_blank';
                }
              }
            }
          }
        });
      })
    };
  }
});

For the rel attributes of course i had to allow it with the allowedAttributes method:

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

// Changing the allowed HTML tags in rich text widgets
module.exports = {
  sanitizeHtml: {
    allowedTags: [
      'h2', 'h3', 'h4', 'p', 'a', 'ul', 'ol', 'li', 'strong', 'em', 'blockquote', 'iframe'
    ],
    allowedAttributes: {
      '*': ['style', 'class'],
      a: [ 'style', 'name', 'href', 'target', 'rel', 'class' ]
    },
    allowedSchemes: ['http', 'https', 'ftp', 'mailto', 'tel']
  }
};

That adds a lot of flexibility to the CKEditor used in Apostrophe and can be very useful for various situations where attributes should be programmatically added to elements.