Adding buttons to inline-editing frame

Today's post is dedicated to Sitecore inline-editor and some customization you can put into it. The question I'm going to address is:
"Is it possible to add custom buttons to inline-editor frame?"
The answer is simple as is: "Yes, it is" :). Wait... don't go away. Read further to find out the solution.

Our challenge is to add a button to inline-editor. Let's do that for Rich Text field.
I put this approach into the steps to outline this process. Let's start:

1) Open Sitecore Client and go to the Core database.
As you know (or maybe you're going to find out right away) Rich Text field has several profiles to give different sets of functionality to logged in users. Let's go to default profile and check its configuration, here is the path in content tree: "/sitecore/system/Settings/Html Editor Profiles/Rich Text Default".

2) The configuration node we're interested in is "WebEdit Buttons". Go ahead and expand it.
Beneath the node you can see all available buttons which are going to show up as soon as you put mouse cursor over the rich text data in Page Editor.

3) Since we're already here let's add our own button to the current set. A button should be created from "/sitecore/templates/System/WebEdit/WebEdit Button" template.

Header field contains the name of the button in inline-editor frame.
Icon field has the icon for the button
Click field is the most important part. It has command message that should be sent when you hit the button.

a) Here is the format of this field for the custom command: "javascript:return Sitecore.WebEdit.editControl($JavascriptParameters, "webedit:mybutton:message")"
Javascript command is required to set you command message that is passed as second parameter for the "editControl" function.
"webedit:mybutton:message" is command message. Don't be concerned about the format of this message. It can have any format you want. For instance: "webedit:mymessage" or "webedit:mybutton:mymessage". It's good when the first part of the message describes an area the message belongs to, e.g. "webedit:".

b) Here is another example to run JavaScript function through the button.
Click field should look like this: javascript:Sitecore.WebEdit.execute("js_function_name", true, "parameter_for_js_function");
This example changes the font size:
javascript:Sitecore.WebEdit.execute("fontsize", true, "20");

NOTE: if you use javascript function, the Header field for the button item should be left empty.

Tooltip field describes itself :).

4) This is the final step. You have to create a command handler that will do action you want.
I'm not going to touch command creation process here. You can find sample in John's article here.
NOTE: webedit command handler class must be inherited from Sitecore.Shell.Applications.WebEdit.Commands.WebEditCommand one.