2

I'm trying to get the same features I had in Craft 2 in Craft 3 redactor field. This is the code I had in config/redactor/standard.json:

{
    "buttons": ["format","bold","lists","link","file"],
    "plugins": ["fullscreen","table","video"],
    "formatting": ["p"],
    formattingAdd: {
        "heading": {
            title: 'Heading',
            args: ['h2']
        },
        "sub-heading": {
            title: 'Sub-Heading',
            args: ['h3']
        },
        "sub-sub-heading": {
            title: 'Sub-sub-Heading',
            args: ['h4']
        },
        "add-attr": {
            title: 'Make a link a button',
            args: ['div', { 'class': 'button' }]
        }
    }   
}

The Craft 3 changes page says: "All strings must use double quotes rather than single quotes" and that "All object properties (the config setting names) must be wrapped in double quotes". I've tried changing them all and I still get an error. I've looked on the Imperavi Redactor docs pages, but they don't use double quotes and their examples are not in the same format as the craft plugin uses. Some more examples would be useful.

Improve this question
1
  • 1
    In Craft 3, redactor config files need to be valid json. An easy way to check this is with a json validator, e.g.: jsonlint.com
    – Marion Newlevant
    May 7 '18 at 16:57
4

After several iterations I came up with this that works. But still puzzled as when to use [ ] or { }.

{
    "buttons": ["html","undo","format","bold","lists","link","file"],
    "plugins": ["fullscreen","table","video"],
    "formatting": ["p"],
    "formattingAdd": {
        "heading": {
            "title": "Heading",
            "api": "module.block.format",
            "args": {
                "tag": "h2"
            }
        },
        "sub-heading": {
            "title": "Sub-Heading",
            "api": "module.block.format",
            "args": {
                "tag": "h3"
            }
        },
        "sub-sub-heading": {
            "title": "Sub-sub-Heading",
            "api": "module.block.format",
            "args": {
                "tag": "h4"
            }
        },
        "add-attr": {
            "title": "Make a link a button",
            "api": "module.block.format",
            "args": {
                "tag": "div",
                "class": "button"
            }
        }
    }   
}
Improve this answer
1

i have tested it with the latest Craft 3 version and it works if everything is in double quotes:

{
    "buttons": ["format","bold","lists","link","file"],
    "plugins": ["fullscreen","table","video"],
    "formatting": ["p"],
    "formattingAdd": {
        "heading": {
            "title": "Heading",
            "args": ["h2"]
        },
        "sub-heading": {
            "title": "Sub-Heading",
            "args": ["h3"]
        },
        "sub-sub-heading": {
            "title": "Sub-sub-Heading",
            "args": ["h4"]
        },
        "add-attr": {
            "title": "Make a link a button",
            "args": ["div", { "class": "button" }]
        }
    }   
}

Maybe it was only a typo?

Improve this answer
4
  • Thanks NoX, I thought I had tried every combination but as you say I must have had a typo. It is confusing though when you look at the Imperavi docs, as they have different syntax with curly brackets and an api reference.
    – Paul Frost
    May 7 '18 at 20:23
  • Sorry, further testing shows that the formatting is not being applied to the html code. If I select some text and choose "Heading" nothing happens, the text stays as <p> tags. But it did stop the error on page load.
    – Paul Frost
    May 7 '18 at 20:34
  • To be honest, I did not Test if everything is working. I will give it a try this evening - or did you found already a solution?
    – noxify
    May 9 '18 at 7:07
  • Yes, see my answer below
    – Paul Frost
    May 9 '18 at 8:20

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.