การเพิ่มแท็กคลาสให้กับองค์ประกอบลูกโดยใช้ blockstyle สำหรับพาเรนต์ (Typo3 6.2.2)

เป็นไปได้ไหมที่จะบอก RTE parser ให้แก้ไข class-attribute ของ direct child-element ทั้งหมดเมื่อมีการเพิ่ม blockstyle ที่กำหนดให้กับ parent-element

แก้ไข 1

หากเนื้อหา RTE เป็นเช่นนี้

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

และฉันเพิ่ม my-custom-class ให้กับ ul-element ผ่าน blockstyle ที่กำหนดใน TS

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

RTE ควรเพิ่ม my-custom-sub-class ให้กับ li-elements ทั้งหมดโดยอัตโนมัติ

<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');

typo3 typoscript rte
person Inceddy    schedule 18.05.2015    source แหล่งที่มา
comment
เรากำลังพูดถึง RTE ใน CMS (เช่น TinyMCE ใน WordPress) ใช่ไหม? หากเป็นเช่นนั้น แสดงว่าเป็นการใช้งานเฉพาะเจาะจงเกินไป ดูด้านล่างสำหรับการกำหนดเป้าหมายองค์ประกอบเฉพาะด้วย CSS แทน   -  person aequalsb    schedule 18.05.2015

คำตอบ (1)


arrow_upward
0
arrow_downward

คุณสามารถใช้สิ่งนี้แทนได้ไหม?

.parent > children จะกำหนดเป้าหมายเฉพาะทายาทสายตรงเท่านั้น (โดยเฉพาะ divs 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 สมัยใหม่แทน

person aequalsb    schedule 18.05.2015
comment
เพียงใช้ css นี่จะเป็นวิธีที่ง่ายที่สุด แต่ฉันคิดว่าฉันสามารถใช้ RTE-blockstyles เพื่อใช้งาน bootstrap List-Group-Feature ทั่วไปได้ - person Inceddy; 18.05.2015
comment
ใช่ แต่การเพิ่มคลาสให้กับเด็กโดยตรงทั้งหมดโดยอัตโนมัตินั้นจะต้องมีโปรแกรมจำนวนมากที่หลายๆ คนคงจินตนาการไม่ออก นอกจากนี้ยังขอให้ RTE รู้จักกับผู้อ่านใจเล็กน้อย หรืออย่างน้อยก็ต้องการอินเทอร์เฟซที่ซับซ้อนเพื่อกำหนดค่า RTE ให้กำหนดคลาสโดยอัตโนมัติ และมันจะจัดการได้ดีเพียงใดในเมื่อหลายคนไม่สามารถจัดการสิ่งที่ง่ายกว่านี้ได้ แล้วการลบคลาสเหล่านั้นออกล่ะ? น่าเศร้า ฉันคิดว่าสิ่งที่คุณถามนั้นเป็นความฝันเล็กๆ น้อยๆ ที่ถูกกำหนดให้กลายเป็นฝันร้าย... - person aequalsb; 18.05.2015
comment
ถ้าอย่างนั้น จะดีกว่าถ้ากำหนดสไตล์บล็อกที่แตกต่างกันสองแบบ อันหนึ่งสำหรับ ul- และอีกอันสำหรับ li-องค์ประกอบ - person Inceddy; 18.05.2015
comment
ทุกสิ่งที่ฉันค้นหาสำหรับที่อยู่ Typo RTE โดยเพิ่มหลายคลาสให้กับองค์ประกอบเดียวกัน แต่ไม่เพิ่มคลาสให้กับองค์ประกอบสืบทอดโดยอัตโนมัติ อีกครั้ง ฉันชอบใช้ CSS เพื่อคว้าสิ่งที่ฉันต้องการโดยเฉพาะ มันทำให้ HTML ที่ได้ผลลัพธ์มีขนาดเล็กลงและทำให้ฉันอ่านได้ง่ายขึ้นด้วย - person aequalsb; 18.05.2015