使用blockstyle为父级添加类标记到子元素(Typo3 6.2.2)

时间:2015-05-18 13:42:42

标签: typo3 typoscript rte

当将定义的块样式添加到父元素时,是否可以告诉RTE解析器修改所有直接子元素的class-attribute?

编辑1

如果RTE内容是这样的

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

我通过TS中定义的blockstyle将“my-custom-class”添加到ul - 元素。

<ul class="my-custom-class">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

RTE应自动将“my-custom-sub-class”添加到所有li - 元素

<ul class="my-custom-class">
   <li class="my-custom-sub-class">Item 1</li>
   <li class="my-custom-sub-class">Item 2</li>
   <li class="my-custom-sub-class">Item 3</li>
</ul>

编辑2 - 解决方法

尽管RTE无法实现,但您仍然可以使用JavaScript动态地实现结果。

// jQuery -> https://jsfiddle.net/du6r7ow1/1/
$('ul.my-custom-class > li').addClass('my-custom-sub-class');

// MooTools -> https://jsfiddle.net/u53516cu/
$$('ul.my-custom-class > li').addClass('my-custom-sub-class');

1 个答案:

答案 0 :(得分:0)

你能用这个吗?

.parent > children将仅定位直接后代(特别是div id = 1和id = 2)

.parent > div {
    border:1px dashed red;
}

<div class="parent">
     <div id="1">this div will get targeted
        <div>this div won't get targeted</div>
        <p>jabberwocky</p>
    </div>
    <div id="2">this div will get targeted
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

只会在两个内部div上放置一个红色虚线边框。

换句话说,不是试图让RTE编辑器动态分配一个类(要求编程过于特别适合广泛使用),而是可以使用CSS更具体地定位元素。

结帐:http://www.w3schools.com/cssref/css_selectors.asp

您可以类似地使用jQuery:例如jQuery('.parent > div').html()

看到您的帖子编辑后

编辑

ul.my-custom-class {
    /* definitions for the ul */
}
ul.my-custom-class > li {
    /* definitions for only the directly descended lis */
}

<ul class="my-custom-class">
   <li>Item 1</li>
       <ul>
           <li>will NOT be affected</li>
           <li>will NOT be affected</li>
       </ul>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

就个人而言,我非常努力避免依赖于能够向元素添加类,而是依赖于现代CSS的特定目标功能