1

Topic: Microsoft Ribbon proposal

Hi,

I have been using TinyMCE for some time now and I am extremely happy with it. smile
However, I would like to use a toolbar like the Microsoft Word Ribbon (version 2007+). I came up with this:

http://tinymce.swis.nl/img/screenshot.png

Demo and download

It's a working example, but normally it's incorporated in our Content Management System, not all buttons are working in this example.

What are your thoughts on this? A Ribbon interface makes web-editing an easier task:

* Context aware toolbar. Image buttons when selecting an image. A table toolbar when the cursor is in a table
* No cluttered toolbar with dozens of buttons
* Smart grouping of buttons: insert, image, table
* No cluttered context menu
* Users are getting used to a Ribbon. Microsoft is using it in MS Office (Windows & Mac)
* The default toolbar looks like MS Word 2003

For now the Ribbon is a plugin. It hides the normal toolbar with CSS. The ribbon would be better if it's used as a native toolbar. Maybe some can help with this. Please take a look at the download and the ribbon plugin.

Last edited by Vincent Kleijnendorst (2010-12-06 17:47:25)

2

Re: Microsoft Ribbon proposal

Hello,

Looks very nice !
Two things for now :
- your online example doesn't work because it has references to http://localhost/ (note: I haven't downloaded it to test)
- I don't use Word very much, but I'm still not used to the Office Ribbon. I prefer the old Office look

But anyway, nice work

Olivier wink

PC Tuning - Radio dance, Let's Go Zik
O2 Graphics, web agency in Saint-Etienne, France

3

Re: Microsoft Ribbon proposal

OlivierW wrote:

Hello,

Looks very nice !
Two things for now :
- your online example doesn't work because it has references to http://localhost/ (note: I haven't downloaded it to test)
- I don't use Word very much, but I'm still not used to the Office Ribbon. I prefer the old Office look

But anyway, nice work

Olivier wink

Thanks! smile The demo is fixed. Thank you for noticing that.

I personally prefer the Ribbon because of the clean look and the more context aware buttons. Office is using that in all packages now. Users are getting used to it. It's also better for semantics. Users are more inclined to click a "heading 1" button instead of a dropdown with tags / formatting.

4

Re: Microsoft Ribbon proposal

Thanks for fixing, I've been able to test smile

On IE8, I've a javascript error when I click on the pic and then on the button : "Afbeelding verwijderen" (I don't know German, but looks like it delete the pic tongue )
The error is :
"Détails de l’erreur de la page Web

Agent utilisateur : Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Horodateur : Mon, 6 Dec 2010 17:54:10 UTC


Message : 'parentNode' a la valeur Null ou n'est pas un objet. (it means "'parentNode' is Null or isn't an object.")
Ligne : 1
Caractère : 61377
Code : 0
URI : http://tinymce.swis.nl/js/tiny_mce/tiny_mce.js"
But as you said, it's your example and some buttons doesn't work some buttons in the "Afbeelding" tab doesn't have any mouseover)


I've used Office 2007 and now 2010, but I still wish there was a hidden feature to go back to the old toolbars smile I never know where to search the buttons I need. But I understand that some people prefer the Ribbon.

Oh, something is missing : to be able to use the mousewheel on the ribbon, but it may be not fun to code and I don't know if people really use it. I use it a lot when I search a button and I can't find it: it gets me nervous!

Great work !

Olivier wink

PC Tuning - Radio dance, Let's Go Zik
O2 Graphics, web agency in Saint-Etienne, France

5

Re: Microsoft Ribbon proposal

I haven't fully tested it in all browsers. It seems to work OK in IE9 en Firefox for now. And yes, not all buttons are working because of interaction with our CMS. Thanks for testing. smile

Oh, something is missing : to be able to use the mousewheel on the ribbon, but it may be not fun to code and I don't know if people really use it. I use it a lot when I search a button and I can't find it: it gets me nervous!

I'm not really sure I understand this. I just tried scrolling in MS Word 2007 on the Ribbon, but nothing seems to happen (except scrolling the document). Is that a new feature in Word 2010?

By the way, it's Dutch, not German. The Ribbon should work in other languages as well. It uses the normal translation files in TinyMCE. I just did not translate the buttons / plugins yet. smile

Last edited by Vincent Kleijnendorst (2010-12-06 20:24:26)

6

Re: Microsoft Ribbon proposal

No problem smile

It works also in Word 2007 : but you have to put the cursor on the Ribbon before playing with the mousewheel.
Edit: looks like it doesn't work in Office 2010 : http://www.standss.com/blog/index.php/o … use-wheel/ and I don't have a 2010 version at the moment to try.

I'm sorry for this stupid mistake :-/ I saw your TLD was .nl and I even visited the website of your company... but I said German anyway :-/

Olivier wink

Last edited by OlivierW (2010-12-06 20:50:42)

PC Tuning - Radio dance, Let's Go Zik
O2 Graphics, web agency in Saint-Etienne, France

7

Re: Microsoft Ribbon proposal

Wow this is really cool stuff. It's way to seldom we see stuff like this it gets us inspired. Keep up the good work.

Best regards,
Spocke - Main developer of TinyMCE

8

Re: Microsoft Ribbon proposal

Thanks for the cheers. smile

I would like to transform this plugin to a toolbar / theme.
Just to get some feedback, is this a preferred way to configure the ribbon toolbar within the TinyMCE config?

init = {
            theme_ribbon_tab1 : {   title : 'Start',
                                    items : [['paste'], 
                                            ['justifyleft,justifycenter,justifyright,justifyfull',
                                             'bullist,numlist',
                                             '|',
                                             'bold,italic,underline',
                                             'outdent,indent'], 
                                            ['p', 'h1', 'h2', 'h3'],
                                            ['styles'],
                                            ['search', 'replace', 'cleanup']]
                                },
            theme_ribbon_tab2 : {   title : 'Insert',
                                    items : [['table'],
                                            ['image', 'file', 'video', 'audio'],
                                            ['embed'],
                                            ['link', 'anchor', 'remove_link'],
                                            ['lipsum', 'charmap', 'hr']]
                                },
            theme_ribbon_tab3 : {   title : 'Image',
                                    bind :  'img',
                                    hidden : true,
                                    items : [['float_left', 'float_right', 'float_none'],
                                            ['alt_text'],
                                            ['image_size_min', 'image_size_plus'],
                                            ['replace_image', 'edit_image', 'remove_image']]
                                }

};

A bit like the config for the advanced toolbar, but grouped in objects, arrays for the extra info. For example the image tab would be hidden by default but bind to an image. As a user selects an image, the tab should show.

Like the advanced toolbar it can have a default setup, with default tabs, groups and buttons. Is this the way to go?

I would like to use the tinymce.ControlManager to setup the ribbon. Is there a way to extend that class? It looks like it's possible to rewrite /themes/advanced/editor_template.js to a new theme: Ribbon. Do you see any problems with that?

Cheers. smile

9

Re: Microsoft Ribbon proposal

Just to throw my two-cent spanner in the  works, I would like to say how much I HATE the "ribbon".  I would like to, but I can'yt, because words cannot express the depth of my distaste for this abomination.  "Makes editing easier"??!!?  WHoa re you kidding?  I've been stuick with this thing on Word, Excel and Outlook for ages now, and still have trouble finding what I want when I want.

The old menu system was ****so*** much easier to use! (And I mean the *old* menu system, before they started messing about with auto-hiding so-called little-used options!)

Last edited by tinyMe (2010-12-08 18:26:13)

10

Re: Microsoft Ribbon proposal

It's all about personal taste. I love the ribbon. smile

A context aware toolbar is so much better than a cluttered toolbar with dozens of (disabled) buttons. If you wouldn't have been used to the old toolbars in MS Word, I think you would not have a problem with the Ribbon. People tend to dislike changes in general.

I think a web-editor that has an Office skin should not be using the 2003 toolbar. I'm having trouble explaining the editor to my clients and clients love the ribbon.

11

Re: Microsoft Ribbon proposal

Hello Vincent,

Excellent work and idea with the Ribbon plugin.  I am trying to make something similar, but with a different approach.  I created a jquery plugin for making the ribbon functionality outside of the editor.  It's a bit more complex than your example allowing for tooltips, popdowns for menu items and some other features, such as different split button types. 

Please post back as you make progress, I think this kind of functionality is great and much improved over the standard toolbar. 

Regarding your configuration question.  This would be how I would implement your approach.  For my approach, I each icon itelf would have some extra parameters (isSplitButton, tooltip, ect.) which make it a bit unique to my project.   

Some things I noticed, were that the selection gets lost in webkit browsers and that the normal toolbar gets rendered (but not visible).  I was just curious if this was something you were working on. 

best,
Victor


Vincent Kleijnendorst wrote:

Thanks for the cheers. smile

I would like to transform this plugin to a toolbar / theme.
Just to get some feedback, is this a preferred way to configure the ribbon toolbar within the TinyMCE config?

init = {
            theme_ribbon_tab1 : {   title : 'Start',
                                    items : [['paste'], 
                                            ['justifyleft,justifycenter,justifyright,justifyfull',
                                             'bullist,numlist',
                                             '|',
                                             'bold,italic,underline',
                                             'outdent,indent'], 
                                            ['p', 'h1', 'h2', 'h3'],
                                            ['styles'],
                                            ['search', 'replace', 'cleanup']]
                                },
            theme_ribbon_tab2 : {   title : 'Insert',
                                    items : [['table'],
                                            ['image', 'file', 'video', 'audio'],
                                            ['embed'],
                                            ['link', 'anchor', 'remove_link'],
                                            ['lipsum', 'charmap', 'hr']]
                                },
            theme_ribbon_tab3 : {   title : 'Image',
                                    bind :  'img',
                                    hidden : true,
                                    items : [['float_left', 'float_right', 'float_none'],
                                            ['alt_text'],
                                            ['image_size_min', 'image_size_plus'],
                                            ['replace_image', 'edit_image', 'remove_image']]
                                }

};

A bit like the config for the advanced toolbar, but grouped in objects, arrays for the extra info. For example the image tab would be hidden by default but bind to an image. As a user selects an image, the tab should show.

Like the advanced toolbar it can have a default setup, with default tabs, groups and buttons. Is this the way to go?

I would like to use the tinymce.ControlManager to setup the ribbon. Is there a way to extend that class? It looks like it's possible to rewrite /themes/advanced/editor_template.js to a new theme: Ribbon. Do you see any problems with that?

Cheers. smile

12

Re: Microsoft Ribbon proposal

Wonderful work.

Would love to use this as the main toolbar for TinyMCE. Seems like it would make it much more easier for new users to grasp.

13

Re: Microsoft Ribbon proposal

I didn't try it so far, but it looks pretty cool!

14

Re: Microsoft Ribbon proposal

i notice you just call the "click" method of the hidden external toolbar of tinyMCE... I was just wondering if you had thought about how to do things like font-face and colour picker drop downs?

would you just called the activeEditor.execCommand Directly? then call click on the cleanup button

15

Re: Microsoft Ribbon proposal

the Ribbon Theme is really nice, but i got a little Problem:
It's not shown in Firefox 18.0.1 when the Firebug 1.7.3 is active, i would be very grateful for your help.
best regards