<p>All of Redactor's default Formatting Styles are block elements. But you can add your own styles to it by making use of the newish <a href="http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd" rel="nofollow noreferrer"><code>formattingAdd</code></a> setting. There's an <a href="http://imperavi.com/redactor/examples/formatting-add/" rel="nofollow noreferrer">example editor</a> on the Imperavi website where they added multiple custom styles to it. Some of them are inline styles (try the style "Big Red" for example).</p>

<p>One thing to note here is that it adds the format to the existing ones. To prevent your style from doing so you have to add <a href="http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd" rel="nofollow noreferrer"><code>clear: true</code></a> to your style settings.</p>

<pre><code>formattingAdd: [
  {
    tag: 'span',
    title: 'Normal inline text',
    clear: true
  },
  {
    tag: 'span',
    title: 'Big Red',
    style: 'font-size: 20px; color: red;',
    class: 'span-big-red',
    clear: true
  },
]
</code></pre>

<p><strong>Update:</strong> I just tried to remove inline styles by applying my "Normal inline text" style to it and it first seemed not to work. But then I did a new text selection that spanned a greater portion of text and it worked. That's a good sign, but still no real solution.</p>

<p><img src="https://i.sstatic.net/ZalMK.png" alt="Override inline style set with &lt;code&gt;formattingAdd&lt;/code&gt; setting"></p>

<p>As Imperavi didn't respond to previous Email I wrote them (not sure if it's because we, Craft users, are not direct customers of them?), I am going to ask P&amp;T to make them aware of this bug.</p>

CC BY-SA 3.0
2015-04-02T08:50:34.550Z
This is exactly, What I was playing around long time. Go to [http://imperavi.com/redactor/examples/formatting-add/] and perform highlighting by any tag and than try to change it back to normal text. And when you want to `formattingAdd` all text's htmlTags, than it starts really messing around. E.g: Once you write in `<em>` and than you want to write in `<code>` tag, `</em>` doesn't close, before starting writing into `<code>`, but you actually write within `<em></em>` tags. So it looks like this: `<em><code>text</code></em>`, which is not valid.
Dominik Krulak
CC BY-SA 3.0
2015-04-02T08:53:34.417Z
Try adding `clear: true` to the `formattingAdd` setting. This was introduced in the very latest Redactor update.
carlcs
CC BY-SA 3.0
2015-04-02T08:59:28.003Z
I had it with and without. Didn't help. I think I'm gonna go for codeView editing, as It's sure and stressless way.
Dominik Krulak
CC BY-SA 3.0
2015-04-02T09:02:38.387Z
But your answer would be the way to do it. Not with the result as I would expect, because of that bug, or maybe not enough knowledge How to set it up right.
Dominik Krulak
CC BY-SA 3.0
2015-04-02T09:09:40.520Z
The problem probably is not with your custom style, but with the default "Normal text" paragraph style, that doesn't affect or touch any inline styles set. It should better be renamed to "Normal paragraph" and a new style "Normal text" should set the inline style.
carlcs
CC BY-SA 3.0
2015-04-02T09:10:51.480Z
Try what I posted with the update to my answer, I think this should work and you end up with a style-less span element, that maybe even gets removed on save.
carlcs
CC BY-SA 3.0
2015-04-02T09:25:36.440Z
I updated question with redactor.json file What I've tried on, but it still does that.
Dominik Krulak
CC BY-SA 3.0
2015-04-02T09:34:15.553Z
Precisely, when writing text it must to be clean tag marking and W3C valid.  @carlcs Thank you for all time spent with this question.
Dominik Krulak
CC BY-SA 3.0
2015-04-02T09:37:03.793Z
With the example settings above you end up with clean and valid HTML tags. It's just the user experience that's sub optimal.
carlcs
CC BY-SA 3.0
2015-04-02T09:39:42.960Z
Next time, when it's above optimal, I try it :)
Dominik Krulak
CC BY-SA 3.0
2015-04-01T16:58:32.947Z
2015-04-02T09:48:54.190Z
2015-04-02T09:48:54.190Z
carlcs
<p>Some inline styles which are missing in the default Redactor toolbar can easily be added by editing your <a href="http://buildwithcraft.com/docs/rich-text-fields#redactor-configs" rel="nofollow noreferrer">Redactor config file</a> (→ craft/config/redactor/).</p>
<pre><code>{
  buttons: ['bold', 'italic', 'deleted', 'underline']
}
</code></pre>
<p>The <code>formattingAdd</code> setting, to add custom styles to the format dropdown, seems to be unpredictable with inline styles (see my other answer). But I noticed that all default formatting styles in there are block-type styles (<code>p</code>, <code>h1</code>, etc) and I actually think it's good to keep them separated from inline styles.</p>
<p>So in my opinion, inline styles should get their own buttons, and that's why I just made this little plugin.</p>
<p><a href="https://github.com/carlcs/craft-redactorinlinestyles" rel="nofollow noreferrer">Redactor Inline Styles</a></p>
<p><img src="https://i.sstatic.net/yKSCC.png" alt="Redactor Inline Styles" /></p>
<p><strong>Update:</strong> Redactor got updated to 10.0.9 with Craft 2.3.2642. This <a href="http://imperavi.com/redactor/log/" rel="nofollow noreferrer">fixes a bug</a> that made it impossible to switch back to inactive state on inline styles. Yay!</p>

CC BY-SA 3.0
2015-04-03T09:16:06.237Z
Real investigator @carlcs. Installed it, tried it and it starts to work just like I've imagined. I'm on my way to add more styles. When I'll be done, I can update your code with styles. Anyway, I've encountered on a little problem. The button won't turn off in redactor. E.g I write with <code> button, and than I want to carry on in <p> or any other tag. It won't escape the activated tag.
Dominik Krulak
CC BY-SA 3.0
2015-04-03T10:19:43.323Z
I've searched and found out, that active state must to be defined in config file. See documentation at http://imperavi.com/redactor/docs/settings/buttons/
Dominik Krulak
CC BY-SA 3.0
2015-04-03T10:19:51.870Z
Yes, that's a bug with Redactor you will also have with default inline styles like `strong`. Nothing that can be fixed with a plugin I'm afraid.
carlcs
CC BY-SA 3.0
2015-04-03T10:21:00.237Z
Dominic that's what I already do, setting the active state that is.
carlcs
CC BY-SA 3.0
2015-04-03T10:32:26.803Z
The problem seems to be fixed with Redactor 10.0.9 (→ see [release notes](http://imperavi.com/redactor/log/)). Craft still comes with 10.0.8, will report that to P&T so that we will get that bugfix with the next Craft release. The example pages on imperavi.com look to behave just like it should, you can compare the `strong` button behavior for example.
carlcs
CC BY-SA 3.0
2015-04-03T10:52:28.650Z
Exactly What I've noticed  at imperavi.com  today. Yesterday, the redactor  didn't behaved like today. Hopefully, it will fix the problem. Also I've noticed with `paragraphize` set to `false`, it actually wraps inline tags wit `<p>` tag. I don't know, If I have something wrong set, or it comes as a bug from redactor.
Dominik Krulak
CC BY-SA 4.0
2015-04-02T14:15:32.623Z
2022-11-15T02:42:55.583Z
2022-11-15T02:42:55.583Z
carlcs
<p>I'm aware, that this question is a little bit out of scope to Craft, but It relates, when redactor is part of Craft.</p>

<p>I was playing around and I must tell, that it's horrible to create a text with  redactor. <strong>Especially</strong>, if you need insert a <code>htmlTag</code> within <code>paragraph</code>. </p>

<p>In myredactor.json file all formatting features are set according to documentation, but I found out, that redactor by default, doesn't support highlighting text, only through <a href="http://imperavi.com/redactor/docs/api/selection/" rel="nofollow">API</a></p>

<p><strong>Update</strong></p>

<p>Example: Here at stackexchange, you can highlight text to <code>code</code> or <strong>bold</strong> or ...etc. in very lovely and clever way. To do it in redactor by highlighting text and selecting a type format from dropdown menu, imposible ... yet.</p>

CC BY-SA 3.0
2015-04-01T17:19:56.817Z
"it's horrible to create a text with redactor." – Yep. Many bugs!
carlcs
CC BY-SA 3.0
2015-04-02T09:40:45.297Z
Dominic, what inline style are you actually missing? **Strong** and *em* are already there and can easily be disabled by pressing that button again.
carlcs
CC BY-SA 3.0
2015-04-02T09:57:36.150Z
It's not that much about , What style or tag I'm missing. It's that it doesn't work, when I want to disable it. I always stay in the same style or tag. But anyway, tags I want to use are: `em`,  `strong`,  `code`,  `del`,  `ins`,  `mark`, `q`, `abbr`, `dfn` and `small`.
Dominik Krulak
CC BY-SA 3.0
2015-04-02T10:01:49.927Z
You should use the buttons for those tags (if available) and not the formatting dropdown.
carlcs
CC BY-SA 3.0
2015-04-02T10:03:02.123Z
Yes, I will do it, when too many complaints about editing.
Dominik Krulak
<control-panel><redactor>
Apply inline styles to selected text in Redactor
# Apply inline styles to selected text in Redactor

(Asked by: username_0 on 2015-04-01)

I'm aware, that this question is a little bit out of scope to Craft, but It relates, when redactor is part of Craft.

I was playing around and I must tell, that it's horrible to create a text with redactor. **Especially**, if you need insert a `htmlTag` within `paragraph`.

In myredactor.json file all formatting features are set according to documentation, but I found out, that redactor by default, doesn't support highlighting text, only through [API](http://imperavi.com/redactor/docs/api/selection/)

**Update**

Example: Here at stackexchange, you can highlight text to `code` or **bold** or ...etc. in very lovely and clever way. To do it in redactor by highlighting text and selecting a type format from dropdown menu, imposible ... yet.

**Tags:** control-panel, redactor
> **Comments:**
> **username_1**: "it's horrible to create a text with redactor." – Yep. Many bugs!  
> **username_1**: Dominic, what inline style are you actually missing? **Strong** and *em* are already there and can easily be disabled by pressing that button again.  
> **username_0**: It's not that much about , What style or tag I'm missing. It's that it doesn't work, when I want to disable it. I always stay in the same style or tag. But anyway, tags I want to use are: `em`,  `strong`,  `code`,  `del`,  `ins`,  `mark`, `q`, `abbr`, `dfn` and `small`.  
> **username_1**: You should use the buttons for those tags (if available) and not the formatting dropdown.  
> **username_0**: Yes, I will do it, when too many complaints about editing.  

---

## 2 answers

### Answer by username_1 on 2015-04-01. Score: 3 | Accepted answer

All of Redactor's default Formatting Styles are block elements. But you can add your own styles to it by making use of the newish formattingAdd setting. There's an example editor on the Imperavi website where they added multiple custom styles to it. Some of them are inline styles (try the style "Big Red" for example).
One thing to note here is that it adds the format to the existing ones. To prevent your style from doing so you have to add clear: true to your style settings.
formattingAdd: [
  {
    tag: 'span',
    title: 'Normal inline text',
    clear: true
  },
  {
    tag: 'span',
    title: 'Big Red',
    style: 'font-size: 20px; color: red;',
    class: 'span-big-red',
    clear: true
  },
]

Update: I just tried to remove inline styles by applying my "Normal inline text" style to it and it first seemed not to work. But then I did a new text selection that spanned a greater portion of text and it worked. That's a good sign, but still no real solution.

As Imperavi didn't respond to previous Email I wrote them (not sure if it's because we, Craft users, are not direct customers of them?), I am going to ask P&T to make them aware of this bug.

> **Comments:**
> **username_0**: This is exactly, What I was playing around long time. Go to [http://imperavi.com/redactor/examples/formatting-add/] and perform highlighting by any tag and than try to change it back to normal text. And when you want to `formattingAdd` all text's htmlTags, than it starts really messing around. E.g: Once you write in `<em>` and than you want to write in `<code>` tag, `</em>` doesn't close, before starting writing into `<code>`, but you actually write within `<em></em>` tags. So it looks like this: `<em><code>text</code></em>`, which is not valid.  
> **username_1**: Try adding `clear: true` to the `formattingAdd` setting. This was introduced in the very latest Redactor update.  
> **username_0**: I had it with and without. Didn't help. I think I'm gonna go for codeView editing, as It's sure and stressless way.  
> **username_0**: But your answer would be the way to do it. Not with the result as I would expect, because of that bug, or maybe not enough knowledge How to set it up right.  
> **username_1**: The problem probably is not with your custom style, but with the default "Normal text" paragraph style, that doesn't affect or touch any inline styles set. It should better be renamed to "Normal paragraph" and a new style "Normal text" should set the inline style.  
> **username_1**: Try what I posted with the update to my answer, I think this should work and you end up with a style-less span element, that maybe even gets removed on save.  
> **username_0**: I updated question with redactor.json file What I've tried on, but it still does that.  
> **username_0**: Precisely, when writing text it must to be clean tag marking and W3C valid.  @carlcs Thank you for all time spent with this question.  
> **username_1**: With the example settings above you end up with clean and valid HTML tags. It's just the user experience that's sub optimal.  
> **username_0**: Next time, when it's above optimal, I try it :)  

---

### Answer by username_1 on 2015-04-02. Score: 2

Some inline styles which are missing in the default Redactor toolbar can easily be added by editing your Redactor config file (→ craft/config/redactor/).
{
  buttons: ['bold', 'italic', 'deleted', 'underline']
}

The formattingAdd setting, to add custom styles to the format dropdown, seems to be unpredictable with inline styles (see my other answer). But I noticed that all default formatting styles in there are block-type styles (p, h1, etc) and I actually think it's good to keep them separated from inline styles.
So in my opinion, inline styles should get their own buttons, and that's why I just made this little plugin.
Redactor Inline Styles

Update: Redactor got updated to 10.0.9 with Craft 2.3.2642. This fixes a bug that made it impossible to switch back to inactive state on inline styles. Yay!

> **Comments:**
> **username_0**: Real investigator @carlcs. Installed it, tried it and it starts to work just like I've imagined. I'm on my way to add more styles. When I'll be done, I can update your code with styles. Anyway, I've encountered on a little problem. The button won't turn off in redactor. E.g I write with <code> button, and than I want to carry on in <p> or any other tag. It won't escape the activated tag.  
> **username_0**: I've searched and found out, that active state must to be defined in config file. See documentation at http://imperavi.com/redactor/docs/settings/buttons/  
> **username_1**: Yes, that's a bug with Redactor you will also have with default inline styles like `strong`. Nothing that can be fixed with a plugin I'm afraid.  
> **username_1**: Dominic that's what I already do, setting the active state that is.  
> **username_1**: The problem seems to be fixed with Redactor 10.0.9 (→ see [release notes](http://imperavi.com/redactor/log/)). Craft still comes with 10.0.8, will report that to P&T so that we will get that bugfix with the next Craft release. The example pages on imperavi.com look to behave just like it should, you can compare the `strong` button behavior for example.  
> **username_0**: Exactly What I've noticed  at imperavi.com  today. Yesterday, the redactor  didn't behaved like today. Hopefully, it will fix the problem. Also I've noticed with `paragraphize` set to `false`, it actually wraps inline tags wit `<p>` tag. I don't know, If I have something wrong set, or it comes as a bug from redactor.  

---

