18 november 2017
Webdesign & <? php /* CSS
Studies
 
 
 
 
 
PHP - Diverse Handleidingen Installatie TinyMCE Editor in Drupal 22 mei 2009

Installatie van de TinyMCE Editor met Nederlandse Spellingscontrole in Drupal

Zie ook
Nederlandse Gebruikerhandleiding TinyMCE:
http://www.dutchcms.nl/vragen/werkenmettinymce 
Technische tip voor het aanpassen van TinyMCE:
http://www.dutchcms.nl/handleiding/tipsentrucks

Inleiding

Op deze pagina vind je informatie hoe je de TinyMCE Editor moet installeren in Drupal met Nederlandse interface en Nederlandse Spellingscontrole. Omdat ik weet hoe frustrerend het is om overal op het internet informatie vandaan te zoeken om iets werkend te krijgen heb ik deze handleiding geschreven. Oorspronkelijk heb ik hem geschreven voor de doeners-Wiki van vereniging Open Domein die met het CMS systeem Drupal werken. Als je precies de stappen volgt in deze handleiding heb je aan het einde een werkende TinyMCE Editor in Drupal met Nederlandse interface en Nederlandse en Engelse Spellingscontrole.

Inhoud:
1 Wysiwyg API
2 TinyMCE WYSIWYG Editor
3 Nederlandse interface
4 Nederlandse Spellingscontrole

Wysiwyg API

De TinyMCE Editor Module wordt NIET langer rechtstreeks als module in de modulemap van Drupal geinstalleerd. In plaats daarvan is er door het Drupal team een nieuwe module ontwikkeld die op haar beurt vanuit het Admin gedeelte van Drupal het beheer heeft over een 7 tal WYSIWYG Eitors die je naar keuze van de website van de makers zelf kunt downloaden en installeren. Deze zijn niet allemaal even goed en sommige worden door maar 1 persoon ontwikkeld of hebben geen Nederlandse Interface of mogelijkheid tot (freeware !) spellingscontrole. TinyMCE komt na onderzoek goed uit de bus. Op deze manier hoeft het Drupal Team niet langer deze editors aan te passen en te verpakken als Drupal module.

Wysiwyg API kan gedownload worden van: http://drupal.org/project/wysiwyg.

Na "unzippen" komt er een map genaamd wysiwyg. Deze kun je in zijn geheel met Ftp overzetten in de map modules van Drupal. Log vervolgens in op het beheerdersgedeelte van Drupal met een gebruikersnaam die beheerdersrechten heeft en ga naar Drupal Admin > beheren > Site-contructie > Modules en activeer deze nieuwe module door hem aan te vinken en te klikken op Instellingen opslaan.

Vervolgens om deze te configureren ga je terug naar Beheer > Site-instellingen > Wysiwyg (Configure client-side editor profiles). Pas nadat je vervolgens een WYSIWYG Editor met Ftp geinstalleerd hebt kun je hier verder gaan en de instellingen van die Editor beheren. Hoe dat moet lees je hieronder.

TinyMCE WYSIWYG Editor

De TinyMCE Editor kan gedownload worden van: http://tinymce.moxiecode.com/download.php.

Kies voor het zip bestand wat staat bij Main package. Na unzippen krijg je een map genaamd TinyMCE met daarin 2 mappen: examples en jscripts en het bestand changelog.txt. Ga vervolgens met Ftp naar de Drupal installatie > modules > wysiwyg en maak daarin een map genaamd tinymce. Kopieer IN die map alleen de map jscripts dus NIET de map examples. Uiteindelijk wordt het pad dus: modules > wysiwyg > tinymce > jscripts > tiny_mce. Als je nu terug gaat op de beheerderspagina van Drupal naar Beheer > Site-instellingen > Wysiwyg en er zijn geen andere editors naast de TinyMCE editor ook gedownload dan is TinyMCE nu de standaard editor. Door te klikken op Bewerken kun je de diverse onderdelen van de editor beheren zoals Basic setup, Buttons and plugins, Editor appearance, Cleanup and output en CSS. Ik heb daar de volgende instellingen gewijzigd:

Basic setup:
Vinkje weg bij Allow users to choose default en vinkje weg bij Show enable/disable rich text toggle link. Hierdoor is de editor altijd zichtbaar in een tekstinvoervak. De taal staat nu nog op en. Pas als je het Nederlandse taalpakket hebt geinstaleerd kun je deze op nl zetten.

Buttons and plugins:
Standaard zijn niet alle plugins = knoppen in de editor geactiveerd van TinyMCE. Je kunt dus ook vinkjes zetten bij alle andere opties zodat je van de volledige functionaliteit van de editor gebruik kan maken.

Editor appearance:
Kies bij Button alignment voor Left want dit staat het mooist in de editor.

Cleanup and output:
Hier heb ik overal een vinkje bijstaan ook bij de onderste "Force cleanup on standard paste" als experiment.

CSS:
Hier kun je je eigen CSS integreren in de editor. Erg handig als je weet wat je doet. Standaard staat deze bij editor CSS op Use Them CSS. Bij block formats heb ik div toegevoegd.

Nederlandse interface

Om de interface dus de knoppen en tekst van de editor Nederlandstalig te maken moet je het Nederlandstalige Language Pack downloaden van de website van TinyMCE. Het adres is http://tinymce.moxiecode.com/download_i18n.php maar als het wijzigt ga er dan heen via de download pagina. Vink je taal aan (Dutch; Flemish) en klik onderaan op Download. Er wordt een zip bestand gemaakt met daarin alleen de door jouw gekozen taal. Het bestand heet tinymce_lang_pack.zip. Na unzippen komen er drie mappen: langs, plugins, themes. Daarin bevindt zich dezelfde mappen structuur als die van TinyMCE met daarin de taalbestanden. Per map moeten de taalbestandjes in precies dezelfde map komen van TinyMCE. Je kunt dit op 2 manier doen. Of je doorloopt ieder mapje op je pc en kopieert dan dat bestandje naar precies hetzelfde mapje van je ge-unzipte TinyMCE op je computer en vervolgens kopieer je geheel TinyMCE weer naar je Drupal installatie OF je opent gelijk je Ftp programma en zorgt dat je aan de ene kant de taalmappen hebt en aan de andere kant op de server je TinyMCE map en doet in feite hetzelfde maar kopieert ze gelijk in de juiste map op de server.

Je zou zeggen waarom levert TinyMCE deze talen er niet standaard bij. Dit is omdat het anders geen "Tiny" MCE meer is en omdat nieuwe talen op de website ingediend kunnen worden.

Als laatste stap ga je nu terug naar de beheerderspagina van Drupal naar Beheer > Site-instellingen > Wysiwyg > Bewerken > Basic setup en kies je bij Taal voor nl. Je interface is nu Nederlandstalig. In zelfzame gevallen kan het zijn dat het niet gelijk werkt en je even je geschiedenis en tijdelijke bestanden van je browser moet legen en vervolgens even opnieuw moet inloggen op Drupal.

Nederlandse Spellingscontrole

Plugin downloaden:
Om Nederlandse spellingscontrole in de TinyMCE Editor te krijgen, om uberhaupt spellingscontrole in de TinyMCE Editor te krijgen moet je het volgende doen. Ga naar de downloadpagina van TinyMCE: http://tinymce.moxiecode.com/download.php en download de PHP Spellchecker (Spellchecker plugin for TinyMCE with a PHP backend). Na unzippen krijg je een map die heet spellchecker. Deze moet je uploaden naar de pluginmap van TinyMCE dus in het geval van Drupal: modules > wysiwyg > tinymce > jscripts > tiny_mce > plugins. Standaard bevindt zich daar al een pluginmap genaamd spellchecker. Die map kun je gewoon verwijderen en de nieuwe uploaden.

Code toevoegen:
Dacht je dat jer er nu was. Nee, want het ontwikkelingsteam van Drupal maakt het ons niet gemakkelijk alhoewel het verder natuurlijk geweldig is dat ze deze Drupal module gemaakt hebben. Je moet nu zelf een stukje Php code toevoegen aan het bestand tinymce.inc. Je vindt dit bestand in de map wysiwyg > editors. Open het bestand tinymce.inc en ga onderaan in dit bestand naar function wysiwyg_tinymce_plugins($editor). Voeg daar tussen de overige plugins of als laatste de volgende code toe:

'spellchecker' => array(
'path' => $editor['library path'] .'/plugins/spellchecker',
'buttons' => array('spellchecker' => t('Spellingscontrole')),
'url' => 'http://wiki.moxiecode.com/TinyMCE:Plugins/spellchecker',
'internal' => TRUE,
'load' => TRUE,
),

Sla de wijzigingen op en upload dit bestand met Ftp en vervang het oude bestand door het nieuwe. Hernoemen van het oude bestand naar bijvoorbeeld tinymce-oud.inc geeft een Php foutmelding dus je moet echt vervangen. Nu moet je de plugin nog activeren op de beheerderspagina van Drupal via Beheer > Site-instellingen > Wysiwyg > Bewerken > Buttons and plugins en een vinkje zetten bij Spellingscontrole en de wijzigingen opslaan.

Instellen Nederlandse taal als standaard:
Je hebt nu een tiental talen tot je beschikking voor spellingscontrole in de TinyMCE editor. De standaard taal is Engels. Je kunt dit tijdelijk veranderen door in de Editor naast het spellingscontrole-symbooltje op het dropdownmenu te klikken en te kiezen voor Dutch. Natuurlijk wijzigt dit zich weer naar standaard Engels als je weer opnieuw inlogt op Drupal. Wil je dit standaard altijd op Dutch/Nederlands instellen doe dan het volgende:

Ga weer naar het hierbovengenoemde bestand tinymce.inc en ga in het bestand naar function wysiwyg_tinymce_settings. Voeg daar ONDERAAN IN de array $init de volgende code toe:

'spellchecker_languages' => '+Nederlands=nl,Engels=en',

De standaardtaal is dan Nederlands en als tweede optie heb je Engels tot je beschikking. Totaal ziet de code er dan zo uit:

$init = array(
'button_tile_map' => TRUE, // @todo Add a setting for this.
'document_base_url' => base_path(),
'mode' => 'none',
'plugins' => array(),
'theme' => $theme,
'width' => '100%',
// Strict loading mode must be enabled; otherwise TinyMCE would use
// document.write() in IE and Chrome.
'strict_loading_mode' => TRUE,
// TinyMCE's URL conversion magic breaks Drupal modules that use a special
// syntax for paths. This makes 'relative_urls' obsolete.
'convert_urls' => FALSE,
'spellchecker_languages' => '+Nederlands=nl,Engels=en',
);

De beste spellingscontrole:
Extra informatie over de spellchecker vind je op http://wiki.moxiecode.com/TinyMCE:Plugins/spellchecker. Daar kun je lezen dat er drie (in principe 2) Spellchecker_engines zijn waar je gebruik van kan maken. Niet tegelijkertijd dus je moet kijken welke de beste is. Dit zijn GoogleSpell (Uses a remote google service) en PSpell (Uses the built in PSpell module in PHP). Ik heb beide getest met wat willekeurige foute en goede Nederlandse tekst en PSpell kwam als beste uit de bus. Hij gaf meer en betere suggeties voor een woord. GoogleSpell daarentegen gaf bij sommige goede woorden aan dat ze fout waren en gaf veel minder of foute suggesties. Het leek wel alsof GoogleSpell ook de door gebruikers verkeerd in een zoekmachine ingetikte woorden als suggestie gaf.

Standaard staat toch GoogleSpell ingesteld als de Spellchecker_engine. Je moet dit dus veranderen. Dit doe je in de TinyMCE spellchecker plugin map in het bestand config.php. Daar zet je twee schuine streeptje // voor de GoogleSpell engine en haal je de 2 schuine streepjes weg bij PSpell. Dus:

//$config['general.engine'] = 'GoogleSpell';
$config['general.engine'] = 'PSpell';

Sla je wijzigingen op en vervang via FTP het oude bestand met het nieuwe bestand.

Zie ook
Zoek je meer Tip en Trucks om de TinyMCE Editor aan te passen kijk dan even bij de Tips en Trucks van Dutch CMS waar ook behulpzame informatie staat die mij ook weer vele uren gekost heeft om uit te vogelen (vooral als je niet weet dat je eerst je browservenster moet sluiten en eventueel zelfs geschiedenis moet wissen voordat je aanpassingen in de TinyMCE Editor van toepassing worden).

Nederlandse Gebruikerhandleiding TinyMCE: http://www.dutchcms.nl/vragen/werkenmettinymce 

22 mei 2009
A. L. / Webdesign, PHP en HTML