TYPO3 Agency - coding, design and website development

Rich Text Editor: Tabuľka "Zebra"

Zadefinujeme vlastný štýl tabuľky, ktorá bude mať striedavo podfarbené riadky.
Ľudovo sa tomu hovorí "Zebra".

Takto vyzerá štandardná tabuľka v RTE:

Tabuľka v RTE

Možnosti nastavení štýlu tabuľky z RTE štandardného nastavenia Typical (po stlačení tlačidla "Vlastnosti tabuľky"):

Nastavenie štýlu tabuľky v RTE

 

Definícia vlastného štýlu tabuľky

Štandardné nastavenia, ako obvykle, odstránime a zadefinujeme vlastný - table-zebra.
Naštýlovaná tabuľka bude vyzerať takto:

Tabuľka s definovaným štýlom v RTE

Nastavenie štýlu tabuľky table-zebra v RTE:

Nastavenie štýlu tabuľky table-zebra v RTE

CSS (súbor rte_test.css)

table.table-zebra {
border: 0px;
margin: 0px;
padding: 0px;
}

table.table-zebra tr.tr-odd, table.table-zebra tr.thead-odd {
background-color: #D0D0D0;
}

table.table-zebra tr.tr-even, table.table-zebra tr.thead-even {
background-color: #F0F0F0;
}

table.table-zebra th, table.table-zebra td {
border: 0px;
margin: 0px;
padding: 3px 10px;
}

Page TS config

RTE.classes >
RTE.classes {
table-zebra {
name = LLL:fileadmin/cmstypo3_v3/xml/locallang.xml:table-zebra
alternating {
rows {
startAt = 1
oddClass = tr-odd
evenClass = tr-even
oddHeaderClass = thead-odd
evenHeaderClass = thead-even
}
}
}
}

RTE.default {
proc.allowedClasses >
proc.allowedClasses = table-zebra, tr-odd, tr-even, thead-odd, thead-even
buttons {
blockstyle.tags {
table.allowedClasses = table-zebra
tr.allowedClasses = tr-odd, tr-even, thead-odd, thead-even
}
}
contentCSS = fileadmin/cmstypo3_v3/css/rte_table.css
showTagFreeClasses = 0
enableWordClean = 1
useCSS = 0
}

RTE.default.FE < RTE.default
RTE.default.FE.FE >

RTE.config.tt_content.bodytext.proc.allowedClasses < RTE.default.proc.allowedClasses

Typoscript setup

Vkladá CSS súbor do HTML a povoľuje použitie štýlu table-zebra pre frontend.

page.includeCSS {
rte = fileadmin/cmstypo3_v3/css/rte_table.css
}

lib.parseFunc_RTE.externalBlocks.table.stdWrap.HTMLparser.tags.table.fixAttrib.class.list = table-zebra

Jazykový súbor (locallang.xml)

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<meta type="array">
<type>module</type>
</meta>
<data type="array">
<languageKey index="default" type="array">
<label index="table-zebra">Table Zebra</label>
</languageKey>
<languageKey index="sk" type="array">
<label index="table-zebra">Tabuľka Zebra</label>
</languageKey>
</data>
</T3locallang>

Výsledok

Skutočný výstup môžete vidieť tu.

<table class="table-zebra">
<thead>
<tr class="thead-odd">
<th scope="col"> Criterion </th>
<th scope="col"> Description </th>
</tr>
</thead>
<tbody>
<tr class="tr-even">
<td> Name </td>
<td> Name of the extension </td>
</tr>
<tr class="tr-odd">
<td> Ext key </td>
<td> Extension key </td>
</tr>
...
</tbody>
</table>