How to add class to ul ol tag in redactor by using formattingAdd

Question

I try to add a class to tag ul by field Redactor. I have prepered special config file for Redactor. For example in Redactor field a have a created simple list so i select this list and next from formatting option i choose my new created option which should add a class to that ul tag and unfortunately it not works.

However if i use this option on standard paragraph class is added. So i have not idea what i do wrong.

Below content my config file:

{
  "buttons": ["formatting", "bold", "italic", "unorderedlist", "orderedlist", "link", "html", "fontcolor", "image"],
  "plugins": ["fullscreen", "fontcolor", "alignment"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "formattingAdd": {

    "list-columns-3-each-under": {
      "title": "list-columns-3-each-under",
      "api": "module.block.format",
      "args": {

        "type": "add",

        "class": "my-class-for-list"
      }
    }

  }

}

Answer 1

The unfortunate answer here is you can't add classes to ul or ol elements using formattingAdd, at least that's the way I interpret the documentation. See: https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd

It states:

formattingAdd can only be applied to block tags (p, pre, blockquote, div, heading, etc).

I suspect the etc there also encompasses ul and ol elements, even though they are block elements.

The best workaround I can come up with for this is to have a wrapper around the list and apply the class to that wrapper. As this would be fiddly in Redactor alone, I use a matrix field type to add blocks of content, with the option to add a class to the wrapper for that particular block.

This page describes this method of building out content https://nystudio107.com/blog/creating-a-content-builder-in-craft-cms