我想在正在设计的网页中包含一个 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
我不知道如何解决这些错误，您认为哪里出了问题？
谢谢。
最佳答案
您需要包含 jQuery 才能使其工作，作为您案例中的第一个脚本元素。
Bootstrap 高度依赖 jQuery，可能还有“wysihtml5”- 插件，因此必须在它们之前包含 jQuery。
您甚至可以通过错误日志看到这一点:
第一个提示是fn:
Uncaught TypeError: Cannot read property 'fn' of undefined
fn 基本上是 prototype - jQuery 的“包装器”，bootstrap 试图在该行上向 jQuery 的原型(prototype)添加一些东西。
第二个提示:
Uncaught TypeError: Object [object Object] has no method 'wysihtml5'
$ 默认绑定(bind)到 Chrome 中的一个选择器函数，因此它返回一个普通的 HTML 元素，而不是本例中的 jQuery 对象。 wysihtml5 很可能会将自己绑定(bind)到 jQuery - 原型(prototype)，因此可以通过这种方式在 jQuery 元素上调用它。
由于 jQuery 不存在，您尝试将函数调用到在这种情况下不存在的普通 Object。
关于javascript - bootstrap-wysihtml5 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16079406/