cnx-toolbar.html

<!-- ================= -->
<!--  Toolbar Buttons  -->
<!-- ================= -->
<div class="toolbar aloha-dialog navbar-fixed-top">
  <!-- ============= -->
  <!-- HACK add class aloha-dialog so the editor never blurs -->
  <!-- See src/lib/aloha.js
       if (Aloha.activeEditable && !jQuery(".aloha-dialog").is(':visible') && !Aloha.eventHandled) {
         Aloha.activeEditable.blur();
       ...
  -->
  <!-- ============== -->


<div class="btn-toolbar">
  <div class="btn-group headings">
    <button class="btn currentHeading" rel="tooltip" title="Text Heading">Nothing</button>
    <button class="btn dropdown-toggle" data-toggle="dropdown" rel="tooltip" title="Change Heading">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <!-- "changeHeading" is important so a click can be attached and
           data-tagname is used both to identify if the cursor is in one of these and
     is used to change one heading to another
     -->
      <li><a href="#" class="action changeHeading" data-tagname="p">Normal Text</a></li>
      <li><a href="#" class="action changeHeading" data-tagname="h1">Heading</a></li>
      <li><a href="#" class="action changeHeading" data-tagname="h2">Subheading</a></li>
      <li><a href="#" class="action changeHeading" data-tagname="h3">SubSubHeading</a></li>
    </ul>
  </div>

  <div class="btn-group">
    <button class="btn action strong" rel="tooltip" title="Bold"><i class="icon-bold"></i></button>
    <button class="btn action emphasis" rel="tooltip" title="Italics"><i class="icon-italic"></i></button>
    <button class="btn action underline" rel="tooltip" title="Underline"><i class="icon-text-width"></i></button>
  </div>

  <div class="btn-group">
    <button class="btn action insertLink" rel="tooltip" title="Insert Link"><i class="icon-resize-full"></i></button>
    <button class="btn action insertImage-oer" rel="tooltip" title="Insert Figure"><i class="icon-picture"></i></button>
    <button class="btn action insertMath" rel="tooltip" title="Insert Math">x<sup>2</sup></button>
  </div>

  <div class="btn-group">
    <button class="btn action unorderedList" rel="tooltip" title="Unordered List"><i class="icon-list"></i></button>
    <button class="btn action orderedList" rel="tooltip" title="Ordered List"><i class="icon-list"></i></button>
    <button class="btn action outdentList" rel="tooltip" title="Indent List"><i class="icon-indent-right"></i></button>
    <button class="btn action indentList" rel="tooltip" title="Outdent List"><i class="icon-indent-left"></i></button>
  </div>

  <div class="btn-group">
    <button class="btn action createTable" rel="tooltip" title="Create Table"><i class="icon-th"></i></button>
    <button class="btn dropdown-toggle" data-toggle="dropdown" rel="tooltip" title="Table Operations">
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#" class="action addrowbefore">Add Row Before</a></li>
      <li><a href="#" class="action addrowafter">Add Row After</a></li>
    </ul>
  </div>

</div>

</div><!-- / ".toolbar" -->