2

我想在正在设计的网页中包含一个所见即所得的编辑器。我遇到了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

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

谢谢。

4

1 回答 1

7

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

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

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

第一个提示是fn：

Uncaught TypeError: Cannot read property 'fn' of undefined

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

第二个提示：

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

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

于 2013-04-18T10:46:05.097 回答