How to add custom styles to the UI of redactor

[wallythewebdev]

Hi - I am trying to create a better authoring experience while using redactor.

I would like to be able to add custom styles (or re use already created styles) to the UI of Redactor:

As an example using the example.json file - when you select marked on a section of text it applies a style to that section of text allowing the user to identify a style having been applied there.

Is there a way to add the same effect to custom created styles, so for instance the text that is highlighted would trigger the heading button to become bolder:

Or the Sub heading text would show as larger than it is (i.e. control the font-size like the Heading button does as the tag is a h1).

{
  "buttons": ["link",
              "formatting"],
  "plugins": ["customstyles"],
  "customStyles": {
    "Heading": {
      "args": {
        "tag": "h1",
        "class": "title",
        "type": "toggle"
      }
    },
    "Sub-heading": {
      "args": {
        "api": "module.block.format",
        "tag": "p",
        "class": "body-large",
        "type": "toggle"
      }
    }
  }
}

I did think that this could be achieved re the API of redactor? https://imperavi.com/redactor/docs/api-modules/#s-format

But I am unsure how to format the request into the JSON requirement that custom styles uses. this.app.api('module.block.format', 'h1');

Thanks for any help on this - W

[wallythewebdev]

Ok so,

1) The API does not effect the Appearance of Redactor in Craft - As always (should have figured this out sooner) - CSS controls the style of this plugin.

You can add custom css to the Redactor config folder - config/redactor/<create folder called "resources">/<create folder called "css">/<YOUR CSS file>.css

Redactor will pick up the CSS file that is found here.

If you inspect the redactor plugin via dev tools you can see the required pre fixed to effect the styles of refactor i.e.

.redactor-box .redactor-styles p.body-large {
  font-size: 23px;
}

This all translates into what the Authoring user will see:

2) Adding the redactor custom style does't effect the actual text - so you will need to dual write the CSS unless you can find a better way to do it