twitter-bootstrap bootstrap-wysihtml5 不工作

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16079406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 16:56:02  来源:igfitidea点击:

bootstrap-wysihtml5 is not working

javascripttwitter-bootstraptextareawysiwyg

提问by codeMan

I want to include a WYSIWYG editor in a web page that am designing. I came across bootstrap-wysihtml5. By the look of it, it is exactly what I want (simple and elegant). I wanted to look at a example but there are not many good examples showing it how to set it up. So far I have done this:

我想在正在设计的网页中包含一个 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>

These are the errors in the chrome console:

这些是 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

I don't know what how to solve these errors, where do you think am going wrong?

我不知道如何解决这些错误,您认为哪里出了问题?

Thanks.

谢谢。

回答by GNi33

You'll need to include jQuery for this to work, as first script-element in your case.

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

Bootstrap highly depends on jQuery, and probably the "wysihtml5" - plugin too, so jQuery has to be included before those.

Bootstrap 高度依赖于 jQuery,可能还有“wysihtml5” - 插件,因此必须在这些之前包含 jQuery。

You can even see this through the error-log:

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

The first hint is fn:

第一个提示是fn

Uncaught TypeError: Cannot read property 'fn' of undefined   

fnbasically is the prototype- "wrapper" of jQuery, bootstrap tries to add something to the prototype of jQuery on that line.

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

Second hint:

第二个提示:

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

$is bound to a selector-function in Chrome per default, so it returns a usual HTML-Element, not a jQuery-Object in this case. wysihtml5 would most likely bind itself to the jQuery - prototype, so it can be called on jQuery-elements in this way. As jQuery is not present, you try to call a function to a normal Objectthat just doesn't exist in this case.

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