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 では、結果としてツールバーが追加されましたが、Web サイトには表示されません (無効になっているようです。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' の代わりにclass= 'btn btn-default'を試してください。

また、新しいブートストラップhideクラスはdisplay:noneに!importantプロパティを使用します。これにより、リンクや画像を挿入するためにモーダルがポップアップしなくなります。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 に答える