0

我已经使用以下代码尝试了 bootstrap-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中，结果是它添加了工具栏，但是它没有出现在网站上（似乎被禁用，可能是因为display=none但我无法更改它）

<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/上的指导，但找不到原因。有人可以帮忙吗？

4

2 回答 2

1

如果您使用的是较新的 Bootstrap 版本，请检查您是否拥有正确的类名。尝试使用 class='btn btn-default'而不是class='btn'。

此外，新的引导程序隐藏类使用!important属性进行display:none这将使您的模式不会弹出以插入链接和图像。您可以将 hide 类替换为您自己的使用display:none 的自定义类；没有 !important 属性，它们将起作用。

在此处查看组件页面：http: //getbootstrap.com/components/ 因为您可能需要更改/添加更多类

此外，您应该在样式表之后加载脚本文件。

于 2014-07-03T17:46:07.870 回答
0

这有点晚了，但我在这个小提琴中重现了我的代码并且它有效。

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 和 boostrap 的版本不能一起工作。试试我的源代码中使用的版本。

于 2014-07-18T13:27:14.360 回答