Question

在</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中单击并输入文本或删除它等。但是，如果我选择文本然后单击工具栏中的某个选项，则没有任何反应。

此外，当我在可编辑div中单击并选择一些文本时，div显示为已选中，但是当我单击其中一个工具栏项时，div / text将被取消选择。

Answer 1

Mindmup WYSIWYG（http://mindmup.github.io/bootstrap-wysiwyg/）应该与Bootstrap 3配合使用，但您需要更改工具栏 - https://github.com/mindmup/bootstrap-wysiwyg/issues/101

这是一个有效的演示：

http://bootply.com/87859

工具栏功能和编辑器文本选择似乎按预期运行。

Answer 2

我找到了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月前提交消息“更新Bootstrap JavaScript插件到2.2.1”

我似乎首先尝试使用的插件还没有为Twitter的Bootstrap 3做好准备。

Bootstrap - WYSIWYG编辑选项无效

2 个答案: