twitter-bootstrap Bootstrap - WYSIWYG 编辑选项无效
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19308485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - WYSIWYG editing options have no effect
提问by Sterling Duchess
At the end of my document before </body>tag I have the required resources:
在</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
All scripts are linked and there and working. This is my HTML:
所有脚本都已链接并在那里工作。这是我的 HTML:
<div id="editor" class="well col-md-3" contenteditable="true">
</div>
<script type="text/javascript">
$('#editor').wysiwyg();
</script>
And this is my toolbar code right above that:
这是我的工具栏代码正上方:
<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>
And now I can click inside my Div and enter text or delete it etc. However if I select the text and then click on one of the options in the toolbar nothing happens.
现在我可以在我的 Div 内单击并输入文本或删除它等。但是,如果我选择文本然后单击工具栏中的选项之一,则不会发生任何事情。
Also when I click inside the editable div and select some text the div is outlined showing as selected but when I click on one of the toolbar items the div/text gets deselected.
此外,当我在可编辑的 div 内单击并选择一些文本时,该 div 的轮廓显示为已选择,但是当我单击工具栏项目之一时,div/文本被取消选择。
回答by Zim
Mindmup WYSIWYG (http://mindmup.github.io/bootstrap-wysiwyg/) should work with Bootstrap 3, but you need to change the toolbar -- https://github.com/mindmup/bootstrap-wysiwyg/issues/101
Mindmup WYSIWYG ( http://mindmup.github.io/bootstrap-wysiwyg/) 应该与 Bootstrap 3 一起使用,但您需要更改工具栏 -- https://github.com/mindmup/bootstrap-wysiwyg/issues/101
Here is a working demo:
这是一个工作演示:
The toolbar functions and editor text selection seem to function as expected.
工具栏功能和编辑器文本选择似乎按预期运行。
回答by Bass Jobsen
I found http://mindmup.github.io/bootstrap-wysiwyg/and http://jhollingworth.github.com/bootstrap-wysihtml5/which one do you try to use?
我找到了http://mindmup.github.io/bootstrap-wysiwyg/和http://jhollingworth.github.com/bootstrap-wysihtml5/你尝试使用哪一个?
You have tagged your question with Twitter's Bootstrap 3.
您已使用 Twitter 的 Bootstrap 3 标记了您的问题。
The mindup version: Includes TB 2.3.1 here https://github.com/mindmup/bootstrap-wysiwyg/blob/master/index.html
Mindup 版本:在此处包含 TB 2.3.1 https://github.com/mindmup/bootstrap-wysiwyg/blob/master/index.html
Bootstrap-wysihtml5 latest update 6 maonth ago show in commit message "Updated Bootstrap JavaScript plugins to 2.2.1"
Bootstrap-wysihtml5 6 个月前的最新更新在提交消息中显示“将 Bootstrap JavaScript 插件更新为 2.2.1”
I seems the plugins you try to use are not ready for Twitter's Bootstrap 3 in the first place.
我似乎您尝试使用的插件一开始还没有为 Twitter 的 Bootstrap 3 做好准备。

