2

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.

| improve this question | | | | |
  • "it's horrible to create a text with redactor." – Yep. Many bugs! – carlcs Apr 1 '15 at 17:19
  • 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 Apr 2 '15 at 9:40
  • 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 Apr 2 '15 at 9:57
  • You should use the buttons for those tags (if available) and not the formatting dropdown. – carlcs Apr 2 '15 at 10:01
  • Yes, I will do it, when too many complaints about editing. – Dominik Krulak Apr 2 '15 at 10:03
3

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.

Override inline style set with <code>formattingAdd</code> setting

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.

| improve this answer | | | | |
  • This is exactly, What I was playing around long time. Go to [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 Apr 2 '15 at 8:50
  • Try adding clear: true to the formattingAdd setting. This was introduced in the very latest Redactor update. – carlcs Apr 2 '15 at 8:53
  • 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 Apr 2 '15 at 8:59
  • 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 Apr 2 '15 at 9:02
  • 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 Apr 2 '15 at 9:09
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

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!

| improve this answer | | | | |
  • 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 Apr 3 '15 at 9:16
  • I've searched and found out, that active state must to be defined in config file. See documentation at imperavi.com/redactor/docs/settings/buttons – Dominik Krulak Apr 3 '15 at 10:19
  • 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 Apr 3 '15 at 10:19
  • Dominic that's what I already do, setting the active state that is. – carlcs Apr 3 '15 at 10:21
  • The problem seems to be fixed with Redactor 10.0.9 (→ see release notes). 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 Apr 3 '15 at 10:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.