2

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 () {
4

3 回答 3

2

您还需要 bootstrap 库，它还需要 jQuery 库，将它们都添加到 html 的 head 标记中。（首先是 jQuery，然后是 boostrap.js，然后是 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>
于 2013-07-29T00:29:44.230 回答
0

您还应该index.css在 HTML 文件的 head 部分中包含。像这样：

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

您可以从此处复制其内容

于 2013-09-18T14:37:17.590 回答
0

我知道这是一个旧线程，但希望它可以帮助像我这样多年后遇到其他问题的人。

无论如何，我遇到了同样的问题，这就是我所做的：

  1. 无法读取属性“fn”是由于浏览器无法找到 jquery 脚本，因为我在 base.html 文件与<head>. 我确信有一种最佳方法可以跨模板处理脚本，而不会将它们放在<head>base.html 中并导致性能下降，但我才刚刚开始，所以我不确定那可能是什么。
  2. 关于如何处理$('#editor').wysiwyg();- 您将其放置在包含“#editor”div 的 html 文件底部的脚本标记中。
  3. 它只是一个“盒子”的原因是他们轻描淡写地提到了需要添加一个工具栏，但没有提供完整的代码。但是，如果您检查它，您可以从演示页面中获取它。从这篇文章开始，它应该从以下内容开始：

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

于 2018-05-16T22:19:25.857 回答