bootstrap-wysihtml5 不工作答案

【问题标题】：bootstrap-wysihtml5 is not workingbootstrap-wysihtml5 不工作
【发布时间】：2013-04-18 09:36:46
【问题描述】：

我想在正在设计的网页中包含一个所见即所得的编辑器。我遇到了bootstrap-wysihtml5。从外观上看，这正是我想要的（简单而优雅）。我想看一个例子，但没有多少好的例子可以展示如何设置它。到目前为止，我已经这样做了：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Editor</title>
    <link rel="stylesheet" type="text/css" media="screen" href="bootstrap-wysihtml5.css"/>
    <script src = "bootstrap-wysihtml5.js" type = "text/javascript"></script>
    <script src = "wysihtml5-0.3.0.min.js" type = "text/javascript"></script>
    <script src = "bootstrap.min.js" type = "text/javascript"></script>
</head>
<body>
   <textarea class="textarea" id="ta1" placeholder="Enter text ..." style="width: 810px; height: 200px">
   </textarea>
   <script>$(".textarea").wysihtml5();</script>
<body>
</html>

这些是 chrome 控制台中的错误：

Uncaught TypeError: Cannot read property 'fn' of undefined             bootstrap-wysihtml5.js:368
Uncaught TypeError: undefined is not a function                        bootstrap.min.js:6
Uncaught TypeError: Object [object Object] has no method 'wysihtml5'   editor.html:14

我不知道如何解决这些错误，您认为哪里出错了？

谢谢。

【问题讨论】：

whispers 包含 jQuery 作为第一个脚本文件
是的，包括 JQuery！及其工作。以前我包含了 JQuery，但顺序错误。现在一切似乎都很好。谢谢@GNi33
你会把它添加为@GNi33的答案吗？我很乐意接受。

标签： javascript twitter-bootstrap textarea wysiwyg

【解决方案1】：

您需要包含 jQuery 才能使其工作，作为您案例中的第一个脚本元素。

Bootstrap 高度依赖 jQuery，可能还有 "wysihtml5" - 插件，所以之前必须包含 jQuery。

您甚至可以通过错误日志看到这一点：

第一个提示是fn:

Uncaught TypeError: Cannot read property 'fn' of undefined

fn 基本上是prototype - jQuery 的“包装器”，bootstrap 尝试在该行的 jQuery 原型中添加一些东西。

第二个提示：

Uncaught TypeError: Object [object Object] has no method 'wysihtml5'

$ 默认绑定到 Chrome 中的选择器函数，因此在这种情况下它返回一个普通的 HTML 元素，而不是 jQuery 对象。 wysihtml5 很可能会将自己绑定到 jQuery - 原型，因此可以以这种方式在 jQuery 元素上调用它。由于 jQuery 不存在，您尝试调用一个普通的 Object 函数，但在这种情况下不存在。

【讨论】：

请注意，project's homepage 上有一个“要引用的文件”列表，其中包括 jQuery。