2

I added a custom formattingAdd to my Standard.json file in my Redactor config. It's supposed to add the attribute data-aos="fade-right" to a paragraph tag. The "Animate" format option is showing up in the CP, but when I select that format the code doesn't change (it stays just a normal p without the data-aos="fade-right attribute).

{
"buttons": ["html", "formatting", "bold", "italic", "unorderedlist", "orderedlist", "link"],
  "plugins": ["fullscreen", "video"],
  "linkNewTab": true,
  "toolbarFixed": true,
  "formatting" : ["animate", "h1", "h2", "h3", "h4", "h5", "h6", "p"],
  "formattingAdd": {
    "animate": {
      "title": "Animate",
      "args": ["p", "data-aos", "fade-right", "toggle"]
    }
  }
}

I've tried this with classes as well, like this:

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

but the note class isn't added to the p tags either.

Any ideas why the attribute and class aren't showing up in the p tags?

1

Try this for data attributes:

"formattingAdd": {
    "add-animate": {
        "title": "Animate",
        "api": "module.block.format",
        "args": {
            "tag": "p",
            "attr": {
                "data-aos": "fade-right"
            },
            "type": "toggle"
        }
    }
}

This for classes:

"formattingAdd": {
    "add-note": {
        "title": "Note",
        "api": "module.block.format",
        "args": {
            "tag": "p",
            "class": "note"
        }
    }
}

redactor settings formatting

| improve this answer | |

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.