Adding css classes to paragraph tag (no spans!) in RTE/TinyMCE in Umbraco v.7+

gistfile1.js

// In \Umbraco\Js\umbraco.controllers.js find this code (line 5429-5432 in version 7.1.3):
else if (rule.selector[0] == "#") {
     r.inline = "span";
     r.attributes = { id: rule.selector.substring(1) };
}

// directly after, add this:
else if (rule.selector.indexOf("p.") == 0) {
    r.classes = rule.selector.substring(2);
    r.block = 'p';
}
// this new code will take styles in the format of "p.someclass"
// and add the css class to p elements,
// or it will convert the containing element to a p element
// eg. h1 to p.someclass


// a few lines after find this code:
r.block = rule.selector;

// directly after, add this:
r.attributes = { 'class' : '' };
// this new code will remove any existing css class
// when we change to a block element, without a css class
// eg. p.someclass will become h1 and not h1.someclass

Thank for this, worked like a charm.

In order to get the same behaviour when using the RTE within a grid layout also needed to update \Umbraco\Js\umbraco.directives.js

AML

Thank you it works like a charm!!!!

Thank you.

Minor note but just to emphasise the rule in your stylesheet cannot be .someclass it must be p.someclass.