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:

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

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):

 

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 >":

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>