door: Patrick Broens

Het is mogelijk om HtmlArea RTE volledig naar je hand te zetten qua styling, zodat de content er in de RTE net zo uit ziet als in de pagina die aan de bezoeker getoond wordt. Dit is belangrijk, omdat de backendgebruiker natuurlijk al in het backend wil zien wat er in het frontend gaat gebeuren. We praten niet voor niets over WYSIWYG. In dit document leg ik de basis uit.

Basisinstellingen

In dit document ga ik er vanuit dat je bij de instellingen van HtmlArea RTE in de Extension Manager de Default Configuration Settings op Typical hebt gezet.

Configuratie

De meeste configuratie vindt plaats in de pageTSconfig van de rootpagina van de website. Mocht dit niet het geval zijn, dan wordt dit aangegeven in de tekst.

Stylesheets

Gebruik van stylesheets

Vanuit het ontwerp en de daaruit vervaardigde XHTML templates en CSS zijn al classes opgenomen voor de styling van de content. Deze classes zijn gedefinieerd in de stylesheet en kunnen ook gebruikt worden voor HtmlArea RTE. Daarom kan in veel gevallen in de RTE dezelfde stylesheet aangeroepen worden als in de Frontend. Echter, HtmlArea RTE kan niet omgaan met overerving, dus zal in sommige gevallen een aparte stylesheet opgebouwd moeten worden. Meer hierover wordt hier onder duidelijk.

Koppelen van een stylesheet

Bij de 'Default Configuration Settings > Typical' wordt er een stylesheet met default waarden gekoppeld aan de RTE. Deze bevat vooringestelde classes die gebruikt kunnen worden in de RTE. Wij gaan deze niet gebruiken.

Een stylesheet wordt ingelezen met

RTE {

        default {

         contentCSS = fileadmin/styles/RTE.css

     }

}

waarbij 'fileadmin/styles/RTE.css' natuurlijk vervangen dient te worden door je eigen stylesheet.

Op dit moment wordt de standaard stylesheet vervangen door de bovenstaande. Wil je echter ook nog gebruik willen maken van de standaard stylesheet, dan zal

RTE {

        default {

         ignoreMainStyleOverride = 0

       }

}

gezet moeten worden. Indien deze optie op 1 wordt gezet, wat de standaard is, dan zullen alle standaard stijlen vervallen, waaronder ook de stijlen voor links. (external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail). Behalve je alle stijlen zelf opnieuw maakt, is het aan te raden om de oude wel mee te nemen.

Body

Om de stijl van de body te definieren, nemen we de volgende stijl op in de gekoppelde stylesheet:

body.htmlarea-content-body {

 ...

}

Binnen deze definitie kun je de stijl van de body verder invullen

Classes definieren

Ten eerste gaan we classes definieren. Dit zijn de classes die beschikbaar zullen zijn in de RTE. De classnaam is de daadwerkelijke naam van de stijlclass. Deze classes worden later toegewezen aan de diverse tags. Dit is dus een definitie waarmee in eerste instantie verder niets gebeurt. Pas nadat de classes zijn toegewezen aan tags, zoals

, etc., zullen deze actief worden.

Voorbeeld:

RTE.classes {

        mijnEersteClass {

         name = Mijn Eerste Class

          value = font: bold; color: blue;

  }

}

Hierboven zie je de definitie van de class .mijnEersteClass. Deze class zal in de RTE getoond worden met de omschrijving 'Mijn Eerste Class'. Deze omschrijving zal getoond worden in de dropdowns zoals 'Text', 'Paragraph' of 'Type of Paragraph', mits deze hier later aan toegewezen wordt.

Eigenschappen:

• name = De omschrijving van de class, zoals deze getoond wordt aan de gebruiker
• value = De stijl van de class, zoals deze getoond wordt in de dropdowns van de RTE (Let op, dit kan volkomen anders zijn dan de stijl van de class in de bodytekst van de RTE)
• noShow = Boolean; Indien deze aan wordt gezet, zal de stijl van de class niet gebruikt worden in de dropdowns

Hiermee hebben we onze eerste class gedefinieerd. Deze kan nu voor diverse tags gebruikt worden in de RTE.

Classes voor paragrafen <p>, <hx>, <pre> en <address>

Op het moment dat je een class gedefinieerd hebt, gebeurt hier nog niets mee. Deze zullen moeten worden toegewezen aan bepaalde tags in HtmlArea RTE. Voor paragrafen is dit als volgt:

RTE {

        default {

         classesParagraph =  mijnEersteClass

       }

}

In de gekoppelde stylesheet zal deze class natuurlijk ook toegevoegd moeten worden. Is deze niet aanwezig in de stylesheet, dan zal deze alsnog niet getoond worden in de dropdown opties voor paragrafen. Deze dropdownopties zijn dan ook afhankelijk van het format dat gekozen is in het format block (Normal, Heading 1 ... 6, Preformatted, Address) In de stylesheet nemen we deze als volgt op:

p.mijnEersteClass {

  color: #8A0020;

   font-style: italic;

}

Let hierbij goed op dat de 'p' of ander format block element ook opgenomen wordt. Indien niet aanwezig, dan zal de class niet getoond worden in de dropdown opties. We zijn deze class tenslotte hier aan het koppelen aan paragrafen. Hier zie je ook meteen het probleem met overerving waarover eerder gesproken werd. Kijk tevens eens naar de verschillen in styling van de class 'mijnEersteClass' in 'RTE.classes' en de stylesheet zelf. RTE.classes geeft aan hoe deze class visueel getoond wordt in de opties van de dropdown, terwijl de stylesheet een geheel andere stijl meegeeft in de daadwerkelijke bodytekst. Natuurlijk moeten deze gelijk aan elkaar zijn. De reden waarom dit onafhankelijk van elkaar is in te stellen is omdat bijvoorbeeld in de dropdownopties zaken als 'margin' of 'padding' liever niet meegenomen dienen te worden. RTE.classes zal dan ook in sommige gevallen een simpelere versie bevatten dan de uiteindelijke definitie van de class in de stylesheet, en dus in de bodytekst van de RTE en de webpagina. ClassesParagraph heeft in deze instelling maar één class. Mocht je ook de standaard classes of een deel hiervan willen gebruiken, kijk dan in de oorspronkelijke instelling van deze waarde in 'Web > Info > Page Tsconfig > RTE.default.classesParagraph' en bepaal hieruit welke classes toegevoegd moeten worden. Vergeet hierbij niet om 'RTE.default.ignoreMainStyleOverride = 0' te zetten.

Classes voor tekst <span>

Hierover hoeft bijna niets extra's vermeldt te worden. De volgende instelling zorgt ervoor dat een ook een class 'mijnEersteClass' kan hebben:

RTE {

        default {

         classesCharacter =  mijnEersteClass

       }

}

Let op dat ook voor de 'span' een definitie opgenomen moet worden in de stylesheet. Als zowel bovenstaande als deze

p.mijnEersteClass,  span.mijnEersteClass{

    color: #8A0020;

   font-style: italic;

}

Classes voor andere elementen

Ook voor andere elementen zijn classes toe te voegen. Omdat dit een document is om de basis weer te geven ga ik hier niet te diep op in. Het aanpassen van deze elementen wordt gedaan middels classesTable, classesTD, classesLinks en classesAnchor. De werking van alle elementen behalve classesAnchor is hetzelfde.

Renderen van classes

HtmlArea RTE zal bovenstaande classes gebruiken in de editor. Maar als dit document vervolgens opgeslagen wordt, zullen de toegevoegde classes verdwijnen. Dit heeft er mee te maken dat deze ook toegestaan moeten worden tijdens de verwerking door de server. Om deze classes toe te laten is de volgende instelling nodig:

RTE {

                proc.allowedClasses = mijnEersteClass

}