Finding a conflict between Twitter Bootstrap and TinyMCE in MVC

asp.net-mvc, asp.net-mvc-3, javascript, jquery, tinymce

Solution

It looks like a possible conflict between 2 different versions of jQuery at the same time:

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

and TinyMCE's custom jquery library:

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

Try this solution to load TinyMCE BEFORE jQuery:

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

Problem

I am having great difficulty finding out why my MVC Bootstrap Menus don't work on a page with the TinyMCE HTML editor (I'm using ASP.Net MVC, the TinyMCE plugin, but just showing the generated HTML below). What I'm looking for, is some way of finding conflicts between TinyMCE and the script to make the drop down menus work in Twitter Boostrap. It should show: ... when I hover over Properties, however, when I have the TinyMCE editor on the page, the hover drop down does not work: My generated HTML is: ``` <!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> ``` There are no javascript errors showing in either IE or Chrome. How else can I troubleshoot where the conflict is, and try to resolve it? Thank you, Mark

Original source