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 >
}