Question

我很难找到为什么我的MVC Bootstrap菜单不能在带有TinyMCE HTML编辑器的页面上工作（我使用的是ASP.Net MVC，TinyMCE插件，但只是在下面显示生成的HTML）。

我正在寻找的是找到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>

IE或Chrome中都没有显示javascript错误。

我还能如何解决冲突的位置，并尝试解决它？

谢谢，

标记

Answer 1

看起来两个不同版本的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在jQuery之前加载TinyMCE：

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

在MVC中发现Twitter Bootstrap和TinyMCE之间的冲突

1 个答案: