3

タグの前のドキュメントの最後に</body>、必要なリソースがあります。 

{{ HTML::script('/themes/admin/js/jquery.js') }}
{{ HTML::script('/themes/admin/js/jquery-ui.js') }}
{{ HTML::script('/themes/admin/js/bootstrap.min.js') }}
{{ HTML::script('/themes/admin/js/wys.js') }} // Bootstrap-wysiwyg

すべてのスクリプトがリンクされ、そこにあり、機能しています。これは私のHTMLです： 

<div id="editor" class="well col-md-3" contenteditable="true">

</div>

<script type="text/javascript">
  $('#editor').wysiwyg();
</script>

そして、これはそのすぐ上にある私のツールバーコードです: 

    <div class="well">
      <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
      <div class="btn-group">
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" title="" data-original-title="Font"><i class="glyphicon glyphicon-font"></i><b class="caret"></b></a>
          <ul class="dropdown-menu">
          <li><a data-edit="fontName Serif" style="font-family:'Serif'">Serif</a></li><li><a data-edit="fontName Sans" style="font-family:'Sans'">Sans</a></li><li><a data-edit="fontName Arial" style="font-family:'Arial'">Arial</a></li><li><a data-edit="fontName Arial Black" style="font-family:'Arial Black'">Arial Black</a></li><li><a data-edit="fontName Courier" style="font-family:'Courier'">Courier</a></li><li><a data-edit="fontName Courier New" style="font-family:'Courier New'">Courier New</a></li><li><a data-edit="fontName Comic Sans MS" style="font-family:'Comic Sans MS'">Comic Sans MS</a></li><li><a data-edit="fontName Helvetica" style="font-family:'Helvetica'">Helvetica</a></li><li><a data-edit="fontName Impact" style="font-family:'Impact'">Impact</a></li><li><a data-edit="fontName Lucida Grande" style="font-family:'Lucida Grande'">Lucida Grande</a></li><li><a data-edit="fontName Lucida Sans" style="font-family:'Lucida Sans'">Lucida Sans</a></li><li><a data-edit="fontName Tahoma" style="font-family:'Tahoma'">Tahoma</a></li><li><a data-edit="fontName Times" style="font-family:'Times'">Times</a></li><li><a data-edit="fontName Times New Roman" style="font-family:'Times New Roman'">Times New Roman</a></li><li><a data-edit="fontName Verdana" style="font-family:'Verdana'">Verdana</a></li></ul>
     </div>
     </div>
    </div>

これで、Div 内をクリックして、テキストを入力したり、削除したりできます。ただし、テキストを選択してツールバーのオプションの 1 つをクリックしても、何も起こりません。

また、編集可能な div 内をクリックしてテキストを選択すると、div の輪郭が選択されているように表示されますが、ツールバー項目の 1 つをクリックすると、div/text の選択が解除されます。

4

2 に答える 2

7

Mindmup WYSIWYG ( http://mindmup.github.io/bootstrap-wysiwyg/ ) は Bootstrap 3 で動作するはずですが、ツールバーを変更する必要があります -- https://github.com/mindmup/bootstrap-wysiwyg/issues/101

これが実際のデモです：

http://bootply.com/87859

ツールバーの機能とエディターのテキスト選択は、期待どおりに機能しているようです。

于 2013-10-15T17:43:01.670 に答える
0

http://mindmup.github.io/bootstrap-wysiwyg/とhttp://jhollingworth.github.com/bootstrap-wysihtml5/を見つけました。どちらを使用しようとしていますか?

質問に Twitter の Bootstrap 3 のタグを付けました。

マインドアップ バージョン: ここに TB 2.3.1 が含まれています https://github.com/mindmup/bootstrap-wysiwyg/blob/master/index.html

Bootstrap-wysihtml5 の最新更新は 6 か月前にコミット メッセージに表示されます。「Updated Bootstrap JavaScript plugins to 2.2.1」

あなたが使用しようとしているプラ​​グインは、そもそも Twitter の Bootstrap 3 に対応していないようです。

于 2013-10-14T14:03:17.660 に答える