TinyMCE met Ribbon - Part 2

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

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!