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:

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.:
    	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:

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