Forum

Thread tagged as: Question, Problem, Redactor

Add special formatting to Redactor

I want to add a CSS-class to internal links in Redactor. I added in the config-file the «formattingAdd» object found in Redactor settings. Unfortunately it does not work however the class is visible in the dropdown of Redactor. Your help is much appreciated.

config.formattingAdd = [{
    "tag": "a",
    "title": "Smooth scrolling",
    "class": "page-scroll"
}] ;
Martin Stettler

Martin Stettler 0 points

  • 3 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Unfortunately it does not work

How is it failing?

It does not add the CSS-class. The tag is still without.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Which version of Redactor are you using?

I am using the New Redactor 3.

Drew McLellan

Drew McLellan 2638 points
Perch Support

It does sound like something more in the Redactor camp than anything to do with Perch.

Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Martin,

If you only need the CSS class to target the internal links with Javascript (and not to apply any styling) to use for smooth scrolling, you could target internal links directly with Javascript instead.

Or you could use a library like Zen Scroll which doesn't require you to add any CSS classes to your internal links.

You're right, Hussein, thanks for your reply. In the meantime I solved it with Javascript. However, sometimes it would be nice to add a special style... I'll keep trying.

Martin, did you get this working? I just came up against it, too.

Hi Montgomery

Yes, I found a documentation on the website of Redactor: https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd

Here's an example of how you can add special styles to your config-file:

config.formattingAdd = {
        "red-p-add": {
            title: 'Red Paragraph',
            api: 'module.block.format',
            args: {
                'tag': 'p',
                'class': 'red-styled'
            }
        }
    };

Awesome. Thank you, Martin!

You're welcome. Could you please mark it as solutioned for other users?