TinyMCE met Ribbon - Part 3

Door orf op woensdag 31 augustus 2011 15:36 - Reacties (27)
Categorie: Frontend, Views: 4.642

Een kleine mededeling na maandenlange stilte:

Op tinymce.swis.nl/ staat een nieuwe demo, een kort stukje documentatie en de download van de ribbon.

In de afgelopen tijd zijn diverse bugs verholpen en zijn er kleine optimalisaties gedaan. Ook is er contact geweest met de makers van TinyMCE: Moxiecode. Zij hebben aangegeven deze ribbon niet op te nemen als extra skin van TinyMCE. Daarom nu een aparte download voor deze skin.

De website met demo, documentatie en download is nog wat karig, maar ik ga ervan uit dat tweakers met wat javascript en TinyMCE achtergrond het theme kunnen gebruiken. Zo niet, dan kun je me altijd een e-mail of DM sturen.

TinyMCE met Ribbon - Part 2

Door orf op maandag 7 maart 2011 13:59 - Reacties (41)
Categorie: Frontend, Views: 7.889

In een vorig blogbericht liet ik een eerste versie van de Ribbon in TinyMCE zien. Toen nog als plugin met de nodige bugs.

Inmiddels heb ik de Ribbon volledig opnieuw opgezet. Nu is de Ribbon als Theme opgezet. Daarmee is de Ribbon vooral veel beter geworden. De code is korter en efficiŽnter en je kunt nu alle buttons en plugins gebruiken die je ook in het standaard theme (advanced) kunt gebruiken. Op http://tinymce.swis.nl vind je een werkende demo.

Je kunt nu in de init method je eigen configuratie opgeven, waarin je de tabs, groups en buttons zet.

Wat vooral cool is, is dat je een tab kunt “binden” aan een element. Je kunt nu voor elk willekeurig DOM element een tab maken met eigen buttons. Standaard is er nu een tab voor images en tables.

Optioneel kun je aan dit bind element ook nog classnames opgeven. Zo kun je een <div class=”media”> laten binden aan een toolbar met media buttons. Bij embed code gebeurt dit nu al. Met buttons kun je nu het formaat van de embed code aanpassen en uitlijnen. De plugin is slim genoeg om de afmetingen van de embed code zelf aan te passen. Het invoegen van een YouTube filmpje is daarmee wel erg makkelijk geworden.

De source code is ook mooier en handiger geworden. Je krijgt nu syntax highlighting te zien en de editor indent je HTML code netjes. Hiervoor wordt CodeMirror gebruikt.

Afbeeldingen worden server-side geresized. Je kunt in de editor een afbeelding vergroten of verkleinen met de “grow” en “shrink” buttons. Je kunt de afbeelding ook aanpassen door in de editor de handles te verslepen. Na 500ms wordt automatisch een nieuwe afbeelding ingeladen. Geen lelijke HTML resizing meer en kleine bestandsgroottes voor afbeeldingen!

De ribbon gebruikt nu maar weinig afbeeldingen. Met rounded corners in CSS ziet de editor er net iets beter uit in browsers die dat ondersteunen.

Ik ben er behoorlijk blij mee. De editor is nog niet volledig getest op alle platformen en in alle browsers, maar door deze opzet heb ik een stuk meer vertrouwen in de werking van de editor. Als je dit vergelijkt met Google Docs of Microsoft Live Spaces, dan heeft deze editor met ribbon nu al meer functionaliteiten en mogelijkheden. En ook nog eens met een behoorlijk intuÔtieve interface!

De Ribbon wordt binnenkort vrijgegeven onder de LGPL licentie. Daarmee is het volledig binnen TinyMCE te gebruiken.

Zie je bugs, vind je iets onhandig of kan iets beter? Laat het hieronder achter!

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?