jQuery Text Editor（JQTE）

Question

我最近在我的MVC項目開發中引入了jQuery Text Editor插件（here）。

添加插件非常簡單。然而在執行我查看時，文本編輯器呈現如下：

這是我用我的視圖代碼：

JS引用（忽略大於和小於字符因它不是在這個問題渲染）：

<script src="~/Scripts/jquery-1.11.1.min.js"> 
<script src="~/Plugins/jQuery-TE/jquery-te-1.4.0.min.js"> 
<link href="~/Plugins/jQuery-TE/jquery-te-1.4.0.css" rel="stylesheet"> 

HTML：

<div class="row"> 
    <div class="col-md-9"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading"> 
       Executive Summary 
      </div> 
      <div class="panel-body"> 
       <form role="form"> 
        <div class="form-group"> 
         <textarea name="textarea" class="jqte-test" placeholder="Enter some text">      
         </textarea> 
        </div> 
       </form> 
      </div> 
     </div> 
    </div> 
</div> 

腳本的JQTE：

$('.jqte-test').jqte(); 

// settings of status 
var jqteStatus = true; 
$(".status").click(function() { 
    jqteStatus = jqteStatus ? false : true; 
    $('.jqte-test').jqte({ "status": jqteStatus }) 
}); 

Answer 1

我更改CSS規則

.jqte_tool.jqte_tool_1 .jqte_tool_label { 
position:relative; 
display:block; 
padding:3px; 
width:70px; 
height:16px; /* change it to 20px; */ 
overflow:hidden; } 

這就是它爲我工作。

Answer 2

也許別人：

.jqte_tool.jqte_tool_1 .jqte_tool_label { 
    position:relative; 
    display:block; 
    padding:3px; 
    width:70px; 
    height:21px; /*change*/ 
    overflow:hidden; 
} 
.jqte_tool_label{ 
    padding-top: 1px !important; /*add*/ 
    height: 25px !important; /*add*/ 
} 

對我的作品！

Answer 3

.tab_point_decr, .tab_point_decr img, .tab_point_decr div { 
    overflow: visible !important; /*change*/ 
} 
.jqte_toolbar { 
    overflow: auto !important; 
    padding: 3px 4px; 
    background: #EEE; 
    border-bottom: #BBB 1px solid; 
    position: inherit; 
    overflow: visible !important; /*add*/ 
    height: 35px; /*add*/ 
} 
.jqte_fontsizes { 
    height:auto; /*change*/ 
} 
.jqte_cpalette { 
    z-index:20; /*add*/ 
}