TYPO3: how to add an element to the RTE, which allows the user to use a defined CSS class

Question

I want that the user should be able to select an textstyle in RTE like Detail, Important, Name of person and so on. So I would like to define a CSS and this option should be shown in RTE. The CSS style should be a span and only setting a color.

Currently I have the following code:

RTE.classes{
  highlight{
      name = test
      value = color:#0A8AD2;
  } 
}

RTE.default{
  ignoreMainStyleOverride = 1 
  useCSS = 1
  contentCSS = fileadmin/templates/css/rte_formats.css
  classesCharacter := addToList(highlight)
  classesParagraph := addToList(highlight)
  proc.allowedClasses := addToList(highlight)
}

The content of the CSS file is

span.highlight, p.highlight {
    color:#0A8AD2;
}

But the new added style isn't shown in the drop down (textstyle). I also enabled "additonal inline elements" in th rtehtmlarea configuration. I also tried to set showTagFreeClasses and so on without success. Then I read about caching problems. I deleted the RTE cache as well as the browser cache. Still no result. What can be wrong?

Jpsy Jpsy · Accepted Answer · 2012-01-05T15:59:20

You are basically on the right track!

I have experienced quite some problems using inlineStyle. One of them being that you have to explicitly undefine the contentCSS to make the inlines work (only setting ignoreMainStyleOverride = 0 is not enought!):

RTE.default.contentCSS >

I personally prefer a dedicated external CSS file. The important thing to know is that the TYPO3 RTE really parses this CSS file and only offers those classes that are actually found in there!
So you have to use the contentCSS parameter to define a CSS and this CSS must really contain the classes that you want to make available to the user. Here is how you must define it:

# TS-Config
RTE.default.ignoreMainStyleOverride = 1
RTE.default.contentCSS = fileadmin/templates/css/rte_formats.css

The CSS file must exist at the give URL and it must contain a definition for the CSS class that you want to provide (as said the CSS file is really parsed and missing classes will not show up in the dropdown selector):

/* content of rte_formats.css */
/* span. needed for RTE.default.classesCharacter */
/* p.    needed for RTE.default.classesParagraph */
span.highlight, p.highlight{ color:#0A8AD2; }

And one more hint:
I recommend not to overwrite the allowedClasses with your own class name(s), but append to them:

RTE.default.proc.allowedClasses := addToList( highlight, myOtherClass, myThirdClass )

Good luck!

TYPO3: how to add an element to the RTE, which allows the user to use a defined CSS class

1 Answers