2015-05-12 5 views
0

Недавно я включил плагин jQuery Text Editor (here) в моем проекте MVC.jQuery Text Editor (JQTE)

Было легко добавить плагин. Однако при выполнении моей точки зрения текстового редактор делает следующим образом:

enter image description 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 }) 
}); 
+0

кажется вы используете загрузчик, может быть, есть некоторые конфликты из 'JQuery Text Editor' и самонастройки родной CSS ... – Frogmouth

+0

Hi Frogmouth. Вы правы. Я просто прокомментировал ту часть, где область стилей форварда, загруженная в текстовый редактор, теперь отображается ОК. Однако остальная часть страницы нет. Я попытаюсь выяснить, что такое стиль CSS, вызывающий проблемы. спасибо – MikePR

ответ

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; } 

Вот как это работает для меня.

0

Может быть, для кого-то еще:

.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*/ 
} 

работает для меня!

0
.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*/ 
} 
+0

Добро пожаловать в переполнение стека! Благодарим вас за этот фрагмент кода, который может предоставить некоторую ограниченную немедленную помощь. Правильное объяснение [значительно улучшило бы] (// meta.stackexchange.com/q/114762) его долгосрочную ценность, показав * почему * это хорошее решение проблемы и сделало бы его более полезным для будущих читателей с другие, подобные вопросы. Пожалуйста, отредактируйте свой ответ, чтобы добавить какое-то объяснение, включая сделанные вами предположения. –

Смежные вопросы