TinyMCE met Ribbon - Part 2

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

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!

Volgende: TinyMCE met Ribbon - Part 3 08-'11 TinyMCE met Ribbon - Part 3
Volgende: TinyMce met een ribbon 02-'11 TinyMce met een ribbon

Reacties


Door Tweakers user kaesve, maandag 7 maart 2011 14:09

pure sex, zeg ik je :)

Door Tweakers user MittaM, maandag 7 maart 2011 14:17

Ziet er super uit

Door Tweakers user GertW, maandag 7 maart 2011 14:18

Ziet er goed uit hoor. (Site van swis trouwens ook!) :)

Door Tweakers user fotografie999, maandag 7 maart 2011 14:59

Ziet er goed uit!

Door Tweakers user Tazzios, maandag 7 maart 2011 15:12

de tabel variant doet het niet, verder zeer :9~

edit:
Of klopt het dat hij niet direct overspringt?

[Reactie gewijzigd op maandag 7 maart 2011 15:13]


Door Tweakers user Ventieldopje, maandag 7 maart 2011 15:24

Enige kans dat we die editor ook kunnen gaan gebruiken in Wordpress? :D

Door Tweakers user Diocletianus, maandag 7 maart 2011 15:25

Errug nice indeed! :9~

Door Tweakers user i-chat, maandag 7 maart 2011 15:26

ganz geil,

en werk nu ook best wel functioneel, misschien als er ooit een ribbon interface voor libreoffice komt.....

goed werk...

Door Tweakers user dennizzz, maandag 7 maart 2011 16:04

Je site (tinymce.swis.nl) wordt geblockt door OpenDNS. Je hebt blijkbaar een virus gehost. (http://www.imageurlhost.com/images/9attwzsyuozdnj7f2bz4.png)

Door Tweakers user bsbfx, maandag 7 maart 2011 16:15

Ziet er heel strak uit en ben gelijk even gaan spelen. En zoals gewoonlijk, alles wat mijn ogen zien maken mijn handen kapot.....

Voor de een of andere reden lijkt er wat CSS te missen in Chrome. De table, images & embeded elementen zien er niet hetzelfde uit (table) of reageren niet op de align knoppen. in IE 8 & Firefox werkt het perfect. In Chrome wordt de css class wel in de code geplaatst maar het lijkt alsof je content_css file niet wordt ingeladen. (misschien een / voor je relative path?). Zou aan mijn install van Chrome kunnen liggen maar heb even geen andere pc bij de hand om te testen.

Het heeft opzich weinig met de ribbon zelf te maken maar als je de contextual menu alignment opties combineerd met de ribbon alignment opties gaat het een beetje fout.

Als je in Chrome de alignment aanpast via het contextual menu doet gaat het overigens wel goed maar dan wordt de style direct aangepast i.p.v. de class. Nadat je het contextual menu gebruikt hebt voor de alignment van deze elementen werken de alignment opties in ribbon niet meer zoals je zou verwachten. Ze geven de verkeerde alignment aan en je kan de alignment niet meer wijzigen via de buttons maar alleen nog via alignment in het contextual menu i.v.m. de aanpassingen van de style.

Contextual menu alignments op embeded elemnenten werken overigens ook niet zoals je zou verwachten. Ze passen de text-align van de div aan i.p.v. dat ze de alignment van het element aanpassen ten opzichten van de rest van de pagina zoals de Ribbon dat doet.

Overigens wil ik me bij Ventieldopje aansluiten...... Wordpress plugin please :)

Door Tweakers user orf, maandag 7 maart 2011 16:16

Tazzios schreef op maandag 07 maart 2011 @ 15:12:
de tabel variant doet het niet, verder zeer :9~

edit:
Of klopt het dat hij niet direct overspringt?
Dat klopt! Als je een table selecteert, dan selecteer je een text-node of TD. Dan is het niet handig om direct de toolbar te tonen voor tables, want wellicht wil je gewoon de tekst rechts uitlijnen. Word doet dat ongeveer hetzelfde.

Als het element wel precies overeenkomt met de toolbar waaraan deze gebind is, dan wordt wel direct de toolbar geopend. Bij een afbeelding wil je juist uitlijning en verkleinen en vergroten. :)

Bedankt voor de positieve feedback!

Door Tweakers user Dadona, maandag 7 maart 2011 16:18

Dit zou ik inderdaad graag terugzien in Wordpress en Joomla. :)

Door Tweakers user orf, maandag 7 maart 2011 16:30

dennizzz schreef op maandag 07 maart 2011 @ 16:04:
Je site (tinymce.swis.nl) wordt geblockt door OpenDNS. Je hebt blijkbaar een virus gehost. (http://www.imageurlhost.com/images/9attwzsyuozdnj7f2bz4.png)
Onze stellige overtuiging is dat dit niet zo is, maar we zijn hierover in contact met OpenDNS. Bedankt voor de heads-up :)
Voor de een of andere reden lijkt er wat CSS te missen in Chrome.
Dat is inderdaad een bug. Chrome laadt de css in het geheel niet. Dat is niet zozeer iets vanuit dit theme. Als tijdelijke oplossing heb ik de CSS ook even in een andere content.css gezet waardoor het nu in Chrome wel goed werkt. Bedankt voor de melding! :)
Wordpress plugin please
Het is een theme en kan daarmee gewoon binnen Wordpress gebruikt worden. Zelf gebruik ik geen Wordpress, maar ik ga wel even in overleg met Moxiecode (de makers van TinyMCE) en Wordpress.

Door Tweakers user -RetroX-, maandag 7 maart 2011 16:51

Nice!

Bij het selecteren van tekst is wel bold/italic/underline te veranderen maar bij de stijlknoppen (heading x) gaat de hele paragraaf mee.

Door Tweakers user orf, maandag 7 maart 2011 17:10

-RetroX- schreef op maandag 07 maart 2011 @ 16:51:
Nice!

Bij het selecteren van tekst is wel bold/italic/underline te veranderen maar bij de stijlknoppen (heading x) gaat de hele paragraaf mee.
Ook dat is "by design". In Word werkt dit hetzelfde. Je verandert een block level element naar een ander block level element. Bij een bold knop zet je een inline element binnen het bestaande block level element. :)

Door Tweakers user GENETX, maandag 7 maart 2011 17:42

Bij mij in Chrome 9 kan ik geen tabel plaatsen. Ik krijg wel het selectievak voor het aantal cellen, maar als ik dan een grootte selecteer gebeurd er nog niks.

Verder helemaal top en als bovenstaande ook werkt dan is de kans groot dat ik hem ga gebruiken voor mijn eigen CMS.

Door Tweakers user gavro, maandag 7 maart 2011 18:48

Wow... ziet er erg goed uit!!

Eens kijken of er nog meer plugins uitgerold kunnen worden, denk aan MODx (Evo / Revo), Silverstripe (WordPress werd al meerdere malen genoemd). Mocht je dit in de MODx repo terug willen zien dan wil ik je er graag bij helpen!

Door Tweakers user Woudloper, maandag 7 maart 2011 20:29

orf schreef op maandag 07 maart 2011 @ 16:30:
Het is een theme en kan daarmee gewoon binnen Wordpress gebruikt worden. Zelf gebruik ik geen Wordpress, maar ik ga wel even in overleg met Moxiecode (de makers van TinyMCE) en Wordpress.
Vermoed dat de stelling zal zijn dat je daar een plugin voor kan gaan maken. Zie bijvoorbeeld deze lijst met plugins die allemaal 'iets' doen met TinyMCE. Blijkbaar is er voor elk vraagstuk/probleem een plugin ontwikkeld. Maar net zoals hierboven gezegd lijkt mij het een welkome aanvulling wanneer jullie hier een plugin van maken of laten maken door een enthousiaste WordPress plugin bouwer.

Door Tweakers user orf, maandag 7 maart 2011 21:06

GENETX schreef op maandag 07 maart 2011 @ 17:42:
Bij mij in Chrome 9 kan ik geen tabel plaatsen. Ik krijg wel het selectievak voor het aantal cellen, maar als ik dan een grootte selecteer gebeurd er nog niks.
Deze en een aantal andere bugs in Chrome zijn opgelost! Twee plugins zorgde voor Javascript errors waardoor een aantal andere Javascript methods in het geheel niet uitgevoerd worden. Dat was ook direct de reden waarom in Chrome de content.css niet geladen werd. Nu deze bugs zijn opgelost, werkt dit direct. :)

De Ribbon is nu behoorlijk uitgebreid getest in IE7 - IE8 en Firefox 3.6. Andere browsers zijn nog niet heel uitgebreid getest. Zojuist heb ik in ieder geval een paar triviale bugs in Chrome opgelost.

Ik wil in gesprek gaan met Moxiecode of deze Ribbon onderdeel van de core van TinyMCE kan worden. Als dat zo is, dan is het niet noodzakelijk voor allerhande CMSystemen plugins te ontwikkelen. Waarschijnlijk betekent dit dat TinyMCE geforked moet worden op GitHub. Moet even goed kijken hoe dat moet, want ik ben ouderwets en werk met SVN. :P

Door Tweakers user pasz, maandag 7 maart 2011 21:11

Heel nice. Kun je het editor gedeelte ook makkelijk "fullscreen" maken ?
ik hou het in de gaten. Erg mooi om in Joomla of Wordpress te hangen.

Door Tweakers user orf, maandag 7 maart 2011 22:52

pasz schreef op maandag 07 maart 2011 @ 21:11:
Heel nice. Kun je het editor gedeelte ook makkelijk "fullscreen" maken ?
ik hou het in de gaten. Erg mooi om in Joomla of Wordpress te hangen.
Je kunt de button "fullscreen" toevoegen aan ťťn van de tabs. Op dit moment werkt de fullscreen button alleen in combinatie met de volgende config in de init:


JavaScript:
1
fullscreen_new_window : true



Dat komt doordat TinyMCE bij inline fullscreen de editor opnieuw aanmaakt als kopie. Dat is niet zo handig omdat ID's in de DOM uniek horen te zijn en dat zijn ze niet meer als ze gekopieerd worden. Een aantal (third party) plugins werken hierdoor niet goed meer.

Ik heb bij Moxiecode een feature request ingediend voor plugins die nu hardcoded aan het Advanced theme verbonden zijn. Ook dat hoort natuurlijk gewoon dynamisch te gebeuren. De naam van het gebruikte theme is gewoon beschikbaar als property.

TLDR: Ja het kan, maar alleen in nieuw venster (fullscreen popup). Hier komt wellicht nog verandering in. :)

[Reactie gewijzigd op maandag 7 maart 2011 22:54]


Door precision, dinsdag 8 maart 2011 07:35

Ik wil er wel een wordpress plugin van maken.

Door Tweakers user Woudloper, dinsdag 8 maart 2011 07:53

precision schreef op dinsdag 08 maart 2011 @ 07:35:
Ik wil er wel een wordpress plugin van maken.
Is ook niet zo moeilijk om een WordPress plugin te maken als je het eenmaal hebt gedaan. Zoals je Orf hierboven hebt zien vermelden wil hij eerst met Moxiecode overleggen of het onderdeel van de core kan worden.

Bij WordPress is er vanuit UX voor gekozen om de toolbar zo beperkt morgelijk te houden. In eerste instantie is deze namelijk ook 1 regel hoog. Bij het maken van een WordPress plugin lijkt het mij dat je ook de gebruikers te optie moet geven om te kiezen tussen de verschillende editors net zoals je nu kan kiezen tussen het blauwe en het grijze adminthema.

Door Tweakers user veldmuis, dinsdag 8 maart 2011 10:08

Tof ding geworden! Ik ga 'm zeker gebruiken straks!

Heb je nog aanbevelingen voor een file manager die mooi samenwerkt met de Ribbon?

[Reactie gewijzigd op dinsdag 8 maart 2011 10:09]


Door Tweakers user orf, dinsdag 8 maart 2011 10:36

veldmuis schreef op dinsdag 08 maart 2011 @ 10:08:
Tof ding geworden! Ik ga 'm zeker gebruiken straks!

Heb je nog aanbevelingen voor een file manager die mooi samenwerkt met de Ribbon?
Dank!
Elke filemanager die samenwerkt met de "gewone" TinyMCE editor, werkt ook met de Ribbon. Ik heb de inline popups plugin geskinned, waardoor elke dialog wat beter past bij de Ribbon.

Wij zelf gebruiken een file manager vanuit ons CMS. Daarin kun je door mappen bladeren, thumbs bekijken en zoeken. Wanneer je op een afbeelding klikt in de file manager, krijg je de optie om deze direct in te voegen of te bewerken. Bij bewerken krijg je een interface om wat basis handelingen uit te voeren:

- Uitknippen (met YUI)
- Kleuraanpassingen (ImageMagick)
- Roteren (GD)
- Verkleinen / vergroten (ImageMagick)

De file manager is aan TinyMCE geknoopt met een simpele
JavaScript:
1
ed.execCommand('mceInsertContent', false, '<img scr="" alt="">');



Waarbij ed een referentie is naar de editor.

Onze file manager kan ik hier helaas niet laten zien omdat deze achter een login staat en alleen de bestanden toont waar de gebruikers- en groepsrechten toegang toe geven.

[Reactie gewijzigd op dinsdag 8 maart 2011 10:36]


Door Tweakers user Woudloper, dinsdag 8 maart 2011 11:19

Interessant hoe jullie dat opgelost hebben bij het CMS. Zover ik weet werkt WordPress bijvoorbeeld met externe controls (buiten de wysiwyg editor om) om afbeeldingen en media toe te voegen aan het werkgebied.

Wellicht zou het mooier zijn om dit bij een integratie met WordPress toe te voegen aan de 'insert' sectie/ribbon.

Door Tweakers user orf, dinsdag 8 maart 2011 11:58

Het maken van een plugin met een button die een dialog opent is in TinyMCE heel erg makkelijk (er is zelfs een example plugin in de standaard installatie die dat doet).

Wordpress voegt de buttons toe voor media toe aan de toolbar als je de editor full screen togglet. Ik denk dat de buttons er buiten staan bij de standaard editor om ze meer op te laten vallen.

Door Tweakers user Deathraven, dinsdag 8 maart 2011 19:28

Erg leuke toevoeging aan de TinyMCE editor. Zodra hij beschikbaar is zou ik m zeker eens uitproberen om onze huidige "skin" van tinyMCE te vervangen.

Door Tweakers user Kajel, woensdag 9 maart 2011 16:27

Zeer sexy! Wanneer release je em officieel?

Door Tweakers user jediah, donderdag 10 maart 2011 00:18

Altijd al fan geweest van TinyMCE, en als het ff kan gebruik ik het in een project.

Door Tweakers user djvdorp, donderdag 10 maart 2011 11:10

Ik kan niet wachten tot hij gereleased wordt, ik ga hem zeker gebruiken in mijn projecten!

Door Tweakers user Kiphaas7, vrijdag 18 maart 2011 14:57

Dit kan tinymce een stuk gebruiksvriendelijker maken.... Kan niet wachten!

Door Tweakers user djvdorp, dinsdag 12 april 2011 12:16

Is er al enig nieuws mbt een eventuele releasedate?

Door Jessica, donderdag 21 april 2011 21:36

Is there a timeline on when this will be released? I look forward to using it in my projects. Great job!

Door Merino, donderdag 19 mei 2011 17:20

This's look great, any status update?

Door Tweakers user orf, vrijdag 20 mei 2011 01:27

Het is al een tijdje stil hier, even een korte update:

De besprekingen met Moxiecode zijn op niets uitgelopen, de skin wordt geen onderdeel van TinyMCE. Wij hebben de ribbon in ons CMS uitgerold en daar zijn wat bugfixes uit voort gekomen (voornamelijk IE issues).

Ik verwacht dat ik binnen 3-4 weken de source volledig vrij kan geven. Ik moet daarvoor wat dingen aanpassen die nu specifiek op ons CMS is gericht.

Er komt dus nog een update. :)

Door Jessica, vrijdag 20 mei 2011 21:09

While disappointed Moxiecode isn't going to allow it to be a part of TinyMCE, I am happy to hear that you are still moving forward with it. I can't wait to use it in the future.

Door Nason, maandag 11 juli 2011 14:41

Was wondering how the progress was going? Can't wait to see the final results.


Door Nason, dinsdag 9 augustus 2011 14:22

If there is no intent to finish the project, Is there any chance you would release what code you do have and we could try to finish it.

Door Tweakers user orf, woensdag 31 augustus 2011 15:41

Na lange tijd van stilte, nu toch nog een update: tinymce-met-ribbon-part-3.

Reageren is niet meer mogelijk