How to add a button to the toolbar

In most cases, you will want an image button on the toolbar rather than a button with a label. Thus, you have to place button images in the Images folder.

If you duplicate a style or class in their selectors with a button on the toolbar, follow the steps in:

• How to add an item to the style selector
• How to add an item to the class selector

Don't forget to use the <button/> element within the corresponding <format/> element.

The button also appears on the toolbar if you define a format for the inline element and specify the <button/> for its representation in Visual Editor.

The inline element might be one of the existing elements  (e.g. <strong>) possibly redefined in CSS or your own element redefined with a  class etc (e.g. "span.strikethrough")

1. If necessary, in a style sheet listed in common.xml (e.g.\Styles\common.css), create a style for an element, e.g.:
   

   span.strikethrough{
   	text-decoration: line-through;
   }

2. In common.xml, create a <group> or use the existing one.
3. Add a <format></format> element to the group. You can also use a radio group if you define a set of mutually exclusive buttons.)
4. Add the following attributes to the format and specify their values, e.g.:
   • id="strikethrough"
   • label="Strikethrough"
   • notes="Strikethrough" 
   • inline="span"
   • classes="strikethrough"
5. Add the <button/> element to the <format/> element and specify its image or its label attribute.

In common.xml you should have something like this:

<group> 
  <format id="strikethrough" label="Strikethrough" notes="Strikethrough" inline="span" classes="strikethrough"> 
    <button image="Images/strike.png" /> 
  </format> 
</group>