All geek questions in one place

Finding Conflict Between Twitter Downloader and TinyMCE in MVC

It is very difficult for me to find out why my MVC Bootstrap Menus do not work on the page with the TinyMCE HTML editor (I use ASP.Net MVC, the TinyMCE plugin, but just show the generated HTML below).

What I'm looking for is a way to find conflicts between TinyMCE and the script so that the dropdown menus work in Twitter Boostrap.

He must show:

ss2

... when I was hovering over Properties, however, when I have a TinyMCE editor on the page, the lunge down doesn't work: ss1

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

There are no javascript errors in IE or Chrome.

How else can you find out where the conflict is and try to resolve it?

Thanks,

Mark

+4
source share
1 answer

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

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

and the TinyMCE custom jquery library:

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

Try this solution to download 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>
+4
source

Source: https://habr.com/ru/post/1490312/

More articles:


All Articles