4

我很难找出为什么我的 MVC 引导菜单不能在带有 TinyMCE HTML 编辑器的页面上工作（我使用的是 TinyMCE 插件 ASP.Net MVC，但只显示下面生成的 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 错误。

我还能如何解决冲突所在，并尝试解决它？

谢谢，

标记

4

1 回答 1

4

看起来可能同时存在 2 个不同版本的 jQuery 之间的冲突：

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

和 TinyMCE 的自定义 jquery 库：

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

尝试使用此解决方案在 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>
于 2013-07-08T15:15:43.180 回答