引導-wysihtml5不起作用

我一直在使用下面的代碼試圖引導-wysihtml5：引導-wysihtml5不起作用

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

而且這是行不通的。在Firebug的，其結果是，它已經增加了工具欄，但它不會出現在網站上（已被禁用，可能是因爲顯示器=無，但我不能改變它）

<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;"/>

我檢查了指南https://github.com/jhollingworth/bootstrap-wysihtml5/並找不到原因。任何人都可以幫忙嗎？

來源

2013-08-20 Thang Nguyen

如果您使用的是較新的Bootstrap版本，請檢查您是否擁有正確的類名。嘗試class ='btn btn-default'而不是class ='btn'。

此外，新的引導隱藏類使用重要屬性顯示：無這將使它所以你的模式將不插入鏈接和圖片彈出。您可以用您自己的自定義班級替換隱藏班級，該班級使用display：none;與！！重要財產，他們將工作。

退房組件頁面在這裏：http://getbootstrap.com/components/，你可能需要更改/添加更多的類

此外，你應該將樣式表後加載腳本文件。

來源

2014-07-03 17:46:07

這是有點遲了，但我在這個小提琴中重現我的代碼，它的工作原理。

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>

我認爲是由於版本jQuery和自舉的，可以不與我的源代碼中使用的版本工作together.Try。

來源

2014-07-18 13:27:14 Fr4NgUs

引導-wysihtml5不起作用

回答

相關問題