<p>The <a href="https://imperavi.com/redactor/examples/formatting-add/" rel="nofollow">link</a> 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.</p>

<p>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).</p>

<p>In the control panel, you got much more limited options.  You can probably pull off what you're looking for by using the <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="nofollow">CP CSS</a> and <a href="https://github.com/lindseydiloreto/craft-cpjs" rel="nofollow">CP JS</a> 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.</p>

CC BY-SA 3.0
2016-07-12T23:44:00.100Z
2016-07-12T23:44:00.100Z
Brad Bell
<p>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 &quot;redactor&quot;. You put it in your config json for your redactor settings (e.g. config/redactor/Standard.json), for example below the &quot;formatting&quot; line, and NOT inside the customStyles section.</p>
<pre><code>  &quot;formattingAdd&quot;: {
    &quot;p-redactor&quot;: {
      &quot;title&quot;: &quot;Redactor Paragraph&quot;,
      &quot;api&quot;: &quot;module.block.format&quot;,
      &quot;args&quot;: {
          &quot;tag&quot;: &quot;p&quot;,
          &quot;class&quot;: &quot;redactor&quot;
      }
    }
  },
</code></pre>
<p><a href="https://i.sstatic.net/iz7C6m.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/iz7C6m.png" alt="Screenshot of Craft CMS control panel showing a redactor field type" /></a></p>

CC BY-SA 4.0
2021-09-28T16:30:24.920Z
2021-09-28T16:30:24.920Z
MisterMike
<p>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).</p>

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

<pre><code>"formattingAdd": {
  "note": {
    "title": "Note",
    "args": ["p", "class", "note"]
  }
}
</code></pre>

<p>Note that the first parameter in the <code>args</code> property is the tag which the <code>.note</code> element will use – according to the <a href="https://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd" rel="noreferrer">Redactor docs</a>, only <code>p</code>, <code>pre</code>, <code>blockquote</code>, <code>div</code> and heading tags can be used with <code>formattingAdd</code>.</p>

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

<p>Unfortunately, there's no way to add custom CSS and JavaScript to the Control Panel without a custom plugin – either by <a href="https://craftcms.stackexchange.com/a/270/1098">writing your own</a> or by installing the <a href="https://github.com/lindseydiloreto/craft-cpcss" rel="noreferrer">CP CSS</a> and <a href="https://github.com/lindseydiloreto/craft-cpjs" rel="noreferrer">CP JS</a> plugins.</p>

CC BY-SA 3.0
2016-07-13T15:52:55.677Z
Thank you so much for your help! I had seen this solution in another forum, but the code was incorrect (it didn't have parentheses and, when I added them, it still wouldn't work). I tried your code this morning and it worked perfectly! Also, I appreciate your explanation. Working code is great, but knowing why it works is even better.
Jayna
CC BY-SA 4.0
2020-04-07T15:10:26.647Z
Unfortunately this code does not appear to work in the craft3 environment :(
Rick Kukiela
CC BY-SA 3.0
2016-07-13T07:54:28.690Z
2016-07-13T07:54:28.690Z
2017-04-13T12:50:59.930Z
Mats Mikkel Rummelhoff
<p>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: <a href="https://imperavi.com/redactor/examples/formatting-add/" rel="noreferrer">https://imperavi.com/redactor/examples/formatting-add/</a> </p>

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

<pre><code>&lt;style&gt;
.article-note {
  font-style: italic;
  font-size: 1.2em;
  font-weight: 700;
}
&lt;/style&gt;

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

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

<p>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. </p>

CC BY-SA 3.0
2016-07-11T23:25:20.877Z
Are you trying to load Redactor on the front-end of your site?  If not, where are you adding that code so it loads in the control panel?
Brad Bell
CC BY-SA 3.0
2016-07-12T22:05:33.530Z
Well according to the provided example (see link above) you are supposed to add it to the header of your site. So that is what I did. Didn't work.
Jayna
<redactor><custom><format>
How do I add class to redactor format list?
# How do I add class to redactor format list?

(Asked by: username_0 on 2016-07-11)

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...




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.

**Tags:** redactor, custom, format
> **Comments:**
> **username_1**: Are you trying to load Redactor on the front-end of your site?  If not, where are you adding that code so it loads in the control panel?  
> **username_0**: Well according to the provided example (see link above) you are supposed to add it to the header of your site. So that is what I did. Didn't work.  

---

## 3 answers

### Answer by username_3 on 2016-07-13. Score: 7 | Accepted answer

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.

> **Comments:**
> **username_0**: Thank you so much for your help! I had seen this solution in another forum, but the code was incorrect (it didn't have parentheses and, when I added them, it still wouldn't work). I tried your code this morning and it worked perfectly! Also, I appreciate your explanation. Working code is great, but knowing why it works is even better.  
> **username_4**: Unfortunately this code does not appear to work in the craft3 environment :(  

---

### Answer by username_1 on 2016-07-12. Score: 2

The [link](https://imperavi.com/redactor/examples/formatting-add/) 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](https://github.com/lindseydiloreto/craft-cpcss) and [CP JS](https://github.com/lindseydiloreto/craft-cpjs) 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 by username_2 on 2021-09-28. Score: 2

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"
      }
    }
  },


---

