Question

40

bootstrap-wysihtml5 is not working

rated 0 times [ 45] [ 5] / answers: 1 / hits: 16190 / 11 Years ago, thu, april 18, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

luizc

Add To Favorites

Follow

Total Points: 623

Total Questions: 87

Total Answers: 103

Location: Zimbabwe

Member since Sat, Feb 27, 2021

3 Years ago

answered 11 Years ago jazmyne · Accepted Answer

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.