TYPO3 Agency - coding, design and website development

Rich Text Editor: Štýl odkazu

Najprv predvedieme použitie preddefinovaných štýlov a potom si ukážeme definíciu vlastného štýlu odkazu.
Použitie preddefinovaných štýlov je jednoduché - podľa toho, aký typ odkazu vložíme (interná stránka Typo3, externá stránka, email, odkaz na súbor), RTE automaticky nastaví príslušný štýl. Tento prednastavený štýl samozrejme môžeme neskôr zmeniť.
Takže nám stačí vyrobiť CSS a základné potreby štýlov odkazov máme pokryté.

Obrázok ukazuje štandardné typy odkazov RTE z nastavenia Typical, použité sú štyri štýly.
Vyzerajú rovnako, pretože zatiaľ nemáme nastavené žiadne CSS:

Štandardné typy odkazov RTE

Nižšie máme nastavenie odkazu "Page >" (preddefinovaný štýl internal-link):

Odkaz typu Stránka v RTE

Page TS config

RTE.default {
    contentCSS = fileadmin/cmstypo3_v3/css/rte_links.css
    showTagFreeClasses = 0
    enableWordClean = 1
    useCSS = 0
}

RTE.default.FE < RTE.default

Úprava CSS pre prednastavené štýly (rte_links.css)

a.internal-link {
color: #666666;
}
a.external-link-new-window {
color: #ff6666;
}
a.mail {
color: #6666ff;
}
a.download {
color: #66cc66;
}

TS setup

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

Po predošlých nastaveniach sa nám odkazy pekne "vyfarbia" podľa priradeného štýlu (na frontende aj backende):

Štandardné typy odkazov RTE s nastaveným CSS

 

Definícia vlastného štýlu odkazu

Pridáme štýl odkazu bold-link pre typ odkazu page (odkaz na internú stránku).
Na obrázku je tento štýl použitý na odkaze "Bold link >":

Užívateľsky definovaný štýl odkazu v RTE

Page TS config

RTE.classesAnchor {
boldLink {
class = bold-link
type = page
titleText = LLL:fileadmin/cmstypo3_v3/xml/locallang.xml:bold-link
}
}

RTE.default {
proc.allowedClasses := addToList(bold-link)
buttons {
link {
properties.class.allowedClasses := addToList(bold-link)
}
}
contentCSS = fileadmin/cmstypo3_v3/css/rte_links.css
showTagFreeClasses = 0
enableWordClean = 1
useCSS = 0
}

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

RTE.config.tt_content.bodytext.proc.allowedClasses := addToList(bold-link)

CSS (súbor rte_links.css)

Do súboru pridáme tento blok:

a.bold-link {
color: #666666;
font-weight: bold;
}

TS setup

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

Výsledok

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

<ul>
<li><a href="index.php?id=34" title="Opens internal link in current window" class="internal-link" >Page &gt;</a></li>
<li><a href="http://www.sitename.com/" title="Opens external link in new window" target="_blank" class="external-link-new-window" >External page &gt;</a></li>
<li><a href="mailto:email@email.com" title="Opens window for sending email" class="mail" >Email &gt;</a></li>
<li><a href="fileadmin/cmstypo3_v3/img/magnetica-logo.png" title="Initiates file download" class="download" >File &gt;</a></li>
<li><a href="index.php?id=34" title="Bold link" class="bold-link" >Bold link &gt;</a></li>
</ul>