Speciale tekstopmaak direct in de webeditor.

afbeelding van eigenaar

De webeditor (ckeditor) is een plezier om mee te werken. Je hebt er nog meer plezier van als in de Stijl select vakje meteen de tekst opmaak stijlen staan die je veel gebruikt. 

Bijvoorbeeld

De stijlen voor de 'leesmeer' tekst, maar ook de standaard openingsopmaak, of de afsluitzin zoals 'wil je meer weten over ..'. Je kunt natuurlijk altijd een class toevoegen of zelf de opmaak toevoegen door font en stijl te kiezen. Maar nog eenvoudiger is het als de stijl als in de Stijl select (zie afbeelding) beschikbaar is.

Aanpassen ckeditor

Door een kleine aanpassing in ckeditor default.js kan de leesmeer tekst eenvoudig worden geselecteerd en dan gekozen uit de select box.
in ckeditor \sites\all\libraries\ckeditor\plugins\styles\styles\default.js wordt bijvoorbeeld dit toegevoegd:

{name:'meerweten',element:'span',styles:{'font-style':'italic','font-size':'smaller'}},

 

Geavanceerdere uitvoering

Om het nog een stap verder te brengen kun je ook custom classes aan de elementen toekenen. Zoals deze:

{name:'apple: title dun',element:'span',attributes:{'class':'aptitlethin'}},
{name:'apple: title dik',element:'span',attributes:{'class':'aptitlebold'}},
{name:'apple: title small',element:'span',attributes:{'class':'aptitlesmallbold'}},
{name:'apple: bijzin',element:'span',attributes:{'class':'apbyline'}},
 
Dan loop je er tegen aan dat deze classen wel toegekend worden aan de elementen, maar dat je niet in de editor het resultaat ziet. 
Om dat te verbeteren moeten de classes in een stylesheet bekend gemaakt worden.
Dat gaat als volgt.
 
  • kopieer content.css uit de ckeditor directory naar je theme directory en noem het ckeditor.styles.css
  • voeg de classes daar aan toe
  • ga naar admin/config/content/wysiwyg/profile/filtered_html/edit
  • en zet Editor css op Define CSS>
  • vul daarna eronder in /sites/all/themes/[naam van theme]/css/ckeditor.styles.css?v=1
  • en sla op.
  • Doe nogmaals voor de full_html profile.

Cache buster.

De ?v=1 is een toevoeging om dat anders de css niet mee wijzigt. Bij elke wijziging kun je v=1 naar v=2 etc wijzigen waardoor het ververst wordt.

 

Meer weten over dit onderwerp mail ons op [email protected]

shadow