文章/答案/技术大牛

发布

问bootstrap-wysihtml5不工作
EN

Stack Overflow用户

提问于 2013-08-20 18:00:15

回答 2查看 3.4K关注 0票数 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/上的指南，但找不到原因。有人能帮帮忙吗？

twitter-bootstrap

bootstrap-wysiwyg5-rails

回答 2

Stack Overflow用户

发布于 2014-07-04 01:46:08

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

此外，新的bootstrap hide类为display使用了!important属性:none，这将使您的模式不会在插入链接和图像时弹出。您可以将hide类替换为您自己的自定义类，该类使用了不带！display:none;属性的!important属性，它们将正常工作。

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

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

票数 1

Stack Overflow用户

发布于 2014-07-18 21:27:14

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

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的版本不能与我的源代码中使用的版本一起使用together.Try。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18332204

复制

相似问题

问bootstrap-wysihtml5不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap-wysihtml5不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bootstrap-wysihtml5不工作
EN