包含 jquery-ui.min.js 时无法输入 tinymce textarea - 主页相关
cannot type into tinymce textarea when jquery-ui.min.js is included - MASTERPAGE RELATED
我查了很多资源,但找不到其他人有同样的问题。当我包含这个时,Tinymce 不可点击:<script src="../Scripts/jquery-ui.min.js"></script>
如果我没有它,它工作完美。如果我包含它,那么我无法在文本区域内单击并键入内容。问题是我需要包含 jquery-ui 文件。
你知道这里发生了什么吗?
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/jquery-ui.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="../Scripts/jquery-ui.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/tinymce/tinymce.min.js"></script>
<script src="../Scripts/tinymce/jquery.tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea#txt_PostComment",
theme: "modern",
menubar: false,
statusbar: false,
toolbar_items_size: 'small',
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
width: '100%',
toolbar1: "insert file undo redo | styleselect | bold italic | alignleft aligncenter alignright align justify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
]
});
</script>
<textarea id="txt_PostComment">Your content here.</textarea>
更新
我只在使用 MasterPage 的页面中遇到这个问题。我在其他页面测试过,效果很好。您知道为什么 MasterPage 会造成这种情况吗?
下面是在没有母版页的 WebForm 中使用 TinyMce 与在带有母版页的 Webform 中使用时的外观。在带有 Masterpage 的页面中,您会看到部分变空,这就是问题所在。
不工作:
工作
您将不得不使用 jquery noconflict 来解决这个问题。
$.noConflict();
fancybox 2 and tinymce jquery conflict
单击按钮时,会显示包含 TINYMCE 文本的 Div
动画,如下所示:
$("#pnl_DiscussionWalls").show('slide', { direction: 'left' }, 500);
当我用 fadeIn
替换 sliding-left
动画时,效果非常好。
$("#pnl_DiscussionWalls").fadeIn(500);
所以,教训是,如果你的应用程序中有TinyMce,不要使用jquery-ui提供的幻灯片动画。它只是与某些东西发生冲突,并制造麻烦。只需使用像淡入这样的简单动画。我希望这对遇到类似问题的人有所帮助。
我查了很多资源,但找不到其他人有同样的问题。当我包含这个时,Tinymce 不可点击:<script src="../Scripts/jquery-ui.min.js"></script>
如果我没有它,它工作完美。如果我包含它,那么我无法在文本区域内单击并键入内容。问题是我需要包含 jquery-ui 文件。
你知道这里发生了什么吗?
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/jquery-ui.min.css" rel="stylesheet" />
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script src="../Scripts/jquery-ui.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/tinymce/tinymce.min.js"></script>
<script src="../Scripts/tinymce/jquery.tinymce.min.js"></script>
<script>
tinymce.init({
selector: "textarea#txt_PostComment",
theme: "modern",
menubar: false,
statusbar: false,
toolbar_items_size: 'small',
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
width: '100%',
toolbar1: "insert file undo redo | styleselect | bold italic | alignleft aligncenter alignright align justify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
]
});
</script>
<textarea id="txt_PostComment">Your content here.</textarea>
更新
我只在使用 MasterPage 的页面中遇到这个问题。我在其他页面测试过,效果很好。您知道为什么 MasterPage 会造成这种情况吗?
下面是在没有母版页的 WebForm 中使用 TinyMce 与在带有母版页的 Webform 中使用时的外观。在带有 Masterpage 的页面中,您会看到部分变空,这就是问题所在。
不工作:
工作
您将不得不使用 jquery noconflict 来解决这个问题。
$.noConflict();
fancybox 2 and tinymce jquery conflict
单击按钮时,会显示包含 TINYMCE 文本的 Div
动画,如下所示:
$("#pnl_DiscussionWalls").show('slide', { direction: 'left' }, 500);
当我用 fadeIn
替换 sliding-left
动画时,效果非常好。
$("#pnl_DiscussionWalls").fadeIn(500);
所以,教训是,如果你的应用程序中有TinyMce,不要使用jquery-ui提供的幻灯片动画。它只是与某些东西发生冲突,并制造麻烦。只需使用像淡入这样的简单动画。我希望这对遇到类似问题的人有所帮助。