Custom Paragraph Classes in Typo3 RTE

Sometimes it is important to apply custom classes to paragraphs in RTE. Typo3 allows you to customize the "Block style" list easily. All it takes is a few lines of Typo Script in page TSconfig.

Let's add class lead for leading paragraph. We want this class to appear as "Leading paragraph" and be indicated with slightly bigger font on the "Block style" list. Here is how to do it in page TSconfig:

RTE {
   classes.lead {
       name = Leading paragraph
       value = font-size:1.4em;
   }

   default {
       contentCSS = fileadmin/templates/css/rte.css
       proc.allowedClasses = lead
       classesParagraph = lead
   }
}

A few words of explanation:

1. RTE.default.contentCSS defines css file used by RTE to render text in the editing window. It is required that the class we want to add is defined in this file
2. RTE.classes.lead defines the entry for the "Block style" list; the value is inline style used to preview the class in the drop-down
   
3. RTE.default.proc.allowedClasses tells RTE not to strip these classes when saving content to the database
4. RTE.default.classesParagraph associates given class with paragraph, so you can see the selector on the "Block style" list when you choose "Paragraph" from the "Type of block" drop-down.

Further details (and much more) you can find in the page TSconfing documentation.