TYPO3 Agency - coding, design and website development

Rich Text Editor: Štýl textu

Budeme definovať vlastné štýly častí textov v obsahu.
Je to veľmi podobné ako vlastné štýly odstavcov.
Aj preto je na porovnanie v TS config uvedená spoločná konfigurácia RTE pre štýly odstavcov aj štýly textov.

Najprv možnosti RTE podľa štandardného nastavenia Typical:

Štýly textu: RTE štandardné nastavenie Typical

Definícia vlastného štýlu textu

Vo výbere štýlu textu budeme mať definované dva nové štýly - Dôležité a Poznámka:

Užívateľsky definované štýly textu v RTE

CSS (súbor rte_test.css)

p.ul-header, span.ul-header {
font-size: 18px;
font-style: italic;
color: #f18400;
font-weight: bold;
}

span.note-gray {
color: #CCCCCC;
}

Jazykový súbor XML (locallang.xml)

Definuje názvy štýlov textu.

<?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="important">Important</label>
<label index="note">Note</label>
</languageKey>
<languageKey index="sk" type="array">
<label index="important">Dôležité</label>
<label index="note">Poznámka</label>
</languageKey>
</data>
</T3locallang>

Page TS config

RTE.classes >
RTE.classes {
ul-header {
name = LLL:fileadmin/cmstypo3_v3/xml/locallang.xml:important
value = color: #F18400;
}
note-gray {
name = LLL:fileadmin/cmstypo3_v3/xml/locallang.xml:note
value = color: #CCCCCC;
}
}

RTE.default {
proc.allowedClasses >
proc.allowedClasses = ul-header, note-gray
buttons {
blockstyle.tags {
div.allowedClasses = ul-header
}
textstyle.tags {
span.allowedClasses = ul-header, note-gray
}
}
contentCSS = fileadmin/cmstypo3_v3/css/rte_test.css
showTagFreeClasses = 0
enableWordClean = 1
useCSS = 0
}

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

RTE.config.tt_content.bodytext.proc.allowedClasses = ul-header, note-gray

Výsledok

<p><span class="ul-header">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit.</p>
<p class="ul-header">Phasellus id eros eleifend, interdum sem vitae, ultrices ligula.</p>
<p><span class="note-gray">Nullam vel mauris</span> vel enim pharetra mollis vel id est...</p>
...