Dag 18: WYSIWYG editor instellen

Vandaag gaan we een WYSYWYG editor installeren. Met een "What You See Is What You Get" editor krijg je een knoppendoos tot je beschikking waarmee je de berichten en pagina's kunt opmaken. Te denken valt aan vette letters, geordende lijstjes en afbeeldingen invoegen.

In tegenstelling tot een CMS als Wordpress bevat een nieuwe Drupal 7 installatie standaard nog geen WYSIWIG editor, die moeten we dus eerst installeren. Wanneer dat eenmaal is gebeurd kun je per gebruikersrol aangeven welke knoppen beschikbaar moeten zijn. Zo zul je redacteuren wel de mogelijkheid willen geven om linkjes, plaatjes en video's in te voegen, maar klanten die een reactie plaatsen misschien niet.

Een WYSIWYG editor installeren

Het installeren van een editor bestaat uit twee stappen. Het eerste wat we nodig hebben is de WYSIWYG module. Wanneer je dit nog niet hebt gedaan, download, installeer en activeer deze dan volgens de aanwijzingen op dag 4. 

De WYSIWYG module bevat zelf geen editor, maar is wel nodig voor het functioneren ervan. De tweede stap is dan ook het kiezen en downloaden van een editor. Wanneer je naar Instellingen > Wysiwyg profiles gaat krijg je een lijst te zien van alle editors die de WYSIWYG module ondersteunt.

wysiwygprofiles.png

CKEditor en TinyMCE worden het meeste gebruikt en zijn beide veilige keuzes. In deze tutorial kies ik voor CKEditor omdat ik die gewend ben.

Het installeren van een editor gaat iets anders als normaal, want dit moet handmatig gebeuren. Achter elke editor in de lijst bevindt zich een download link, met eronder instructies.

ckeditorinstructies.png

Klik achter CKeditor op de link naar de website en download daar de Drupal versie. Als ze de website ondertussen niet hebben veranderd ziet dat er zo uit:

ckeditordownload.png

** Update: er is ondertussen ook een 4.* branch uitgekomen voor CKEditor. Op dit moment werkt deze nog niet met WYSIWYG. Let er dus op dat je de laatste versie van de 3.* branch download. **

Zoals te lezen in de instructies is het nu een kwestie van de inhoud van het zojuist gedownloade bestand uitpakken en deze plaatsen in de "sites/all/libraries" folder, zodat je de folder "sites/all/libraries/fckeditor" krijgt. Onderneem hiervoor de volgende stappen:

  1. Pak het zojuist gedownloade *.zip bestand uit naar een locatie op jouw harde schijf.
  2. Vervolgens open je jouw FTP programma, bijvoorbeeld FileZilla, en maak je verbinding met de website.
  3. Blader naar de folder "sites/all/libraries".
  4. Sleep hier de uitgepakte fckeditor folder naartoe.

Als het goed is, is CKEditor nu geïnstalleerd.

De editor activeren en instellen

Ga weer naar Instellingen > Wysiwyg profiles. Bovenaan kunnen we nu de CKEditor toewijzen aan een profiel. Deze profielen zijn op haar beurt weer toegewezen aan gebruikersrollen. De nu beschikbare profielen zijn:

  • Full HTML - Standaard toegewezen aan beheerders. Volledige HTML opmaak mogelijkheden, waaronder afbeeldingen.
  • Filtered HTML - Standaard toegewezen aan bezoekers die zijn ingelogd. Beperkte HTML opmaak mogelijkheden, zoals vette letters, cursieve teksten en links.
  • Plain text - Voor gebruiker met rollen waaraan geen enkel profiel is toegewezen. Geen opmaak mogelijkheden, alleen tekst.

Op dit moment maakt iedereen behalve beheerders minimaal gebruik van Filtered HTML profiel, ook anonieme bezoekers. Voor deze website zou het misschien beter zijn als bezoekers het Plain Text profiel krijgen toegewezen, ingelogde bezoekers (klanten) het Filtered HTML profiel en (hoofd)redacteuren en beheerders het Full HTML profiel.

Voor het verloop van deze tutorial maakt het niet uit welke profielen je precies toewijst aan welke rollen en hoeveel rechten iedereen van jou krijgt. Overigens kun je naast het wijzigen van de bestaande profielen ook nieuwe profielen aanmaken. Zo zou je bijvoorbeeld hoofdredacteuren een eigen profiel kunnen toekennen om ze meer mogelijkheden te geven als redacteuren.

Wijs CKEditor toe aan het Full HTML en het Filtered HTML profiel, klik daarna op Save. 

activeren.png

Achter deze profielen is nu een Edit link beschikbaar geworden, klik hierop.

edit.png

Op de volgende pagina kun je tal van opties bepalen, zoals of de editor standaard zichtbaar moet zijn onder Basic setup, welke knoppen zichtbaar moeten zijn onder Buttons and Plugins, op welke positie de editor moet verschijnen onder Editor Appearance, of overbodige HTML opmaak gefilterd moet worden onder Cleanup en Output en welke CSS opmaak gebruikt moet worden in het invoerveld onder CSS.

Voor nu hebben we alleen iets te maken met Buttons and Plugins. Klik op de link om alle opties te zien.

Per knop kun je hier aangeven of deze beschikbaar moeten zijn voor gebruikers die het Full HTML profiel toegewezen hebben gekregen.

Als je vertrouwen hebt in de redacteurs en beheerders dan hoef je je hier niet in te houden, maar voor het overzicht is het wel beter om niet belangrijke knoppen achterwege te houden. Ook zaken als de stijl van het font kun je beter centraal regelen via de CSS bestanden om zo de consitentie binnen de website te behouden. Over het algemeen is het geen goed idee om gebruikers al te veel controle over de opmaak te geven.

Wanneer je klaar bent sla je de wijzigingen op en doe je hetzelfde voor het Filtered HTML profiel, alleen ditmaal ben je nog kritischer over de knoppen die je toewijst. Klanten hebben alleen de mogelijkheid om reacties te plaatsen op nieuwsberichten, en in die reacties wil je waarschijnlijk niet dat ze afbeeldingen plaatsen, en misschien ook wel geen linkjes naar andere websites.

Hoewel de knop om een link toe te voegen er dan wel niet mag zijn, de mogelijkheid om een link toe te voegen door handmatig de html code hiervoor in te voeren is er nog wel. Ook moeten we de profielen nog toewijzen aan de juiste rollen. Deze zaken regelen we via de profielen beheer pagina.

Profielen bewerken

Ga naar Instellingen > Tekstopmaak.

profielbewerken.png

Hier zie je weer dezelfde drie profielen. Een beetje op dezelfde manier als bij het maken en bewerken van content types kun je hier per profiel enkele hoofd-instellingen bepalen. Klik allereerst achter Full HTML op instellen. 
 
 
Je kunt hier eventueel de naam van het profiel veranderen. Onder het kopje rollen geef je aan welke gebruikers toegang hebben tot dit profiel, en daarmee ook de WYSIWYG editor met de meeste opties geactiveerd. Ik kies ervoor om beheerders en alle redacteuren aan dit profiel te koppelen, maar zoals gezegd kun je dit naar eigen inzicht invullen.
 
Aan de Ingeschakelde filters hoeven we niks te veranderen. HTML moet niet als platte tekst getoond, er hoeft geen beperking te zijn aan HTML invoer, een regeleinde moet automatisch omgezet worden naar de juiste HTML opmaak, URLs mogen automatisch omgezet worden naar werkende links (oftewel: wanneer je een webadres volledig vermeldt hoef je hier geen link meer van te maken) en tot slot worden incorrecte HTML codes gecorrigeerd.
 
Vervolgens bewerk je het Filtered HTML profiel. Koppel dit profiel bijvoorbeeld aan geverifieerde gebruiker en Klant. Ditmaal beperken we het HTML gebruik wel. Linkjes staan we wel toe, maar dat is dan ook alles.
 
 
In het menu onder het kopje Filterinstellingen is er de optie bijgekomen om de HTML beperking verder te specificeren. Als je zelfs niet wilt dat klante dikgedrukte teksten en dergelijke gebruiken kun je hier alles verwijderen en alleen de HTML tags voor een link, A, laten staan, en eventueel een blockqoute tag om een tekst als citaat weer te geven.
 
 
Deze instellingen wegen zwaarder de de instellingen van de WYSIWYG editor. Ook al maakt een klant nu een tekst dik met behulp van een knop, op de website zelf zal het resultaat niet zijn te zien. Zorg er dus altijd voor dat deze instellingen corrosponderen met die van de editor, om verwarring te voorkomen.
 
Tot slot bewerk je het Plain text profiel, waar anonieme bezoekers gebruik van zullen maken. Wijs de correcte rol toe en, vink "HTML als platte tekst tonen" aan en vink "URLs naar links omzetten" uit.
 
Wanneer je de wijzigingen hebt opgeslagen kun je het resultaat bekijken door een nieuw content item aan te maken als ingelogde beheerder. Zie je nog geen editor controleer dan of direct onder het invoerveld het juiste profiel is geselecteerd.
 
 

Slot

Je hebt gemerkt dat het nogal wat stappen vergt om een editor te installeren en in te stellen. Maar we zijn nog steeds niet klaar. Je hebt misschien al tevergeefs zitten zoeken naar een knop om een video in te voegen, want die is er niet. Hiervoor zul je weer een aparte module moeten installeren, wat we morgen zullen gaan doen.

In plaats van een WYSIWYG editor zou je ook voor BUEditor kunnen kiezen, meer informatie hierover lees je hier. Je kunt overigens meerdere editors tegelijk installeren en op die manier per rol een verschillende editor gebruiken.

Laatst gewijzigd op: