Question

我使用以下代码尝试了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/检查了指导，但找不到原因。有人可以帮忙吗？

Answer 1

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

此外，新的引导程序隐藏类使用！important 的！important 属性，这将使您的模式不会弹出用于插入链接和图像。您可以使用自己的自定义类替换隐藏类，该类使用 display：none; 而不使用！important属性，它们将起作用。

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

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

Answer 2

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

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的版本无法一起使用。请尝试使用我的源代码中使用的版本。

bootstrap-wysihtml5不起作用

2 个答案: