bootstrap-wysihtml5 is not working

javascript twitter-bootstrap textarea wysiwyg

15,787

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

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

You can even see this through the error-log:

The first hint is fn:

Uncaught TypeError: Cannot read property 'fn' of undefined

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

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 Object that just doesn't exist in this case.

15,787

Author by

codeMan

Enthusiastic software developer. Working as Staff engineer at Blackhawk Networks

Updated on June 04, 2022

Comments

codeMan about 2 years

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:

<!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:

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.