Inhalt in li-Tags im TYPO3-RTE wrappen

In einer ordered list <ol> sollten die Aufzählungszeichen in einer Farbe und der Text in einer anderen Farbe sein. Mit CSS lässt sich die Farbe bequem ändern, wirkt sich aber immer sowohl auf die Nummerierung als auch auf den Text aus. Also brauchts im <li>-Tag einen weiteren Tag um dem Text eine eigene Farbe zu geben. Der einfache Weg wäre nun, die <li>-Tags mit der parseFunc neu zu rendern und anstatt des <li>|</li> einfach <li><div>|</div></li> ausgeben zu lassen. Dazu brauchts im setup-Typoscript nur ein paar Zeilen:

lib.parseFunc_RTE.tags.li = TEXT
lib.parseFunc_RTE.tags.li {
    current = 1
    wrap = <li><div>|</div></li>
}

Dann hat man aber immer den <div>-Tag. Und eventuell kommt damit auch mal so ein Code zustande

<ol>
    <li>
        <div>
            some text
            <ol><li><div>sublist</div></li></ol>
        </div>
    </li>
</ol>

Und für einen Puristen ist es hier überflüssig, dass die innere <ol> auch im <div>-Tag ist. Ich wollte also sowas:

<ol>
    <li>
        <p>some text</p>
        <ol><li><p>sublist</p></li></ol>
    </li>
</ol>

Dazu muss zunächst der <li>-Tag zusätzlich als externalBlock in der lib.parseFunc_RTE definiert werden:

lib.parseFunc_RTE.externalBlocks = table,blockquote,ol,ul,li,div

Anschließend muss beim <ol>-Tag das rekursive Parsen aktiviert werden:

lib.parseFunc_RTE.externalBlocks.ol.callRecursive = 1

Und zum Schluss muss auch für den <li>-Tag das rekursive Parsen aktiviert werden:

lib.parseFunc_RTE.externalBlocks.li.callRecursive = 1

Dadurch wird der Inhalt innerhalb des <li>-Tags nochmal durch die parseFunc geschickt und es gelten automatisch so Regeln wie wrapNonWrappedLines. Und genau das wrapNonWrappedLines erzeugt hier den gewünschten Effekt ;-). Da nimmt einem TYPO3 die ganze Arbeit quasi schon ab…

Da man nur beim <ol>-Tag das rekursive Parsen aktiviert hat wirkt sich das ganze bei der <ul> nicht aus. Da ist es ja auch nicht nötig, denn das listbullet einer <ul> lässt sich per CSS leicht austauchen und muss auch nicht automatisch durchnummeriert werden.

Leider funktioniert das ganze nur fürs Frontend. Wer also sein CSS auch im RTE im Backend verwendet, bekommt hier eine leicht falsche Darstellung bei der der Text innerhalb des <li>-Tags in der Farbe der Aufzählungszeichen dargestellt wird. Hat hier irgend jemand vieleicht eine Lösung?

Getagged mit: , , ,
Veröffentlicht unter TYPO3 Technik
3 Kommentare auf “Inhalt in li-Tags im TYPO3-RTE wrappen
  1. chris sagt:

    hallo marco,

    schöner post!
    ich versuch das prinzip gerade anzuwenden. allerdings möchte ich gerne den inhalt von tags innerhalb von | mit einem wrappen.

    ziel:
    |

    mein versuch:
    lib.parseFunc_RTE.externalBlocks. = ul,li,a
    lib.parseFunc_RTE.externalBlocks.ul.callRecursive = 1
    lib.parseFunc_RTE.externalBlocks.li.callRecursive = 1
    lib.parseFunc_RTE.tags.link = TEXT
    lib.parseFunc_RTE.tags.link{
    typolink.wrap = |
    typolink.ATagBeforeWrap = 1
    }

    resultat:
    |

    hier wird zusätzlich ein leeres erzeugt und in jeder liste vor das erste gesetzt.
    hast du einen tipp für mich?

    danke & gruß,
    chris

  2. chris sagt:

    ups, da wurde wohl die tags gefressen oO

    ziel:
    ul li a span

    resultat:
    ul p li a span

    wobei das p leer und ungewollt ist. 🙂

  3. chris sagt:

    habs.

    lib.parseFunc_RTE.tags.link{
    typolink.wrap = span|span
    typolink.ATagBeforeWrap = 1
    }

    lib.parseFunc.tags.link{
    typolink.wrap = span|span
    typolink.ATagBeforeWrap = 1
    }

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*