Apply inline styles to selected text in Redactor

Question

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

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.

Answer 1

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.

Answer 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 seperated 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!