How do I add class to redactor format list?

Question

I understand that to add a "note" class to the redactor text editor drop down, I need to use formattingAdd. But each iteration I've tried does not work. The example is: https://imperavi.com/redactor/examples/formatting-add/

I used the example, edited it for my needs, and added it to the header of my layout template on the Craft site...

<style>
.article-note {
  font-style: italic;
  font-size: 1.2em;
  font-weight: 700;
}
</style>

<script>
    $(function()
    {
        $('#redactor').redactor({
            focus: true,
            formatting: ['p', 'blockquote'],
            formattingAdd: {          
                "article-note-add": {
                    title: 'Note',
                    args: ['h6', 'class', 'article-note', 'toggle']
                },    
            }
        });
    });
</script>

Didn't work. Also, I didn't know how the textarea in the example is used or where it should go.

A lot of people in the discussion boards I've researched have recommended plugins. I am not interested in a plugin. Both Craft CMS and redactor state that there is a way to do it without a plugin. While it hasn't worked from me so far, I'm sure someone has succeeded and I'm hoping to learn.

Answer 1

Your example code attempts to create a new Redactor instance, which (as Brad says) won't work inside the control panel (where Craft has created the Redactor instances already).

You can, however, use the Redactor config files to add an element with the classname .note. To do that, add the following to the file config/redactor/Standard.json (or if you configured your RichText field to use a different configuration, the JSON file corresponding to that configuration):

"formattingAdd": {
  "note": {
    "title": "Note",
    "args": ["p", "class", "note"]
  }
}

Note that the first parameter in the args property is the tag which the .note element will use – according to the Redactor docs, only p, pre, blockquote, div and heading tags can be used with formattingAdd.

Also note that unless you add some custom CSS, the .note will – of course – not be styled any differently than a normal paragraph.

Unfortunately, there's no way to add custom CSS and JavaScript to the Control Panel without a custom plugin – either by writing your own or by installing the CP CSS and CP JS plugins.

Answer 2

The link you referenced is assuming that you've got full-control over the output/HTML of the page and you've already got an instance of Redactor up-and-running.

In the context of Craft, the only place you have full control over is the front-end of your site, not the control panel. You certainly can include the HTML/CSS/JS to load Redactor on the front-end of your site, in which case you can have the Redactor configuration do whatever you want it to do (including adding classes to the Redactor format list).

In the control panel, you got much more limited options. You can probably pull off what you're looking for by using the CP CSS and CP JS plugins that inject CSS and JS into control panel pages, you'd just want to be sure and target actual pages that have Redactor instances on them.

Answer 3

This works in Craft 3.0 (tested with Craft 3.7.12) - what you get is a menu entry in the formatting menu - the selected paragraph then gets the class "redactor". You put it in your config json for your redactor settings (e.g. config/redactor/Standard.json), for example below the "formatting" line, and NOT inside the customStyles section.

  "formattingAdd": {
    "p-redactor": {
      "title": "Redactor Paragraph",
      "api": "module.block.format",
      "args": {
          "tag": "p",
          "class": "redactor"
      }
    }
  },