css - TYPO3:如何向 RTE 添加元素，允许用户使用定义的 CSS 类

Question

我希望用户能够在 RTE 中选择文本样式，例如详细信息、重要信息、人员姓名等。所以我想定义一个 CSS，这个选项应该显示在 RTE 中。 CSS 样式应该是 span 并且只设置颜色。

目前我有以下代码:

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)
}

CSS文件的内容是

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

但新添加的样式未显示在下拉列表中(textstyle)。我还在 rtehtmlarea 配置中启用了“附加内联元素”。我还尝试设置 showTagFreeClasses 等等，但没有成功。然后我阅读了缓存问题。我删除了 RTE 缓存和浏览器缓存。还是没有结果。有什么问题吗？

Answer 1

你基本上是在正确的轨道上!

我在使用 inlineStyle 时遇到了很多问题。其中之一是您必须明确取消定义 contentCSS 才能使内联工作(仅设置 ignoreMainStyleOverride = 0 是不够的!):

RTE.default.contentCSS >

我个人更喜欢专用的外部 CSS 文件。重要的是要知道 TYPO3 RTE 真正解析这个 CSS 文件并且只提供那些实际在其中找到的类!
因此，您必须使用 contentCSS 参数来定义 CSS，并且此 CSS 必须真正包含您希望提供给用户的类。以下是您必须如何定义它:

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

CSS 文件必须存在给定的 URL 并且它必须包含您要提供的 CSS 类的定义(如前所述，CSS 文件确实已解析并且缺少的类不会显示在下拉选择器中):

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

还有一个提示:
我建议不要用您自己的类名覆盖 allowedClasses，而是附加到它们:

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

祝你好运!