在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之间的冲突

回答

相关问题