https://github.com/apostrophecms-legacy/apostrophe-extra-link-attributes

Add extra attributes to link tags in the Apostrophe CMS. You get to configure which are allowed.
https://github.com/apostrophecms-legacy/apostrophe-extra-link-attributes

Last synced: 1 day ago
JSON representation

Add extra attributes to link tags in the Apostrophe CMS. You get to configure which are allowed.

• Host: GitHub
• URL: https://github.com/apostrophecms-legacy/apostrophe-extra-link-attributes
• Owner: apostrophecms-legacy
• Created: 2017-11-30T21:30:18.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-22T15:46:26.000Z (over 6 years ago)
• Last Synced: 2024-12-18T12:41:22.182Z (9 days ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 0
• Watchers: 13
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Purpose

You have some extra attributes you'd like to add to link tags in your rich text editor markup. But CKEditor only allows certain fields to be edited. This module makes it easy to add more editable fields. They appear in new tabs in CKEditor's link editor.

## Installation

```

npm install --save apostrophe-extra-link-attributes

```

## Usage

```javascript

// in app.js

modules: {

  'apostrophe-extra-link-attributes': {

    tabs: [

      {

        name: 'tabOne',

        label: 'Tab One',

        fields: [

          {

            name: 'data-niftiness',

            label: 'Niftiness'

          },

          {

            name: 'data-specialness',

            label: 'Specialness'

          },

        ]

      }

    ]

  },

  'apostrophe-rich-text-widgets': {

    sanitizeHtml: {

      allowedAttributes: {

        // Any attributes you DON'T list here are NOT saved

        a: [ 'href', 'data-niftiness', 'data-specialness' ]

      }

    }

  }

}

```

## Results

When you edit a link in Apostrophe's rich text editor (CKEditor), the dialog box will offer two new fields: `Niftiness` and `Specialness`. They will be saved to the attributes `data-niftiness` and `data-specialness`.

## Warnings and Limitations

### Don't forget `sanitizeHtml`

**DON'T FORGET:** you must configure `sanitizeHtml` (see example above). Otherwise Apostrophe will discard your extra attributes as suspicious markup.

### Other uses of `extraAllowedContent`

This module configures CKEditor so that the new attributes are not stripped out at the browser level (yes, CKEditor has sanitization features too). We do our best to append the new rules to any existing rules you have set in `CKEDITOR.config.extraAllowedContent`. However, we currently only support the string-based format. CKEditor also allows an object-based format with several alternate syntaxes. It would be difficult to address all possible conflicts with rules in that format. If you don't understand this, it probably won't be an issue for you.