title: Bootstrap - WYSIWYG editing options have no effect
body: <p>At the end of my document before <code>&lt;/body&gt;</code> tag I have the required resources:  </p>
  
  <pre><code>{{ HTML::script('/themes/admin/js/jquery.js') }}
  {{ HTML::script('/themes/admin/js/jquery-ui.js') }}
  {{ HTML::script('/themes/admin/js/bootstrap.min.js') }}
  {{ HTML::script('/themes/admin/js/wys.js') }} // Bootstrap-wysiwyg
  </code></pre>
  
  <p>All scripts are linked and there and working. This is my HTML:  </p>
  
  <pre><code>&lt;div id="editor" class="well col-md-3" contenteditable="true"&gt;
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
    $('#editor').wysiwyg();
  &lt;/script&gt;
  </code></pre>
  
  <p>And this is my toolbar code right above that:  </p>
  
  <pre><code>    &lt;div class="well"&gt;
        &lt;div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"&gt;
        &lt;div class="btn-group"&gt;
          &lt;a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font"&gt;&lt;i class="glyphicon glyphicon-font"&gt;&lt;/i&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
            &lt;li&gt;&lt;a data-edit="fontName Serif" style="font-family:'Serif'"&gt;Serif&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Sans" style="font-family:'Sans'"&gt;Sans&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Arial" style="font-family:'Arial'"&gt;Arial&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Arial Black" style="font-family:'Arial Black'"&gt;Arial Black&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Courier" style="font-family:'Courier'"&gt;Courier&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Courier New" style="font-family:'Courier New'"&gt;Courier New&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'"&gt;Comic Sans MS&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Helvetica" style="font-family:'Helvetica'"&gt;Helvetica&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Impact" style="font-family:'Impact'"&gt;Impact&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'"&gt;Lucida Grande&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'"&gt;Lucida Sans&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Tahoma" style="font-family:'Tahoma'"&gt;Tahoma&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Times" style="font-family:'Times'"&gt;Times&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'"&gt;Times New Roman&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-edit="fontName Verdana" style="font-family:'Verdana'"&gt;Verdana&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
       &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And now I can click inside my Div and enter text or delete it etc. However if I select the text and then click on one of the options in the toolbar nothing happens.  </p>
  
  <p>Also when I click inside the editable div and select some text the div is outlined showing as selected but when I click on one of the toolbar items the div/text gets deselected.</p>