![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() | |||||
Een Wysiwyg-editor met upload-mogelijkheidHet jammere is dat we tot nu toe geen figuren hebben kunnen invoegen in onze pagina’s en artikelen. We hebben ook geen tekstopmaak (vet, tekstkleur en –grootte) en hyperlinks kunnen invoegen. We willen hier nu verandering in brengen. Dit doen we door een teksteditor of ook wel wysiwyg-editor in te voegen. Wysiwyg staat voor What You See Is What You get. Je moet echter meerdere modules installeren voor dit resultaat te bekomen. De wysiwyg-editorAllereerst gaan we de wysiwyg-editor installeren waardoor je tekstopmaak kan toevoegen in je artikelen. Ga naar http://drupal.org/project/wysiwyg. Download en installeer de module. Activeer de module Wysiwyg. IMCEWanneer je straks afbeeldingen wil kunnen invoegen, moet je de modules imce (http://drupal.org/project/imce) en imce-wysiwyg bridge (http://drupal.org/project/imce_wysiwyg) downloaden en installeren. Activeer de modules. CKeditor of TinyMCEEr zijn meerdere mogelijkheden: CKeditor en TinyMCE zijn de meest gekende teksteditors. Beiden zijn zeer aan te raden. Kies achter één van beiden voor Download. Drupal helpt je ook met te vermelden waar je de uitgepakte versie van de download moet plaatsen. · Voor TinyMCE: http://tinymce.moxiecode.com/download.php (main package) · Voor CKeditor: http://ckeditor.com/download · Voor FCKeditor: http://ckeditor.com/download (er is een verschil tussen CK en FCK) Download één van beide editors. In deze cursus gaan we TinyMCE gebruiken. Pak het bestand uit in een map fckeditor of tinymce. Plaats de uitgepakte map in C:\wamp\www\drupal\sites\all\libraries. Let op, de map libraries moet je eerst zelf aanmaken. Ga nu in Drupal opnieuw naar Beheren – Site-instellingen – wysiwyg of vernieuw je venster. Alles juist configurerenGa naar Instellingen in het adminmenu. Klik op Wysiwyg profiles. Krijg je dit niet te zien? Maar eerder dit: Dan heb je zonet een fout gemaakt. Check of je de map libraries in de juiste map gezet hebt (in sites/all/). Kijk goed na dat je tinymce goed uitgepakt hebt (geen map in een map). Let op TinyMCE versie 3.3.9.3 werkt niet! Wij kiezen bij elk formaat voor TinyMCE. Kies voor Opslaan. Als je nu gaat kijken bij het maken van een pagina/artikel, dan kan je al gebruik maken van de teksteditor. Dat is al mooi gelukt! Alleen… we vinden de knop niet terug om tekst een kleur te geven… En figuren uploaden en invoegen lukt ook niet. TinyMCE configurerenGa opnieuw naar Instellingen in het adminmenu. Klik op Wysiwyg profiles. Klik op Bewerken naast Full HTML. Plaats vinkjes bij die zaken die je wenst. Gebruik best deze lijst:
Vink nooit BBCode aan! Kies voor Opslaan. Het valt nog aan te raden om bij de instellingen bij CSS, h1 in de lijst toe te voegen en de editor CSS op editor default CSS te zetten. Anders wordt de achtergrondkleur van de editor aangepast naar die van de template. Wanneer je nu een artikel/pagina maakt, kan je al wat meerdere opties kiezen in de teksteditor! Let op: kies onder de teksteditor voor Full HTML! Nu willen we nog figuren willen uploaden en invoegen. Wanneer we nu
een figuur willen invoegen, door op het knopje Door te
klikken op Door te klikken op Uploaden, kan je bladeren naar een figuur. Je kan deze dadelijk al laten omzetten naar een thumbnail als je een vinkje plaatst. Let wel op dat dit vervormde afbeeldingen zijn. Klik op Je kan ook zien hoe groot het bestand is, hoe breed/hoog en wanneer het toegevoegd werd. Wanneer je
deze afbeelding wil invoegen, klik je op Je kan echter
een geuploade foto ook nog verwijderen door te klikken op Door te
klikken op Typ een breedte OF hoogte in. De andere waarde wordt automatisch berekend. Klik op Afmetingen aanpassen en de afbeelding wordt aangemaakt. Bij het invoegen van de afbeelding wordt steeds nog gevraagd of je geen beschrijving wil intypen. Dit kan je best doen, want het doet je site beter scoren in Google. |
|||||
![]() |
Drupal 7, deel 1- CMS | pagina laatst gewijzigd op 17/01/2011 | Onze cursussen vallen onder copyright! | ![]() |
![]() |