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.
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.
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:
** 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:
- Pak het zojuist gedownloade *.zip bestand uit naar een locatie op jouw harde schijf.
- Vervolgens open je jouw FTP programma, bijvoorbeeld FileZilla, en maak je verbinding met de website.
- Blader naar de folder "sites/all/libraries".
- 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.
Achter deze profielen is nu een Edit link beschikbaar geworden, klik hierop.
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.
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.