Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T08:50:34.550Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T08:53:34.417Z
Answers.Text: Try adding `clear: true` to the `formattingAdd` setting. This was introduced in the very latest Redactor update.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T08:59:28.003Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T09:02:38.387Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T09:09:40.520Z
Answers.Text: 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.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T09:10:51.480Z
Answers.Text: 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.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T09:25:36.440Z
Answers.Text: I updated question with redactor.json file What I've tried on, but it still does that.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T09:34:15.553Z
Answers.Text: Precisely, when writing text it must to be clean tag marking and W3C valid.  @carlcs Thank you for all time spent with this question.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T09:37:03.793Z
Answers.Text: With the example settings above you end up with clean and valid HTML tags. It's just the user experience that's sub optimal.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-02T09:39:42.960Z
Answers.Text: Next time, when it's above optimal, I try it :)
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-01T16:58:32.947Z
Answers.LastActivityDate: 2015-04-02T09:48:54.190Z
Answers.LastEditDate: 2015-04-02T09:48:54.190Z
Answers.UserDisplayName: carlcs
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-03T09:16:06.237Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-03T10:19:43.323Z
Answers.Text: 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/
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-03T10:19:51.870Z
Answers.Text: 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.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-03T10:21:00.237Z
Answers.Text: Dominic that's what I already do, setting the active state that is.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-03T10:32:26.803Z
Answers.Text: 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.
Answers.UserDisplayName: carlcs
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-03T10:52:28.650Z
Answers.Text: 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.
Answers.UserDisplayName: Dominik Krulak
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2015-04-02T14:15:32.623Z
Answers.LastActivityDate: 2022-11-15T02:42:55.583Z
Answers.LastEditDate: 2022-11-15T02:42:55.583Z
Answers.UserDisplayName: carlcs
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-01T17:19:56.817Z
Comments.Text: "it's horrible to create a text with redactor." – Yep. Many bugs!
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-02T09:40:45.297Z
Comments.Text: Dominic, what inline style are you actually missing? **Strong** and *em* are already there and can easily be disabled by pressing that button again.
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-02T09:57:36.150Z
Comments.Text: 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`.
Comments.UserDisplayName: Dominik Krulak
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-02T10:01:49.927Z
Comments.Text: You should use the buttons for those tags (if available) and not the formatting dropdown.
Comments.UserDisplayName: carlcs
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-02T10:03:02.123Z
Comments.Text: Yes, I will do it, when too many complaints about editing.
Comments.UserDisplayName: Dominik Krulak
Tags: <control-panel><redactor>
Title: Apply inline styles to selected text in Redactor
ThreadText: # 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`](http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd) setting. There's an [example editor](http://imperavi.com/redactor/examples/formatting-add/) 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`](http://imperavi.com/redactor/docs/settings/formatting/#setting-formattingAdd) 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.
  
  ![Override inline style set with <code>formattingAdd</code> setting](https://i.sstatic.net/ZalMK.png)
  
  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.  @username_1 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](http://buildwithcraft.com/docs/rich-text-fields#redactor-configs) (→ 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](https://github.com/username_1/craft-redactorinlinestyles)
  
  ![Redactor Inline Styles](https://i.sstatic.net/yKSCC.png)
  
  **Update:** Redactor got updated to 10.0.9 with Craft 2.3.2642. This [fixes a bug](http://imperavi.com/redactor/log/) that made it impossible to switch back to inactive state on inline styles. Yay!
  
  > **Comments:**
  > **username_0**: Real investigator @username_1. 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.  
  
  ---
  
  