rtgx

RTE htmlarea

Vytvorenie nových štýlov

Úprava súboru rte.css

Príklad pre vytvorenie triedy tabuľky bez okrajov:

table.noBorders, table.noBorders td, table.noBorders th {
border: none;
}
td, th {
padding: 3px 8px;
}

Nová trieda má názov noBorders - ten je dôležitý v ďalšom kroku.

Konfigurácia RTE editora

Určíme meno triedy noBorders pre BE modul RTE editora (červenou).

RTE.classes {
noBorders.name = Tabulka bez okrajov
image_left.name = Obrazok vlavo
image_right.name = Obrazok vpravo
}

Najprv vyprázdnime zoznam pôvodných tried pre tabuľky a pridáme triedu do zoznamu. Vyprázdňovanie zoznamu nie je bezpodmienečne nutné, ale ak chceme mať na výber zoznam len tých tried, ktoré sa dajú použiť, tak to spravíme. Ak vytvárame viacero tried, oddeľujeme ich čiarkou (pozri classesImage).

RTE.default {
...
# Content formating Classes ###
classesParagraph = text
classesCharacter = text
classesAnchor >
classesAnchor = linkBold
classesImage >
classesImage = image_left, image_right
classesTable >
classesTable = noBorders

...
}

Nakoniec nesmieme zabudnúť preidať triedu do zoznamu tried povolewných pre výstup na frontend, inak zmeny na stránke neuvidíme a RTE nám neumožní tieto triedy vkladať do obsahu.

RTE.config.tt_content.bodytext.proc.allowedClasses = text, noBorders

Po vyčistení cache pamätí môžeme novú triedu používať.

TSconfig - komentovaný výpis

# Názvy CSS tried v BE pre RTE editor ###

RTE.classes {
noBorders.name = Tabulka bez okrajov
image_left.name = Obrazok vlavo
image_right.name = Obrazok vpravo
}

RTE.default {

# Zoznam povolených ovládacích tlačidiel ###
showButtons = blockstylelabel, blockstyle, textstylelabel...

# CSS triedy na formátovanie obsahu ###
classesParagraph = text
classesCharacter = text

# Pre odkazy ###
classesAnchor >
classesAnchor = linkBold

# Pre obrázky ###
classesImage >
classesImage = image_left, image_right

# Pre tabuľky ###
classesTable >
classesTable = noBorders

# Súbor s CSS štýlmi pre RTE ###
contentCSS = fileadmin/uk/css/rte.css

showTagFreeClasses = 1
enableWordClean = 1
# for firefox ###
useCSS = 0
}

# Povolené CSS triedy pre frontend ###
RTE.config.tt_content.bodytext.proc.allowedClasses = text, noBorders

# Povolenie atribútov tagu P ###
RTE.default.proc.entryHTMLparser_db.tags {
p.fixAttrib.align.unset >
p.allowedAttribs = class,style,align
}

# Povolenie tagov STRIKE a U ###
RTE.default.proc.entryHTMLparser_db.removeTags := removeFromList(strike)
RTE.default.proc.entryHTMLparser_db.removeTags := removeFromList(u)

# Nepovolené tagy ###
RTE.default.removeTags = center, font, o:p, sdfield

# Vyprázdnenie zoznamov štandardných tried ###
# pre rôzne druhy odkazov ###
RTE.classesAnchor {
externalLink.image >
externalLink.titleText >
externalLink.altText >
externalLinkInNewWindow.image >
externalLinkInNewWindow.titleText >
externalLinkInNewWindow.altText >
download.image >
download.titleText >
download.altText >
mail.image >
mail.titleText >
mail.altText >
}
 
MS Word dokument RTE htmlarea, 18.4 (kB)