TinyMce met een ribbon

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

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?

Volgende: TinyMCE met Ribbon - Part 2 03-'11 TinyMCE met Ribbon - Part 2

Reacties


Door Tweakers user SpaceK33z, donderdag 10 februari 2011 21:18

Ziet er heel erg mooi uit! Ik vind deze ribbon handiger dan in een standaard editor, mits het natuurlijk verder ontwikkeld word. Ik zeg: Doorzetten!

Door Tweakers user i-chat, donderdag 10 februari 2011 21:23

Wat vinden jullie, is een ribbon handig in een webapp of zie je toch liever een standaard editor. Of misschien zelfs liever een textarea?
Persoonlijk (LibreOffice gebruiker), vind ik die ribbons van MS Office 2007 echt een ramp op te gebruiken ik moest het pas een keer gebruiken op de pc van iemand anders (voor enkele uren), en OOOOW wat was dat een ramp.

Als tweaker (of beter gezegd ict'er), zou ik bijna willen zeggen, ein-de-lijk, er zijn genoeg mensen ie WEL goed kunnen werken met die ribbons, en misschien als ik het dagelijks zou gebruiken, ik ook wel, ik ging er altijd vanuit dat die 'web'editors de standaarden van echte software zoveel mogelijk zouden volgen (om gebruikers direct de vertrouwde omgeving te bieden, het verbaasde me dus dat er nog geen ribbons voor waren.

Ik heb dat de webbouwers, wel de mogelijkheid zullen bieden om van interface te wisselen, zodat ik er zelf niet mee zit opgescheept, maar an sich vind ik het een goed idee.

Door Tweakers user croontje, donderdag 10 februari 2011 21:29

Ziet er gewoon supergoed uit!

Door Tweakers user gybrus, donderdag 10 februari 2011 21:34

Geniaal dingetje, zoals je al aangeeft is het verliezen van focus nadat je een item aanpast een beetje vervelend. Hoe het er nu naar uitziet kan dit een heel mooi product worden. Enige minpunt vind ik is toch de overeenkomst van het uiterlijk.

Door Tweakers user orf, donderdag 10 februari 2011 21:45

Leuk dat jullie het ook wel wat vinden!

Er is nog best wat werk te doen om een goede integratie te in de bestaande toolbar engine te realiseren. Als ik weer wat tijd vind ga ik hier verder aan werken. Natuurlijk meld ik het dan hier ook als ik vooruitgang boek.

[Reactie gewijzigd op donderdag 10 februari 2011 21:46]


Door Tweakers user veldmuis, donderdag 10 februari 2011 22:19

Alles selecteren (ctrl-a) + opmaak wissen, en dat in herhaling, maakt een <p></p> aan? Heeft denk ik niets met jouw ribbon te maken, maar toch... :)

Goed werk wel. Ga je dit verspreiden als het klaar is, en onder wat voor licentie? Ik heb behoorlijk interesse.

Door Tweakers user RobIII, donderdag 10 februari 2011 22:21

Ziet er nice uit! d:)b Heb je dit al eens bij moxiecode aangekaart? Ik denk dat ze hier best oren naar hebben en het ziet er echt netjes uit! Om met ene B. Stevens te spreken: Doorrrgaan, voorrral doorrrgaan _O_

Door Tweakers user cxavier, donderdag 10 februari 2011 22:23

Dat ziet er erg netjes uit! Een hele verbetering tegenover de standaard interface van TinyMCE.

Door Tweakers user orf, donderdag 10 februari 2011 22:24

veldmuis schreef op donderdag 10 februari 2011 @ 22:19:
Alles selecteren (ctrl-a) + opmaak wissen, en dat in herhaling, maakt een <p></p> aan? Heeft denk ik niets met jouw ribbon te maken, maar toch... :)
Maar dat is toch gewenst gedrag? Standaard tekst moet binnen een paragraaf komen. Pas als je wisselt naar bijvoorbeeld een heading wil je dit aanpassen.
Goed werk wel. Ga je dit verspreiden als het klaar is, en onder wat voor licentie? Ik heb behoorlijk interesse.
Waarschijnlijk komt dit onder lgpl uit. :)
RobIII schreef op donderdag 10 februari 2011 @ 22:21:
Ziet er nice uit! d:)b Heb je dit al eens bij moxiecode aangekaart? Ik denk dat ze hier best oren naar hebben en het ziet er echt netjes uit! Om met ene B. Stevens te spreken: Doorrrgaan, voorrral doorrrgaan _O_
Dank! :D
Ik heb het al eens bij Moxiecode aangekaart. Spocke reageerde vrij enthousiast, maar is volgens mij niet voornemens om hier iets mee te doen. Ik verwacht dat wanneer dit een beetje uitontwikkeld is (als toolbar) het wel meegeleverd kan worden met Tiny.

[Reactie gewijzigd op donderdag 10 februari 2011 22:27]


Door Tweakers user Ventieldopje, donderdag 10 februari 2011 22:29

Smaken verschillen, persoonlijk vind ik beide prima, in een web app however vind ik het toch maar een raar gezicht, zeker omdat je toch al wat minder ruimte hebt en de editors vaak in een vak toegepast worden denk ik dat dat wel wat problemen geeft, dan heb ik in dat geval toch liever een kleine toolbar.

Content-aware dingen maken het vaak voor minder doorgewinterde gebruikers toch wat lastiger omdat ze vaak niet weten wat er nou gebeurt en hebben ze liefst een vaste plek om bijvoorbeeld de uitlijning van het plaatje te veranderen.

Geen kritiek op je werk, ziet er prachtig uit en kan in sommige toepassingen erg handig zijn ;)

Door leenm, donderdag 10 februari 2011 22:29

Briljant! _/-\o_ Ik vind de ribbon veel lekkerder werken dan de standaard toolbar. Vooral ook het stukje 'content awareness' is een plus. Bovendien zit er steeds vaker een ribbon in moderne software, dus de meeste mensen gaan er vroeg of laat toch aan wennen.
Dit is iets dat ik, als het af is en goed werkt, zeker zou gaan gebruiken!

Door Tweakers user orf, donderdag 10 februari 2011 22:36

Smaken verschillen, persoonlijk vind ik beide prima, in een web app however vind ik het toch maar een raar gezicht, zeker omdat je toch al wat minder ruimte hebt en de editors vaak in een vak toegepast worden denk ik dat dat wel wat problemen geeft, dan heb ik in dat geval toch liever een kleine toolbar.
Ik denk dat je onderscheid moet maken tussen een editor waarin je bijvoorbeeld een reactie geeft op een artikel of een editor waarmee je een complete tekstpagina opmaakt. Bij die laatste heb je wel de ruimte en kun je bijna full-screen de pagina opmaken. In het eerste geval heb je aan een vijftal buttons al genoeg.

En natuurlijk heb je er gelijk in dat het een kwestie van smaak is. Er zijn genoeg mensen die de ribbon verafschuwen. Persoonlijk vind ik het een goede vooruitgang in interface design.

Door Tweakers user NjitsSs, donderdag 10 februari 2011 22:36

Die ribbon is een van de redenen waarom ik absoluut niet wil werken met die Office 2007 rommel. Microsoft mag dringend eens wat mensen in dienst nemen die terug een goede recht toe recht aan gui maken...

Door Tweakers user Barleone, vrijdag 11 februari 2011 00:03

* Barleone denkt weemoedig terug aan zijn leeftijd toen er nog ongegeneerd gekwijld kon worden *
Ach, who cares: KWIJLLLLLL :9~
Simpele interface, love it!

[Reactie gewijzigd op vrijdag 11 februari 2011 00:04]


Door Tweakers user ZpAz, vrijdag 11 februari 2011 00:05

Ik vind hem erg mooi :)

Door Tweakers user --MeAngry--, vrijdag 11 februari 2011 00:05

Erg strak plan! Ik zou het zeker waarderen als je dit doorzet, want voor een gemiddelde PC-gebruiker is zo'n ribbon veel sneller te doorzien dan werkbalken met rijen knopjes. Gelukkig heeft ook Microsoft dat ingezien.

Door Tweakers user Icekiller2k6, vrijdag 11 februari 2011 01:02

Ik moet toegeven de button vanboven om meteen de source code te zien vind ik superhandig..
denk dat ik hem in een volgend privť project ga gebruiken!!

Door Tweakers user WeeJeWel, vrijdag 11 februari 2011 02:20

Petje af, goed werk. Al zijn de afbeeldingen wel van Microsoft, dus die mag je niet zomaar gebruiken.

Door Tweakers user Rhapsody, vrijdag 11 februari 2011 07:16

Mooi en zeker erg bruikbaar :-)


Door Tweakers user -RetroX-, vrijdag 11 februari 2011 08:32

Hij is mooi.

(nog geen knopje om een span met kleurtjes of aangepaste size toe te voegen?)

[Reactie gewijzigd op vrijdag 11 februari 2011 08:38]


Door Tweakers user YopY, vrijdag 11 februari 2011 09:20

Netjes, goed bezig. Zit zelf vaak in Wordpress met die editor, maar ook daarbij wordt het vaak de betekenis achter icoontjes zien te achterhalen. Het uploaden en beheren van afbeeldingen en andere media kan met zo'n layout ook overzichtelijker.

Puur uit nieuwsgierigheid, hoeveel tijd was je hieraan kwijt?

Ten tweede, kom je / die plugin niet in juridisch gevaar door het overnemen van het ribbon-concept en de opmaak daarvan? Aangezien dat Microsoft zooi is etc.

[Reactie gewijzigd op vrijdag 11 februari 2011 09:21]


Door Tweakers user BramT, vrijdag 11 februari 2011 09:56

Dat ziet er zeker prima uit!

Denk overigens niet dat dit problemen met MS oplevert. Er zijn al diverse andere programma's met een ribbon-interface. Het zit geloof ik zelfs in de laatste ontwikkelapps van MS. En hoe meer mensen leren om te gaan met de ribbons hoe beter natuurlijk.

[Reactie gewijzigd op vrijdag 11 februari 2011 09:58]


Door Tweakers user Zeebonk, vrijdag 11 februari 2011 10:24

Ha echt een lekkere rustige interface geworden. Heb toevallig gister nog een keer TinyMCE moeten configureren en vind het, zeker wanneer VEEL opties worden gebruikt, een redelijk chaotische boel worden. Ik hoop dat je hier mee verder gaat!

Door Tweakers user snoopy, vrijdag 11 februari 2011 10:32

Ziet er erg goed en bruikbaar uit, maar er zit nog wel een bugje in. Als ik in Chrome onder OS X ergens in een regel klik en vervolgens met de muis over de buttons in de ribbon beweeg verschijnen er spaties waar de cursor staat.

Het gebeurt voor zover ik kan achterhalen trouwens alleen bij de koppen.

[Reactie gewijzigd op vrijdag 11 februari 2011 10:33]


Door Tweakers user kipusoep, vrijdag 11 februari 2011 10:54

Nice work, lijkt mij een perfecte toevoeging voor het open-source .NET CMS umbraco :)
Keep up the blogs hierover!

Door Tweakers user orf, vrijdag 11 februari 2011 11:11

Dank voor alle reacties. :)

Er zijn nog wel wat bugs in de ribbon die voornamelijk veroorzaakt worden door focus issues. Voor Internet Explorer worden er nu placeholders gezet in de editor bij een mouse-over op de ribbon. Wanneer de focus verloren gaat, wordt de placeholder gebruikt om de cursor terug te zetten en wordt de placeholder opgeruimd.

Als de ribbon als toolbar gebruikt wordt is dit niet meer nodig en zullen er waarschijnlijk minder bugs ontstaan.

Ik weet niet precies hoe het zit met copyright op de ribbon. Natuurlijk is de toolbar die je nu in alle editors ziet ook een kopie van Word. Een aantal gebruiken zelfs een Office 2003 skin.

Microsoft heeft de ribbon niet uitgevonden. In 1999 gebruikte de Lotus eSuite al een ribbon die weinig afwijkt van de ribbon van Office. Hier iets meer info over de ribbon en prior-art: Wikipedia Ribbon computing.

Als meer en meer applicaties gebruik gaan maken van de ribbon en het ook een Microsoft guideline is voor Windows applicaties dan denk ik dat een webapplicatie niet een enorm probleem is. Maar garanties heb ik natuurlijk niet.

Er is ongewild best wat tijd in gaan zitten. De eerste opzet was snel gedaan, daarna ben ik vooral bezig geweest met het oplossen van bugs waar TinyMce zelf ook mee te maken heeft. Tijdens het ontwikkelen aan de ribbon bracht Tiny een nieuwe release uit voor de ondersteuning van IE9. Helaas zorgde dat ervoor dat ik een aantal dingen opnieuw kon doen. Ook waren in die release bugs opgelost die ik zelf ook al opgelost had en dus overbodig waren.

Ik meld me zeker terug als ik een eerste opzet van de ribbon heb als toolbar binnen Tiny. Ik ga dan ook weer even contact zoeken met Moxiecode.

[Reactie gewijzigd op vrijdag 11 februari 2011 11:14]


Door Tweakers user Trinsec, vrijdag 11 februari 2011 11:15

Goed werk, ziet er goed uit. Ik zou het zo gaan gebruiken als het standaardonderdeel van tinyMCE wordt, echt. Alles om alles maar logisch te laten uitzien i.p.v. een buttonbende te krijgen.

Door Tweakers user himlims_, vrijdag 11 februari 2011 14:04

de module mp3/video enzo werkt niet

Door Tweakers user orf, vrijdag 11 februari 2011 14:08

himlims_ schreef op vrijdag 11 februari 2011 @ 14:04:
de module mp3/video enzo werkt niet
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
Voor de demo heb ik de editor uit ons CMS getrokken en op een losse pagina gezet.

Door Tweakers user Precision, vrijdag 11 februari 2011 14:49

http://img607.imageshack.us/img607/6337/swiw.png
Bij de eigenschappen van een afbeelding, bij mouseover kleurt het niet blauw zoals bij de rest.

Door Tweakers user Xesxen, vrijdag 11 februari 2011 18:27

Dit ziet er wel heel erg gelikt uit :) . Hopelijk wordt dit een succes!

Door Tweakers user orf, vrijdag 11 februari 2011 22:12

Precision schreef op vrijdag 11 februari 2011 @ 14:49:
http://img607.imageshack.us/img607/6337/swiw.png
Bij de eigenschappen van een afbeelding, bij mouseover kleurt het niet blauw zoals bij de rest.
Dat is gewoon luiheid geweest. Ik gebruik css sprites en de image buttons heb ik niet allemaal een background gegeven. Sowieso wil ik images en buttons iets meer generiek maken. Nu kun je al elke willekeurige button en plugin van Tiny in de ribbon zetten, maar er worden me iets te veel losse images gebruikt. Liever groepeer ik die nog wat meer in sprites.

Door Tweakers user creator1988, maandag 21 februari 2011 14:18

Ziet er zeer goed uit!

Reageren is niet meer mogelijk