在MVC中查找Twitter Bootstrap和TinyMCE之間的衝突

我很難找出爲什麼我的MVC Bootstrap菜單不能在帶有TinyMCE HTML編輯器的頁面上工作（我正在使用ASP.Net MVC，TinyMCE插件，但只顯示下面生成的HTML）。在MVC中查找Twitter Bootstrap和TinyMCE之間的衝突

我在找什麼，是找到TinyMCE和腳本之間的衝突，使下拉菜單在Twitter Boostrap中工作的某種方式。

它應該顯示：

ss2

...當我將鼠標懸停在屬性，然而，當我在頁面上TinyMCE的編輯器，懸停下拉不起作用： ss1

我生成的HTML是：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Edit</title> 

<link href="/content/css?v=MUk2LfSuGyP1dibrYRROgQuE_irzerGsrA5KYasVO_U1" rel="stylesheet" /> 

</head> 
<body> 
<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </a> 
      <a class="brand" href="#" title="Flexible Group Booking System">Flexible Group Booking System</a> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"> 
        <li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Properties <b class='caret'></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="/property/index">Property List</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"><a href='#' class='dropdown-toggle' data-toggle='dropdown'>Room Types <b class='caret'></b></a> 
         <ul class="dropdown-menu"> 
          <li><a href="/roomtype/index">Room Type List</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <script src="/Scripts/jquery-1.9.1.js"></script> 
    <script src="/Scripts/bootstrap.js"></script> 

    <form action="/email/Edit" method="post"> 
     <input name="__RequestVerificationToken" type="hidden" value="mFXxdzlDHBlUyPia3kwCvb1" /><fieldset> 
      <div class="editor-label"> 
       <label for="EmailBody">EmailBody</label> 
      </div> 
      <div class="editor-field"> 
       <script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script> 
       <script type="text/javascript"> 

        (function() { 

         $(function() { 

          $('#EmailBody').tinymce({ 

           // Location of TinyMCE script 
           script_url: '/Scripts/tinymce/tiny_mce.js', 
           theme: "advanced", 

           height: "300", 
           width: "790", 
           verify_html: false 

          }); 

         }); 

        })(); 

       </script> 

       <textarea length="1418" cols="20" data-val="true" data-val-required="The EmailBody field is required." id="EmailBody" name="EmailBody" rows="2"> 
</textarea> 

      </div> 

      <p class="form-actions"> 
       <input type="submit" value="Save" class="btn btn-primary" /> 
      </p> 
     </fieldset> 
    </form> 
</body> 
</html>

有在eithe沒有顯示JavaScript錯誤r IE或Chrome。

如何解決衝突的地方並嘗試解決？

謝謝

馬克

來源

2013-07-08 Mark

它看起來像2個不同版本的jQuery之間在同一時間可能發生的衝突：

<script src="/Scripts/jquery-1.9.1.js"></script>

和TinyMCE的的自定義jQuery庫：

<script src="/Scripts/tinymce/jquery.tinymce.js" type="text/javascript"></script>

試試this solution加載TinyMCE BEFORE jQuer y：

<script type="text/javascript" src="tiny_mce/jquery.tinymce.js"></script> 
<script type="text/javascript"> 
    tinyMCE.init({ mode : "none"}); 
</script> 

<script type="text/javascript" src="js/jquery.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 
    $('textarea.tinymce').tinymce({ 
     theme : "simple", 
     script_url : 'tiny_mce/tiny_mce.js', 
    }); 
}); 

</script>

來源

2013-07-08 15:15:43

謝謝 - 我沒有點擊那個Tiny也加載jQuery !!!新鮮的眼睛再次贏得勝利 - 歡呼瑞恩 – Mark

在MVC中查找Twitter Bootstrap和TinyMCE之間的衝突

回答

相關問題