<p>It's worth noting that as of Craft 2.5, it's now using Redactor II, so the above code examples don't work if you have upgraded. Here's a working <a href="https://craftcms.com/docs/rich-text-fields#redactor-configs" rel="nofollow noreferrer">JSON config</a> example you can build on:</p>

<pre><code>{
    "buttons": ["format","bold","lists","link","file","image"],
    "plugins":["source","fullscreen"],
    "toolbarFixed": true,
    "formatting": ["p", "blockquote", "h2", "h3", "h4", "h5", "h6"],
    "formattingAdd": {
        "para-intro": {
            title: "Paragraph Intro",
            args: ["p", "class", "intro", "toggle"]
        }
    }

}
</code></pre>

<p>The code above includes new format for formattingAdd, but also note that some button names have changed, ie format. Source and full screen are now plugins.</p>

<p>You can read up more on the various options for formattAdd at <a href="https://imperavi.com/redactor/docs/settings/formatting/" rel="nofollow noreferrer">https://imperavi.com/redactor/docs/settings/formatting/</a></p>

<p>If your Craft install existed prior to 2.5 and you used non standard Redactor configs, it's also worth reading <a href="https://craftcms.com/support/redactor-ii-configs" rel="nofollow noreferrer">https://craftcms.com/support/redactor-ii-configs</a> which covers updating your Craft Redactor configs to be compatable with Redactor II</p>

CC BY-SA 3.0
2016-08-04T21:03:56.423Z
This is not entirely accurate. Based on the Redactor docs, you can only add customizations to specific elements.

[formattingAdd](https://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd) can only be applied to p, pre, blockquote, div and heading tags (H1-H6).

So, in your example above, you cannot actually append those args to `<a>` elements.
Ian
CC BY-SA 3.0
2016-08-05T14:11:27.417Z
Good catch @ian. Swear I had that working at some point but I don't use much in the way of custom Redactor configs anymore, so it's probably just my memory failing me. Answer edited
neekster
CC BY-SA 3.0
2016-03-23T04:50:28.430Z
2017-10-19T01:59:03.777Z
2017-10-19T01:59:03.777Z
neekster
<p>Victor answers my questions regarding the formatting tags and the fact that you need to create a Craft plugin to add Redactor plugins. </p>

<p>Since there wasn't a solution for adding classes on inline elements with custom classes/styles, Nathan's plugin only supports block elements, I created a plugin that wraps the Styles Redactor plugin. You can get it here: <a href="https://github.com/aelvan/RedactorStyles-Craft">https://github.com/aelvan/RedactorStyles-Craft</a></p>

CC BY-SA 3.0
2014-10-09T09:08:07.163Z
Redactor 10.0, which hopefully finds its way into the next Craft update, now has 140 new APIs including a new [inline formatting function](http://imperavi.com/redactor/docs/api/inline/). I hope this resolves the big issue with removing styles. The behavior of their updated [font-color plugin](http://imperavi.com/redactor/plugins/font-color/) look promising (on the front end side at least!).
carlcs
CC BY-SA 3.0
2014-10-09T09:16:19.280Z
Yes, I've been looking at the 10.0 docs, and it seems these kind of things will be trivial as soon as Craft updates to it.
André Elvan
CC BY-SA 3.0
2014-06-18T06:59:01.417Z
2014-06-18T06:59:01.417Z
André Elvan
<p>If by styles you mean the formatting drop-down, just add them in an array:</p>

<pre><code>{
    buttons: ['bold', 'italic'],
    formatting: ['p', 'blockquote', 'h2', 'h3', 'h4', 'SomeHtmlTag']
}
</code></pre>

<p>.</p>

<p>If you want to have a button which adds custom CSS-classes, take a look at: <a href="https://github.com/Natetronn/redactor-css" rel="noreferrer">Redactor CSS by Nathan Doyle</a></p>

<hr>

<h3>Update (July 2015)</h3>

<p><a href="http://buildwithcraft.com/updates#build2615" rel="noreferrer">Craft 2.3.2615</a> (Dec 2, 2014) and above use Redactor 10, which includes the <a href="http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd" rel="noreferrer">formattingAdd</a> setting for adding custom styles and classes.</p>

<pre class="lang-js prettyprint-override"><code>formattingAdd: [
{
    tag: 'p',
    title: 'Red Block',
    class: 'red'
}
</code></pre>

CC BY-SA 3.0
2014-06-17T14:53:14.230Z
What I need is to add either custom CSS classes or inline styles to content in the rich text editor (I've edited the question to clarify).

I guess your answer indicates that to add redactor plugins we need to use a Craft plugin? Can anyone confirm this?
André Elvan
CC BY-SA 3.0
2014-06-17T15:06:00.020Z
I recommend you use classes instead of inline-styling. That's cleaner and will allow you to perform changes in one place. -- If you want to add anything beyond the Redactor config, you have to use a plugin. Here is an example of the Redactor Clips plugin implemented as a Craft plugin: https://github.com/pixelandtonic/RedactorClips
Victor
CC BY-SA 3.0
2014-06-17T15:17:39.480Z
Ok, thanks, that answers my questions. :)
André Elvan
CC BY-SA 3.0
2014-06-17T15:45:42.053Z
If you figure out how to apply that class to the text selection instead of the whole block (paragraph), please let me know. I don't know if I should better open a new question for that as this question here is already answered?! Opinion?
carlcs
CC BY-SA 3.0
2014-06-17T16:25:50.467Z
There was a comment over at G+ that stated that Nathan's plugin uses blockSetClass: http://imperavi.com/redactor/docs/api/#api-blockSetClass which adds a class to the wrapper element. If you want to write a plugin yourself checkout the Redactor api, otherwise ask Nathan if he has an idea.
Victor
CC BY-SA 3.0
2014-06-17T19:43:41.993Z
@ChristianSeelbach I just created a plugin that wraps the Styles Redactor plugin, which lets you style inline elements. Haven't tested it thoroughly yet, but have a look at it and see if it works for you: https://github.com/aelvan/RedactorStyles-Craft
André Elvan
CC BY-SA 3.0
2014-06-17T21:42:44.133Z
@aelvan you should consider to open a separate answer to this question and give your new solution the prominence it deserves!
carlcs
CC BY-SA 3.0
2014-06-18T06:59:44.403Z
@ChristianSeelbach Ah, yeah that's maybe the SE way of doing it. Done. :)
André Elvan
CC BY-SA 3.0
2014-06-17T12:51:48.410Z
2015-07-22T23:56:40.420Z
2015-07-22T23:56:40.420Z
Victor
<p>I'm aware that I can customise which buttons is available in the rich text editor. But how can I add custom css styles, either as classes or as inline styles? Do I need to create a plugin for this? If so, how do I add plugins? And, can I change which options are available in the formatting drop down?</p>

<plugins><richtext><editor><redactor>
How do I add custom styles/plugins to the rich text editor in Craft?
# How do I add custom styles/plugins to the rich text editor in Craft?

(Asked by: username_0 on 2014-06-17)

I'm aware that I can customise which buttons is available in the rich text editor. But how can I add custom css styles, either as classes or as inline styles? Do I need to create a plugin for this? If so, how do I add plugins? And, can I change which options are available in the formatting drop down?

**Tags:** plugins, richtext, editor, redactor


---

## 3 answers

### Answer by username_4 on 2014-06-17. Score: 13 | Accepted answer

If by styles you mean the formatting drop-down, just add them in an array:
{
    buttons: ['bold', 'italic'],
    formatting: ['p', 'blockquote', 'h2', 'h3', 'h4', 'SomeHtmlTag']
}

.
If you want to have a button which adds custom CSS-classes, take a look at: Redactor CSS by Nathan Doyle

Update (July 2015)
Craft 2.3.2615 (Dec 2, 2014) and above use Redactor 10, which includes the formattingAdd setting for adding custom styles and classes.
formattingAdd: [
{
    tag: 'p',
    title: 'Red Block',
    class: 'red'
}

> **Comments:**
> **username_0**: What I need is to add either custom CSS classes or inline styles to content in the rich text editor (I've edited the question to clarify).  I guess your answer indicates that to add redactor plugins we need to use a Craft plugin? Can anyone confirm this?  
> **username_4**: I recommend you use classes instead of inline-styling. That's cleaner and will allow you to perform changes in one place. -- If you want to add anything beyond the Redactor config, you have to use a plugin. Here is an example of the Redactor Clips plugin implemented as a Craft plugin: https://github.com/pixelandtonic/RedactorClips  
> **username_0**: Ok, thanks, that answers my questions. :)  
> **username_3**: If you figure out how to apply that class to the text selection instead of the whole block (paragraph), please let me know. I don't know if I should better open a new question for that as this question here is already answered?! Opinion?  
> **username_4**: There was a comment over at G+ that stated that Nathan's plugin uses blockSetClass: http://imperavi.com/redactor/docs/api/#api-blockSetClass which adds a class to the wrapper element. If you want to write a plugin yourself checkout the Redactor api, otherwise ask Nathan if he has an idea.  
> **username_0**: @ChristianSeelbach I just created a plugin that wraps the Styles Redactor plugin, which lets you style inline elements. Haven't tested it thoroughly yet, but have a look at it and see if it works for you: https://github.com/aelvan/RedactorStyles-Craft  
> **username_3**: @aelvan you should consider to open a separate answer to this question and give your new solution the prominence it deserves!  
> **username_0**: @ChristianSeelbach Ah, yeah that's maybe the SE way of doing it. Done. :)  

---

### Answer by username_1 on 2016-03-23. Score: 9

It's worth noting that as of Craft 2.5, it's now using Redactor II, so the above code examples don't work if you have upgraded. Here's a working JSON config example you can build on:
{
    "buttons": ["format","bold","lists","link","file","image"],
    "plugins":["source","fullscreen"],
    "toolbarFixed": true,
    "formatting": ["p", "blockquote", "h2", "h3", "h4", "h5", "h6"],
    "formattingAdd": {
        "para-intro": {
            title: "Paragraph Intro",
            args: ["p", "class", "intro", "toggle"]
        }
    }

}

The code above includes new format for formattingAdd, but also note that some button names have changed, ie format. Source and full screen are now plugins.
You can read up more on the various options for formattAdd at https://imperavi.com/redactor/docs/settings/formatting/
If your Craft install existed prior to 2.5 and you used non standard Redactor configs, it's also worth reading https://craftcms.com/support/redactor-ii-configs which covers updating your Craft Redactor configs to be compatable with Redactor II

> **Comments:**
> **username_2**: This is not entirely accurate. Based on the Redactor docs, you can only add customizations to specific elements.  [formattingAdd](https://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd) can only be applied to p, pre, blockquote, div and heading tags (H1-H6).  So, in your example above, you cannot actually append those args to `<a>` elements.  
> **username_1**: Good catch @ian. Swear I had that working at some point but I don't use much in the way of custom Redactor configs anymore, so it's probably just my memory failing me. Answer edited  

---

### Answer by username_0 on 2014-06-18. Score: 8

username_4 answers my questions regarding the formatting tags and the fact that you need to create a Craft plugin to add Redactor plugins.

Since there wasn't a solution for adding classes on inline elements with custom classes/styles, Nathan's plugin only supports block elements, I created a plugin that wraps the Styles Redactor plugin. You can get it here: <https://github.com/aelvan/RedactorStyles-Craft>

> **Comments:**
> **username_3**: Redactor 10.0, which hopefully finds its way into the next Craft update, now has 140 new APIs including a new [inline formatting function](http://imperavi.com/redactor/docs/api/inline/). I hope this resolves the big issue with removing styles. The behavior of their updated [font-color plugin](http://imperavi.com/redactor/plugins/font-color/) look promising (on the front end side at least!).  
> **username_0**: Yes, I've been looking at the 10.0 docs, and it seems these kind of things will be trivial as soon as Craft updates to it.  

---

