5

I understand that to add a "note" class to the redactor text editor drop down, I need to use formattingAdd. But each iteration I've tried does not work. The example is: https://imperavi.com/redactor/examples/formatting-add/

I used the example, edited it for my needs, and added it to the header of my layout template on the Craft site...

<style>
.article-note {
  font-style: italic;
  font-size: 1.2em;
  font-weight: 700;
}
</style>

<script>
    $(function()
    {
        $('#redactor').redactor({
            focus: true,
            formatting: ['p', 'blockquote'],
            formattingAdd: {          
                "article-note-add": {
                    title: 'Note',
                    args: ['h6', 'class', 'article-note', 'toggle']
                },    
            }
        });
    });
</script>

Didn't work. Also, I didn't know how the textarea in the example is used or where it should go.

A lot of people in the discussion boards I've researched have recommended plugins. I am not interested in a plugin. Both Craft CMS and redactor state that there is a way to do it without a plugin. While it hasn't worked from me so far, I'm sure someone has succeeded and I'm hoping to learn.

  • Are you trying to load Redactor on the front-end of your site? If not, where are you adding that code so it loads in the control panel? – Brad Bell Jul 11 '16 at 23:25
  • Well according to the provided example (see link above) you are supposed to add it to the header of your site. So that is what I did. Didn't work. – Jay247 Jul 12 '16 at 22:05
6

Your example code attempts to create a new Redactor instance, which (as Brad says) won't work inside the control panel (where Craft has created the Redactor instances already).

You can, however, use the Redactor config files to add an element with the classname .note. To do that, add the following to the file config/redactor/Standard.json (or if you configured your RichText field to use a different configuration, the JSON file corresponding to that configuration):

"formattingAdd": {
  "note": {
    "title": "Note",
    "args": ["p", "class", "note"]
  }
}

Note that the first parameter in the args property is the tag which the .note element will use – according to the Redactor docs, only p, pre, blockquote, div and heading tags can be used with formattingAdd.

Also note that unless you add some custom CSS, the .note will – of course – not be styled any differently than a normal paragraph.

Unfortunately, there's no way to add custom CSS and JavaScript to the Control Panel without a custom plugin – either by writing your own or by installing the CP CSS and CP JS plugins.

  • Thank you so much for your help! I had seen this solution in another forum, but the code was incorrect (it didn't have parentheses and, when I added them, it still wouldn't work). I tried your code this morning and it worked perfectly! Also, I appreciate your explanation. Working code is great, but knowing why it works is even better. – Jay247 Jul 13 '16 at 15:52
2

The link you referenced is assuming that you've got full-control over the output/HTML of the page and you've already got an instance of Redactor up-and-running.

In the context of Craft, the only place you have full control over is the front-end of your site, not the control panel. You certainly can include the HTML/CSS/JS to load Redactor on the front-end of your site, in which case you can have the Redactor configuration do whatever you want it to do (including adding classes to the Redactor format list).

In the control panel, you got much more limited options. You can probably pull off what you're looking for by using the CP CSS and CP JS plugins that inject CSS and JS into control panel pages, you'd just want to be sure and target actual pages that have Redactor instances on them.

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.