danielinsley.com

While working on getting TinyMCE configured for viviti.com, we found that some of the buttons in TinyMCE weren't exactly clear in what they were intended for. We decided that we'd need to put a label beside the buttons we felt needed more explanation. There wasn't that many changes needed to get this functionality in there, and it actually looks pretty good.

You can play around with the example page here. It works for both the advanced and simple themes of TinyMCE, and for the default theme. I haven't gotten it working under the o2k7 skin yet due to the way the background is done for the buttom images.

In order to add a label to a specific button you just need to do add label to the associative array parameter of your createButton call:

cf.createButton('cleanup', { title : 'simple.cleanup_desc', cmd : 'mceCleanup', label : 'Cleanup Code' })

I've modified the editor_template_src.js of the advanced theme to allow the fourth element of the controls associative array (starts on line 16) to be set as the label. So if you'd like to set the new document button to have a label you'd need to change it to read:

controls : {
  bold : ['bold_desc', 'Bold'],
  italic : ['italic_desc', 'Italic'],
  underline : ['underline_desc', 'Underline'],
  ... ( Skipping the displaying of alot of them so it doesn't take up too much space)
  newdocument : ['newdocument_desc', 'mceNewDocument', null, null, 'New Document'],
  blockquote : ['blockquote_desc', 'mceBlockQuote']
}

The second and third indexes of each control item are being used to set the ui and the value values. I'm not totally sure what those two options are for, but in order to provides backwards compatibility I'm using the forth index.

Once I have the patch working with the o2k7 skin I'll submit it to the TinyMCE sourceforge and hopefully it'll get merged into their next release.

If anyone wants the patch file in the meantime, feel free to shoot me an email at dinsley [at] gmail.com.