Question

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

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

感谢。

Answer 1

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

Bootstrap在很大程度上取决于jQuery，也可能是“wysihtml5” - 插件，所以jQuery必须包含在那些之前。

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

第一个提示是fn：

Uncaught TypeError: Cannot read property 'fn' of undefined

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

第二个提示：

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

默认情况下，

$绑定到Chrome中的选择器函数，因此它返回通常的HTML元素，而不是jQuery-Object。 wysihtml5最有可能将自己绑定到jQuery - prototype，因此可以通过这种方式在jQuery元素上调用它。由于jQuery不存在，您尝试将函数调用为在这种情况下不存在的正常Object。

bootstrap-wysihtml5不能正常工作

1 个答案: