The TYPO3 RTE is quite flexible. One easily proven aspect, is by the ability to select what CSS styling to apply by highlighting some text and choosing a custom CSS class from a drop-down. Furthermore, making this happen only takes a few minutes.
There’s 2 basic steps to making custom CSS classes available in the RTE.
- Create custom classes in your CSS stylesheet, with only one per line.
- Modify the RTE via Page TSConfig
- Link the RTE to the site CSS stylesheet
- Assign the custom classes to text types
content.css
with custom classes
.coding { font-family: monospace; font-size: 1.1em;} .note {background: #dfd; padding: 1em; border-top: 1px #bdb dotted; border-bottom: 1px #bdb dotted;} .important {background: #ffd; padding: 1em; border-top: 1px #ddb dotted; border-bottom: 1px #ddb dotted;} .warning {background: #fdd; padding: 1em; border-top: 1px #dbb dotted; border-bottom: 1px #dbb dotted;} .float_left { float: left; display:inline; margin-right: 1em; margin-bottom: 0.15em;} .float_right { float: right; display:inline; margin-left: 1em; margin-bottom: 0.15em;} .center { text-align:center; margin: 0.5em auto} /* these are for showing alignment in RTE on the backend */ .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .align-justify { text-align: justify; }
RTE Page TSConfig
RTE { default { # link to site css stylesheet contentCSS = fileadmin/templates/css/screen/content.css # clear typical styling classesAnchor > classesLinks = # set classes available to these properties. Paragraph is another name # for block classesCharacter := addToList(coding, note, important, warning) classesParagraph := addToList(coding, note, important, warning, float_left, center, float_right) classesTD := addToList(sub) classesTable := addToList(full, fixed) # list all available classes here, otherwise they're removed on RTE save proc.allowedClasses := addToList(coding, note, important, warning, float_left, center, float_right, sub, full, fixed) } }
In the above Page TSConfig, we adjust the CSS stylesheet being referenced via contentCSS
. A relative file path is from the website root with TYPO3 installed is sufficient.
Next, as we want to supplement, not replace the classes applicable, we use the addToList
TypoScript function to add our custom CSS classes. These CSS classes are assigned to specific text types, like block text-strings, elements and tables as shown by the classesCharacter
&classesParagraph
samples.
Once you add your custom classes, you must make sure all of them are listed in the proc.allowedClasses
property. Otherwise, your custom classes will not show up.
Reference
- rtehtmlarea – FAQ: How do I configure the editor to use my CSS styles?
- TYPO3 Best Practices
If you’ve got problems or questions, ask them in our comments section.
Petro, the things you’re asking about are found starting with the rtehtmlarea manual at TYPO3.org.
For frontend output handling, that’s TypoScript.
For backend look of text, that’s TSConfig, like above’s contentCSS.
Add styling options to RTE is covered in this post.
Special elements could be handled through additional custom extensions or using content replacers. I’m not sure what exactly you’re asking for.
For external elements like tables, you’ll need some additional TypoScript like
lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list := addToList(responsive)
Hi,
Thanks for you guide, think the extension manual is a bit tricky about this part. =)
When added your code as examle, my “block style” and “text style” gets inactive..
I have copy pasted the code as written in your example..
Hint on what could be wrong?
The idea was to use your example first, and then correct it to fits my needs.
Tomas, Thank you for writing. Are you still using the original RTE TSConfig? If the block and text style seem inactive, it sounds like that you’re not highlighting text that you want to apply those changes too.