<p>Try this for data attributes:</p>

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

<p>This for classes:</p>

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

<p><a href="https://imperavi.com/redactor/docs/settings/formatting/#s-formattingadd" rel="nofollow noreferrer">redactor settings formatting</a></p>

CC BY-SA 4.0
2018-11-26T17:48:31.953Z
2018-11-26T17:59:10.423Z
2018-11-26T17:59:10.423Z
HendrikEng
<p>I added a custom formattingAdd to my Standard.json file in my Redactor config. It's supposed to add the attribute <code>data-aos="fade-right"</code> 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 <code>p</code> without the <code>data-aos="fade-right</code> attribute).</p>

<pre><code>{
"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"]
    }
  }
}
</code></pre>

<p>I've tried this with classes as well, like this:</p>

<pre><code>"formattingAdd": {
  "note": {
    "title": "Note",
    "args": ["p", "class", "note"]
  }
}
</code></pre>

<p>but the <code>note</code> class isn't added to the <code>p</code> tags either.</p>

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

<craft3><redactor>
Redactor - formattingAdd isn't changing code
# Redactor - formattingAdd isn't changing code

(Asked by: username_0 on 2018-11-26)

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?

**Tags:** craft3, redactor


---

## 1 answers

### Answer by username_1 on 2018-11-26. Score: 2 | Accepted answer

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


---

