Configuring Allowable Tags and Attributes: Editor Provider (Aloha)

  • Updated

This article will walk you through customizing allowable tags and attributes for your content authors within Ektron's new editor provider: Aloha.

(This KB is applicable to Ektron CMS versions 8.6 through 8.7SP2. Starting in 9.0, whitelisting is more relaxed, and tags and attributes shouldn't need to be specified as allowable as indicated here.)

After running the 'EditorIntegrationUtility' on your 8.6 website, or working with Aloha in your 8.7 website, your content authors will have the full benefit of an HTML5, real-time editor. There are multiple configuration options for this provider, but one of the more important ones is configuring which tags and attributes you'll allow your content to have. This is a 'white list' of allowable HTML tags that can be configured for any tag and attribute supported by the w3c for HTML5 and below.

Extending this out-of-the-box list is straightforward. Simply open the file located here: '[siteroot]\Workarea\FrameworkUI\js\Ektron\Controls\EktronUI\Editor\Aloha\AlohaEktron.aspx'

Starting at about line 29, you see an allows section that outlines the tags and their attributes as follows:

allows: {      elements: [        'a', 'abbr', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',        'colgroup', 'dd', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',        'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',        'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',        'ul', 'span', 'hr', 'object', 'div', 'script', 'figure', 'noscript', 'figcaption'      ],      attributes: {        'a': ['href', 'title', 'id', 'data-gentics-aloha-repository', 'data-gentics-aloha-object-id', 'style', 'class'],                'p': ['class', 'style'],                'span': ['class', 'style'],        'div': [ 'id', 'class'],        'abbr': ['title'],        'blockquote': ['cite'],        'br': ['class'],        'col': ['span', 'width'],        'colgroup': ['span', 'width'],        'img': ['align', 'alt', 'height', 'src', 'title', 'width', 'class', 'style'],        'ol': ['start', 'type'],        'q': ['cite'],                'script': ['type', 'language'],        'table': ['summary', 'width'],        'td': ['abbr', 'axis', 'colspan', 'rowspan', 'width'],        'th': ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],        'ul': ['type'],                'li': ['class', 'style'],                'figure': ['data-media','data-media400', 'data-media600', 'title']      },      protocols: {        'a': {'href': ['ftp', 'http', 'https', 'mailto', '__relative__']},        'blockquote': {'cite': ['http', 'https', '__relative__']},        'img': {'src' : ['http', 'https', '__relative__']},        'q': {'cite': ['http', 'https
  • elements: The HTML tags that will be allowed within your content.
  • attributes: The corresponding attributes allowed for the above specified tags.
  • protocols: The protocols allowed for image and link references (fo example, http/https/ftp).

These sections follow a javascript array for entry and require a strict format. Aside from that, you can modify as much as you'd like to tailor your users' authoring experience and what they are allowed to publish.

If you have issues around embedding js script, please see this article.

If you have any questions, please post them on our devcenter!