TinyMce met een ribbon

Door orf op donderdag 10 februari 2011 21:07 - Reacties (34)
Categorie: Frontend, Views: 5.176

De ribbon in MS Word vind ik best lekker werken. Geen superlange dropdowns met opties en kleine iconen waarop je moet klikken.

In plaats daarvan "content-aware" tabs. Als je een afbeelding hebt geselecteerd kun je direct de afbeelding uitlijnen en bewerken. Als je een table geselecteerd hebt kun je rows invoegen, kolommen aanpassen en alles wat je verder met een table wilt doen.

Nu zijn er best wat WYSIWYG editors maar behalve de zeer beperkte Aloha Editor zijn er niet echt (open source) editors die gebruik maken van een ribbon. Daarmee vind ik ze er enorm gedateerd uitzien. Je ziet al snel enorme rijen met buttons waarvan je de meeste slechts in een aantal specifieke gevallen nodig hebt.

TinyMce vind ik een fijne editor om aan te ontwikkelen. Er is een goede API en ik vind de Javascript lekker in elkaar zitten. Tiny wordt actief ontwikkeld en veel gebruikt. Een tijdje geleden ben ik begonnen aan een ribbon plugin:

http://tinymce.swis.nl/img/screenshot.png Klik op de afbeelding om de editor te testen. Veel functies werken niet in de demo omdat deze hard gekoppeld zijn aan ons CMS waarbinnen we de editor gebruiken.

Voorlopig nog als plugin omdat een toolbar geen mogelijkheid heeft tot tabbladen en "content aware" toolbars. In de markup van Tiny wordt een toolbar altijd als table gerendered en dat vind ik ook niet zo leuk. Toch ben ik van plan om er op termijn wel een toolbar van te maken, want een plugin zorgt voor een aantal problemen die een toolbar niet heeft: afvangen van clicks buiten een button of buttons met een state of dropdown zorgen ervoor dat de editor focus kwijt raakt en met name in Internet Explorer is het oplossen daarvan een leuke opgave.

Wat vinden jullie, is een ribbon handig in een webapp of zie je toch liever een standaard editor. Of misschien zelfs liever een textarea?