2013-10-11 68 views
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的內部,並輸入文字或刪除等。但是,如果我選擇文本,然後點擊工具欄上的其中一個選項也沒有任何反應。

此外,當我點擊可編輯的div內,並選擇一些文本div概述顯示爲選中,但當我點擊其中一個工具欄項div /文本被取消選擇。

+0

我想你可能想添加一些關於你想要解決的問題的更多信息。 –

+0

我相信你需要使用文本框,而不是插件的div標籤 –

+0

@DrixsonOseña即使使用textarea標籤而不是div,也不能使用。這很奇怪,因爲第二次點擊可編輯的div/textarea我可以選擇和更改文本,但是當我選擇文本,然後單擊粗體選項按鈕時,它什麼也不做,但是它取消選擇文本。 –

回答

7

Mindmup WYSIWYG(http://mindmup.github.io/bootstrap-wysiwyg/)應自舉3個工作,但您需要更改的工具欄 - https://github.com/mindmup/bootstrap-wysiwyg/issues/101

這裏是一個工作演示:

http://bootply.com/87859

工具欄功能和編輯文本選擇似乎按預期發揮作用。

+0

非常好的演示。鏈接按鈕關閉時,雖然點擊輸入,你可以在這裏找到一個修復http://stackoverflow.com/questions/10863821/bootstrap-dropdown-closing-when-clicked – mpartan

0

我找到了http://mindmup.github.io/bootstrap-wysiwyg/http://jhollingworth.github.com/bootstrap-wysihtml5/哪一個你嘗試使用?

您已經標記了你的問題與Twitter的引導3

的mindup版本:包括結核病2.3.1這裏https://github.com/mindmup/bootstrap-wysiwyg/blob/master/index.html

引導-wysihtml5最新更新6 maonth前顯示提交信息「更新引導的JavaScript插件到2.2.1「

我看起來你嘗試使用的插件尚未準備好用於Twitter的Bootstrap 3。

+0

如果您閱讀註釋,您會看到「mindmup」所見即所得編輯器是正在使用的編輯器。 – ZimSystem