在我的文档末尾 </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/文本被取消选择。
最佳答案
Mindmup 所见即所得 ( http://mindmup.github.io/bootstrap-wysiwyg/ ) 应该可以与 Bootstrap 3 一起使用,但您需要更改工具栏 -- https://github.com/mindmup/bootstrap-wysiwyg/issues/101
这是一个工作演示:
工具栏功能和编辑器文本选择似乎按预期运行。
关于twitter-bootstrap - Bootstrap - 所见即所得编辑选项无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19308485/