cod*_*Man 2 javascript wysiwyg textarea twitter-bootstrap
我想在正在设计的网页中包含一个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才能工作,作为你案例中的第一个script-element.
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-Object.wysihtml5最有可能将自己绑定到jQuery - prototype,因此可以通过这种方式在jQuery元素上调用它.由于jQuery不存在,您尝试将函数调用为Object在这种情况下不存在的法线.