Question

当TinyMCE处于Twitter Bootstrap模式时，TinyMCE与Google Translate小部件发生冲突。使用每个版本的最新版本时会发生这种情况。具体而言，下拉菜单错位太高了。这可以在JSFiddle中找到。

我不确定这是否可以修复，但我想确定导致此冲突的原因以及如何在不完全删除Google翻译小部件的情况下解决此问题。

我用来初始化Google翻译小工具的代码是：

<!-- Google Translate -->
<script>function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:"en",floatPosition:google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT})}</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Answer 1

我无法完全了解它，但在我正在开发的网站上为同一问题找到了可行的解决方案。似乎TinyMCE脚本正在相对于视口正确设置下拉元素上的CSS“top”属性，但是与Google Translate注入的CSS存在一些冲突，其中drop的绝对（顶部）定位向下菜单应用于文档而不是视口或窗口。

我实现的工作是将模态窗口设置为打开相对定位而不是固定，用

覆盖.modal类

.modal {position:relative!important}

在

https://jsfiddle.net/b4etnbvc/1/

同样，这不是一个解决方案，而是一个解决方法，但我想我会分享到目前为止我想出的内容。

Answer 2

几个月后，我发现了这个问题和一个hacky解决方案。问题是Google翻译将body代码的CSS设置为position: relative;，以及其他规则。这就是造成下拉定位问题的原因。

要修复它（因为我使用jQuery），我添加了以下代码：

<script>
$(document).ready(function(){
    setTimeout(function(){
        $("body").css("position", "");
    }, 1000);
});
</script>

我承认，它有点笨拙，但它完成了工作，似乎对谷歌翻译的功能没有任何影响。

Bootstrap模式中的TinyMCE与谷歌翻译冲突

2 个答案: