12

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?

3 Answers 3

13

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'
}
8
  • 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? Jun 17, 2014 at 14:53
  • 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: github.com/pixelandtonic/RedactorClips
    – Victor
    Jun 17, 2014 at 15:06
  • Ok, thanks, that answers my questions. :) Jun 17, 2014 at 15:17
  • 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
    Jun 17, 2014 at 15:45
  • 3
    @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: github.com/aelvan/RedactorStyles-Craft Jun 17, 2014 at 19:43
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

2
  • This is not entirely accurate. Based on the Redactor docs, you can only add customizations to specific elements. 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
    Aug 4, 2016 at 21:03
  • 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
    Aug 5, 2016 at 14:11
8

Victor 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

2
  • 1
    Redactor 10.0, which hopefully finds its way into the next Craft update, now has 140 new APIs including a new inline formatting function. I hope this resolves the big issue with removing styles. The behavior of their updated font-color plugin look promising (on the front end side at least!).
    – carlcs
    Oct 9, 2014 at 9:08
  • 1
    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. Oct 9, 2014 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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