bootstrap-wysiwyg editor not shown

Question

Here's the link: http://mindmup.github.io/bootstrap-wysiwyg/. I can't get it to work. I've included the script like that:

<script src="js/bootstrap-wysiwyg.js"></script>

And done like this:

    <div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
      <ul class="dropdown-menu">
      </ul>
    </div>
  <div class="btn-group">
    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
      <ul class="dropdown-menu">
      <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
      <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
      <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
      </ul>
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
    <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
    <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
    <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
    <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
    <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
  </div>
  <div class="btn-group">
      <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
        <div class="dropdown-menu input-append">
            <input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
            <button class="btn" type="button">Add</button>
    </div>
    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>

  </div>

  <div class="btn-group">
    <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
    <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
  </div>
  <div class="btn-group">
    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
  </div>
  <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>

<div id="editor">
  Go ahead&hellip;
</div>

And it still doesn't show the editor. It shows the buttons and that things, but the editor isn't shown. I'm really now to using JavaScript and those things, if anyone could explain it a bit deeply, I would be grateful.

Also, on Chrome developer tools console, I get this error:

Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-wysiwyg.js:17

here's line 17:

$.fn.cleanHtml = function () {

Answer 1

You need the bootstrap library also, which also requires the jQuery library, add those both in head tags of your html. (first jQuery, then boostrap.js, then wsiwyg).

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script src="https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"></script>
 <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
 <script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>

Answer 2

I know this is an old thread, but hopefully it may help someone coming upon it years later like myself with other issues.

Anyway, I was encountering the same problems, and here's what I did:

1. The Cannot read property 'fn' was due to the browser being unable to locate the jquery script, as I had it referenced in a block at the bottom of my base.html file vs the <head>. I'm certain there's an optimal way to handle your scripts across templates without placing them in the <head> of the base.html and incurring a performance hit, but i'm just starting out so I'm not sure what that may be.
2. Regarding what to do with $('#editor').wysiwyg(); - you place this in a script tag at the bottom of the html file that houses your "#editor" div.
3. The reason its just a "box" is that they lightly touch on needing to add a toolbar, but don't provide the entire code for it. However, you can harvest it from the demo page if you inspect it. As of this post it should start with something like the following:

<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> ... </div>

Answer 3

You should include also index.css in the head section of your HTML file. Like so:

<link href="path_to_your_css_files/index.css" rel="stylesheet">

You can copy its content from here