CODEWITHSUNDEEP
twitter-bootstrapbootstrap-wysiwyg5-rails
Thang Nguyen
Thang Nguyen

Reputation: 1151

bootstrap-wysihtml5 doesn't work

I have tried the bootstrap-wysihtml5 using following code:

<html debug="true" slick-uniqueid="3">
<head>
    <meta charset="utf-8"/>
    <title>Test WYSIWYG</title>
    <script type="text/javascript" src="http://localhost/test/wysihtml5-0.3.0.js"/></script>
    <script type="text/javascript" src="http://localhost/test/jquery-1.9.1.js"> </script>
    <script type="text/javascript" src="http://localhost/test/bootstrap.min.js"/>   </script>
    <script type="text/javascript" src="http://localhost/test/bootstrap-wysihtml5.js"/></script>

    <link type="text/css" rel="stylesheet" href="http://localhost/test/bootstrap.min.css"/>
    <link type="text/css" rel="stylesheet" href="http://localhost/test/bootstrap-wysihtml5.css"/>



</head>
<body>
    Test
    <div class="container">
        <textarea class="textarea" style="width: 810px; height: 200px;"></textarea>
    </div>
    <script>
    $('.textarea').wysihtml5();
    </script>

</body>
</html>

And it doesn't work. In Firebug, the result is that it has added the toolbar, however it does not appear on the website (seem to be disabled, may be because display=none but I can't change it)

<ul id="undefined-wysihtml5-toolbar" class="wysihtml5-toolbar" style="display: none;">
<li class="dropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-font"/>
<span class="current-font">Normal text</span>
<b class="caret"/>
</a>
<ul class="dropdown-menu">
<li>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="div">Normal text</a>
</li>
<li>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h1">Heading 1</a>
</li>
<li>
<a data-wysihtml5-command="formatBlock" data-wysihtml5-command-value="h2">Heading 2</a>
</li>
</ul>
</li>
<li>
<div class="btn-group">
<a class="btn" data-wysihtml5-command="bold" title="CTRL+B">Bold</a>
<a class="btn" data-wysihtml5-command="italic" title="CTRL+I">Italic</a>
</div>
</li>
<li>
<div class="btn-group">
<a class="btn" data-wysihtml5-command="insertUnorderedList" title="Unordered List">
<i class="icon-list"/>
</a>
<a class="btn" data-wysihtml5-command="insertOrderedList" title="Ordered List">
<i class="icon-th-list"/>
</a>
<a class="btn" data-wysihtml5-command="Outdent" title="Outdent">
<i class="icon-indent-right"/>
</a>
<a class="btn" data-wysihtml5-command="Indent" title="Indent">
<i class="icon-indent-left"/>
</a>
</div>
</li>
<li>
<div class="bootstrap-wysihtml5-insert-link-modal modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Insert Link</h3>
</div>
<div class="modal-body">
<input value="http://" class="bootstrap-wysihtml5-insert-link-url input-xlarge"/>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">Insert link</a>
</div>
</div>
<a class="btn" data-wysihtml5-command="createLink" title="Link">
<i class="icon-share"/>
</a>
</li>
<li>
<div class="bootstrap-wysihtml5-insert-image-modal modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Insert Image</h3>
</div>
<div class="modal-body">
<input value="http://" class="bootstrap-wysihtml5-insert-image-url input-xlarge"/>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Cancel</a>
<a href="#" class="btn btn-primary" data-dismiss="modal">Insert image</a>
</div>
</div>
<a class="btn" data-wysihtml5-command="insertImage" title="Insert image">
<i class="icon-picture"/>
</a>
</li>
</ul>
<textarea class="textarea" style="width: 810px; height: 200px;"/>

I have checked the guidance at https://github.com/jhollingworth/bootstrap-wysihtml5/ and cannot found the cause. Could anyone help please?

Upvotes: 0

Views: 3838

Answers (2)

Fr4NgUs
Fr4NgUs

Reputation: 476

It's is a bit late but I reproduce my code in this fiddle and it works.

https://jsfiddle.net/zzr21yf1/

<html debug="true" slick-uniqueid="3">
    <head>
        <meta charset="utf-8"/>
        <title>Test WYSIWYG</title>
        <!-- CSS styles -->
        <link rel="stylesheet" type="text/css" href="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/css/prettify.css"/>
        <link type="text/css" rel="stylesheet" href="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.css"/>
    </head>
    <body>
        <div class="container">
            <textarea class="textarea" style="width: 810px; height: 200px;"></textarea>
        </div>
       <!-- JS -->
       <script src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"></script>
       <script src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/jquery-1.7.2.min.js"></script>
       <script src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/prettify.js"/></script>
       <script src="http://jhollingworth.github.io/bootstrap-wysihtml5/lib/js/bootstrap.min.js"/></script>
       <script src="http://jhollingworth.github.io/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"/></script>
       <script>
           $('.textarea').wysihtml5();
       </script>
    </body>
</html>

I think is due to the version of jquery and boostrap that couldn't work together.Try with the version used in my source code.

Upvotes: 0

Noah M Lively
Noah M Lively

Reputation: 86

If you are using a newer Bootstrap version then check that you have the correct class names. Try class='btn btn-default' instead of class='btn'.

Also, the new bootstrap hide class uses the !important property for display:none which will make it so your modal will not popup for inserting links and images. You can replace the hide class with your own custom class that uses display:none; with out the !important property and they will work.

Check out the components page here: http://getbootstrap.com/components/ as you may need to change/add more classes

Also, you should load your script files after your stylesheets.

Upvotes: 1

Related Questions