TYPO3 在 TEXT 内容视图中向 UL 后端添加样式类

Question

在 TYPO3 中，我在页面上添加了一个项目符号列表作为“文本内容/元素”。

工作正常，但布局不适用于网站的其他部分。 现在，如果我有一个 CSS 类“cmsms_timeline”可以为项目符号列表提供更好的布局，我如何将该类添加到 TYPO3 中的 UL，所以我不需要转到“HTML”内容并添加该类。

我添加了 CSS，我只需要知道如何添加它，我需要进入“HTML”视图然后添加类吗？我可以从我的 CSS 文件中获取 Content 元素以使用我的类吗？ 可以使用 csc-default 查看它。

<!--  CONTENT ELEMENT, uid:29/text [begin] -->
<div id="c29" class="csc-default">
<!--  Text: [begin] -->
    <ul type="disc">...</ul>
<!--  Text: [end] -->
    </div>

UDPATE

我正在运行 TYPO3 v. 6.1 (Fluid/Extbase)。

您好，我已尝试为 MASTER 页面 TSConfig 添加此内容。

RTE.default.contentCSS = fileadmin/templates/add/css/style.css
RTE.default.showTagFreeClasses = 1
RTE.default.proc.allowedClasses := addToList(cmsms_timeline)

当我参考我的样式表并添加 cmsms_timeline 时，我会突出显示项目符号点，我可以选择块样式的项目，但它不显示 cmsms_timeline。

在 WEB -> 信息 -> 页面 TSconfig -> RTE 下。默认情况下我可以看到我有

[contentCSS] = fileadmin/templates/add/css/style.css 
[showTagFreeClasses] = 1

，所以它从 TSConfig 中获取信息。

我的 Style.css 文件中有这段代码。

.cmsms_timeline {
  position:relative;
  margin:-11px 0 0 0;
  padding:0 0 37px 29px;
  list-style:none;

}

.cmsms_timeline li {
  position:relative;
  padding-top:24px;
}

.cmsms_timeline li:before,
.cmsms_timeline:before {
  position:absolute;
  top:-2px;
  left:0;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:1px;
  height:28px;
  background:rgba(0, 0, 0, .08);
  content:'';
}

.cmsms_timeline:before {
  top:auto;
  bottom:11px;
  left:29px;
}

.cmsms_timeline li a {
  position:relative;
  padding-left:13px;
  -webkit-transition:all .3s ease-in-out;
  -moz-transition:all .3s ease-in-out;
  -ms-transition:all .3s ease-in-out;
  -o-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
}

.cmsms_timeline li a:hover {padding-left:19px;}

.cmsms_timeline li a:before {
  position:absolute;
  top:5px;
  left:-2px;
  width:5px;
  height:5px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  background:rgba(0, 0, 0, .2);
  content:'';
  -webkit-transition:background .3s ease-in-out;
  -moz-transition:background .3s ease-in-out;
  -ms-transition:background .3s ease-in-out;
  -o-transition:background .3s ease-in-out;
  transition:background .3s ease-in-out;
}

我错过了什么。

Answer 1

标准 RTE 编辑器 (rtehtmlarea) 可以通过解析您为其设置的 CSS 文件来填充类列表，因此您只需在该 CSS 文件中定义 ul.cmsms_timeline。手册内容：

包含样式定义的 CSS 文件 应用于编辑的内容。 此文件中定义的选择器也将在块中使用 样式和文本样式选择列表。

配置示例：

RTE.default.contentCSS = fileadmin/template/rte.css

该设置将被插入到（最好是根）页面属性中的 TSconfig 字段中。您可以打开 WEB -> Info -> Page TSconfig -> RTE. 来查看所有 RTE 设置。请注意，每个数据库表可能都有自己的配置（例如RTE.tt_content.），因此请确保您的默认设置不会被特定表覆盖。

另请注意，每次更改文件后，您可能需要在浏览器中打开此文件或清除浏览器的缓存。这是为了确保您的浏览器缓存文件的当前版本，以便 RTE 使用它。

一旦设置好，您就可以简单地在 RTE 中分配类，方法是在您之后从“块样式”选择框中选择它...

a) ...突出显示所有列表项。

b) ...单击任何列表项后，单击 RTE 底部显示的 Path: body » ul » li 中的 ul。

Answer 2

RTE 有两个预定义的列表类：action-items 和 component-items（action-items-ordered 和 component-items-ordered 用于 OL 列表），您最容易在样式表中采用它们（只需复制声明您的cmsms_timeline 中的一个）。

要将类设置为整个列表，只需用鼠标选择其所有项目，然后 RTE 将启用 块样式 选择。

PS。添加自定义/附加类需要付出很多努力，可以在 google 中轻松找到：
'typo3 rte 自定义块样式'，但对于快速样式，我认为这不值得。