Joomla! WYSIWYG

Woensdag 21 Juni 2006 16:46 Laatste aanpassing (Maandag 30 Juni 2008 17:56)

Joomla

een aantal WYSIWYG editors vergeleken

Veel editors 

Er zijn veel WYSIWYG editors beschikbaar voor Joomla. De ene beter dan de andere. Ik heb een redelijk aantal getest. Hier volgt een (niet volledig) verslag van mijn ervaringen met enkele van de belangrijkste editors.

Vooraf

Kwesties om scherp in de gaten te houden, zijn de volgende:

• wat gebeurt er als je later van de ene naar de andere wysiwy editor schakelt? Een voorbeeld: stel je hebt met XHTMLsuite gebruik gemaakt van acronyms. Als je nu een content item waarin zo'n acronym gebruikt wordt, gaat bewerken en opslaan met JCE, dan ben je je acronym kwijt: JCE vrwijdert deze code. De algemene vraag is dus: wat doet een wysiwyg editor met code die ze zelf niet ondersteunt?
• wat gebeurt er met pop-up images die in de ene editor gemaakt als je ineens een andere editor gaat gebruiken? Blijven deze pop-up images werken? (JCE maakt mooie pop up images met een thumbnail in de tekst. Wat doet een andere editor hiermee? Omdat ik graag het naadje van de kous weet, heb ik dit uitgezocht: zowel XHTMLsuite als WYSIWYGPRO laten deze image pop up code met rust...). Echter, een site door mij gebouwd is recentelijk gekraakt. Ik heb alles opnieuw geïnstalleerd, en nu werken alle image pop ups niet meer. Komt dit doordat ik nu een andere versie van JCE heb geïnstalleerd heb? Of is het iets anders? Ik kom er vooralsnog niet uit;
• hoe zien de links eruit die door de editor zijn aangemaakt? Zijn ze absoluut of relatief? Wordt de domeinnaam er voorgezet of niet?
• let op het verschil tussen de html die je in de editor ziet, en de html die uiteindelijk in de browser terecht komt: in de laatste is waarschijnlijk de domein naam er voor geplakt, terwijl dat in het editor scherm niet het geval is.
• heb je een optie ergens die de mogelijkheid geeft te kiezen tussen absolute en relatieve URL's? Dus met een leading slash al dan niet?
• wat is precies de verhouding tussen de base-tag (<base xhref="http://www.site.nl/" />) en de wysiwyg editor?

Ik heb zelf nog niet helemaal grip op deze kwesties. Ik zal hier t.z.t. verslag doen van mijn bevindingen. Ik kom liever niet voor onaangename verrassingen te staan als ik eens een site ga verhuizen naar een andere domein naam of als mijn provider besluit de configuratie te veranderen, etc etc.

'Charmes'

"Het is net als MS Word, zo makkelijk", roept iedereen, inclusief mezelf vrees ik. Dat is net niet helemaal waar: het werken met een html wysiwyg editor heeft bepaalde 'charmes' (afhankelijk van welke browser je gebruikt, maar elke browser/editor combinatie heeft zijn nukken):

• plotseling (bij het toevoegen van een ENTER, backspace of je verplaatst de cursor met de muis) springt de cursor helemaal naar boven (of beneden). Vooral in langere teksten is het irritant want je hebt geen idee meer waar je je bevindt in de tekst en moet je de juiste plek, waar je bezig was, weer zien te vinden. Of nog erger: verdwijnt beneden 'onder' de benedenrand zodat je de cursor helemaal niet meer ziet en je eerst naar beneden moet scrollen;
• je hebt een stukje bold gemaakt en je gaat verder op een nieuwe regel en het blijft maar bold. Ook al heb je het uitgezet. Wat je ook doet...
• je drukt op ENTER en je krijgt inderdaad een nieuwe regel, alleen... deze nieuwe regel en de cursor verdwijnen onder uit beeld. Je moet even naar beneden scrollen;

Tip: Vaak wil je een nieuwe regel DIRECT ONDER de vorige regel. Net als in Word!!! Doe dan een SHIFT - ENTER, in plaats van een gewone ENTER. Waarom dat zo is? Dat is gewoon zo.

Het kan erger:

• JCE editor: als je de inhoud uit een tabel cel knipt en ergens anders plakt, en je saved vervolgens, dan is je hele tabel lay-out naar de knoppen (je moet een spatie in de oude cel achterlaten om algehele lay-out verwoesting te voorkomen);
• diverse editors: de editor laat lege tags achter, bijvoorbeeld een lege <h3></h3> helemaal bovenaan. Niet erg want er staat toch niets in? Toch zorgt dit restantje code er soms voor dat de echte tekst met een <h3> eronder nèt iets lager staat, dan in de vorige pagina, zodat het doorklikken een onrustig en minder mooi beeld geeft;
• JCE editor: je hebt een tabel met 2 kolommen en in de linker en rechter cel heb je bovenaan een plaatje met daaronder tekst. Wat je ook doet: het linkerplaatje zit tegen de bovenrand aan en het rechterplaatje weigert dat. Je verwijdert het plaatje en voegt het weer in. Nog eens. Je back spaced helemaal terug, plaatje er weer in. Nog steeds een weigering. Tekst ook verwijderd. Helemaal lege cel en opnieuw beginnen. Plaatje wil NIET tegen de bovenrand gaan zitten. Alle tabel instellingen nagelopen, en ook de instellingen per cel. Het mag niet baten. Uiteindelijk blijkt (door in HTML view te gaan) dat er om het rechterplaatje steeds een paragraaf tag komt te staan: <p><img scr="" /></p> en om het linkerplaatje heb je geen paragraaf tags. Hoe moet dat als je echt geen kaas van de HTML view hebt gegeten?
• XHTMLsuite: probeer eens (in de FireFox browser) vóór een regel tekst, met een harde return aan het eind, een plaatje in te voegen. Probeer dit voor 5 regels te doen en wel zo dat het plaatje er op elke plek hetzelfde ingevoegd wordt. Dit is echt funest voor je humeur. Als je in de html code kijkt, zul je zien dat er soms wel en soms niet <p> tags om plaatjes en regels worden gezet;

Omdat ik niet van verrassingen als deze hou, doe ik vaak het volgende: ik ga naar de HTML-view, kopieer de html en plak dat even tijdelijk in een notepad bestand. Niet echt klantvriendelijk en niet echt iets wat ik mijn klanten aan kan doen, maar soms is het zeer makkelijk. Ik zou willen dat er in de editor (of in Joomla!) een functie ingebouwd zat, die de vorige versie van je content item bewaard. Misschien komt dat later nog eens.

Als je je geplaatst ziet voor zo'n hinderlijke bug, kan het ook wel eens handig zijn om even de html in te duiken... Dus kies voor HTML view of hoe ze het ook genoemd mogen hebben. Je hoeft geen html kenner te zijn; vaak kom je er met enige logica dacht ik wel. Zo van: "hey, alles tot het stukje code met "</strong>" is vet gedrukt, dus kennelijk is dat de code die dit regelt. Etc.

Je kunt ook gewoon backspacen en opnieuw beginnen...

Nu zal ik mijn ervaringen met een aantal editors weergeven. Ik heb ze nog niet allemaal even degelijk getest. Het feit dat de ene editor een vervelend trekje heeft, wil niet persé zeggen dat de andere dat niet heeft. Hou dat goed in je achterhoofd. Een algemeen probleem van deze editors is dat ze bijvoorbeeld veel lege tags achterlaten, om maar iets te noemen.

JCE 

Een gratis editor. Heeft heel veel mogelijkheden. Je kunt er links naar andere content items mee aanbrengen (iets wat standaard-Joomla mist), je kunt er flash en quicktime filmpjes mee plaatsen, de image editor is uitgebreid.

Heeft een aantal nare bugs: als je iets kopieert vanuit de ene tabel cell naar de andere gaat het mis als je in de originele cell geen enkele letter of teken achterlaat; de hele tabel gaat naar zijn mallemoer. Je moet dus bijv een spatie plaatsen.

Zoals elke wysiwyg editor probeert ook deze editor op Word te lijken maar dat lukt niet altijd helemaal. Probeer maar eens iets toe te voegen vóór een tabel of plaatje dat je aan het begint van het artikel plaatste. Je moet daarvoor vaak naar de HTML code en eerst handmatig ruimte creeéren.

Soms gebeuren er onverwacht nog wel meer grappen. Wees er bedacht op.

WYSIWYGPRO

Ik heb deze editor recentelijk gekocht. Deze editor heeft in principe niets met Joomla te maken, maar wordt veel breder gebruikt. Er is echter wel een speciaal Joomla mambot van gemaakt.

Is degelijk, maar heeft minder opties dan JCE. Je kunt geen javascript aan links toevoegen, je kunt geen Flash en Quicktime toevoegen. De optie voor intern linken is heel mooi: terwijl in JCE alle menu-items en content items in één grote lijst aangeboden worden, waardoor je soms door de bomen het bos niet meer ziet, is het in WYSIWYGPRO mooier geregeld; het heeft net als de Windows Verkenner een boomstructuur. Erg mooi.

XHTMLsuite

Version: 1.6.5 [Rainbow] Edition 508 17-May-2006 19:09 GMT+2

Mooie editor
Vertoont meer vervelende trekjes in FireFox dan in Internet Explorer, is mijn ervaring. Gebruik dus Internet Explorer. In eerste instantie vond ik het systeem om interne links aan te leggen niet zo mooi is als in WYSIWYGPRO. Maar mijn mening is verander: in WYSIWYGPRO heb je weliswaar een soort verkennerachtige structuur maar de items staan allemaal door elkaar heen, totaal onwerkbaar bij een groter aantal artikelen. In XHTMLsuite (en ook JCE vermoed ik) staat het ook niet op alfabetische volgorde (de volgorde wordt volgens mij bepaald door het Id) maar kun je alle artikelen die bijv met een j beginnen, vinden door steeds een J in te toetsen. Je kunt helaas niet eentje terug volgens mij (zou handig zijn want je schiet er nogal snel voorbij). Toch vele malen handiger dan WYSIWYGPRO. Een niet gedocumenteerd handigheidje volgens mij.

Ik heb de editor ook gekocht omdat je er Flash en andere media files mee zou kunnen plaatsen. Dat moet echter nu nog via het html schermpje. Pas vanaf versie 2 gaat het via de wysiwyg. Dat had wel wat duidelijker op de website mogen staan.

508
Deze editor is toegerust om 508 compliant code te genereren (je betaalt dan 34 euro ipv 29).

File rights
Let op: als je besluit om je web hosting provider te vragen jouw eigenaar te maken van alle bestanden en directories (via een 'chown'), een maatregel die de security van je joomla site verhoogt, dan werkt deze editor ineens niet meer (ten minste bij mijn web hosting provider, het hangt denk ik ook af van de specifieke instellingen van de server en welke keuzes de provider daarin gemaakt heeft (default permissies e.d.).

Controleer in dat geval het volgende:

Folder: rights
/mambots/editors/xhtmlsuite: 755
Files: rights
/mambots/editors/xhtmlsuite/xhtmlsuite_customcss.js.php: 644
/mambots/editors/xhtmlsuite/xhtmlsuite_langmarks.js.php: 644
/mambots/editors/xhtmlsuite/xhtmlsuite_snippets.js.php: 644

File paths, images en links
XHTMLsuite maakt de links die je maakt, zodanig aan dat ze uiteindelijk je domeinnaam aan het begin, krijgen, daarna eventueel de subdirectory en dan het pad naar het plaatje. De subdirectory wordt aangegeven onder componenten - xhtmlsuite - global configuration en wordt opgeslagen in config.htmlarea3_xtd-c.php. Als je de site verhuist, heb je dus geen problemen.

Bij images gaat het iets anders: je kunt in het XHTMLsuite mambot de volgende optie instellen:
Disable ROOT relative paths: no / yes

Let op: de optie is aangegeven in dubbele ontkenningen, dus denk goed na over wat je leest. Tevens klopt volgens mij de omschrijving niet: "If set to No, the editor will use ROOt relative paths for images, adding a leading slash to each path". Volgens mij is dat juist een absoluut pad?

Het komt er op neer dat als je No kiest dat je dan overal een "/" voor het pad krijgt (zonder het domeinnaam en evt subdirectory ervoor, zoals bij de links (!!!). Dit betekent dat als je je site verplaatst naar een lokatie in een subdirectory (bijv onder hetzelfde domein maar dan in een aparte map, of bijvoorbeeld naar je lokale installatie, die vaak in een subdirectory zal zitten, omdat je nu eenmaal meerdere sites hebt geinstalleerd) je images niet meer zichtbaar zijn.

Lege tags
Er blijven nogal wat lege tags acher (let op: dit is bij andere editors ook het geval). Deze editor doet bepaalde opschoningsacties bij het saven. Dus als je iets ongeoorloofds in de html view ziet staan dan kan dat verdwenen zijn nadat je gesaved hebt.

Je kunt bijvoorbeeld deze code aantreffen:

<h3>
<h3>editor</h3>
<p>enige tekst</p></h3>

Dit is geen nette code (verkeerd geneste tags) en kan voor vervelende extra witruimte zorgen.

 

Asbru Web Content Editor

Deze editor zou het volgens een user review ook doen op Apple Safari browser. Ik heb het zelf niet getest.
http://extensions.joomla.org/
component/option,com_mtree/task,listcats/cat_id,1773/Itemid,35/