Bootstrap 模态中的 TinyMCE 与 Google 翻译冲突

Question

当 TinyMCE 在 Twitter Bootstrap 模式中时，TinyMCE 与 Google 翻译小部件冲突。使用每个的最新版本时会发生这种情况。具体发生的事情是下拉菜单位置太高。这个可以看这个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" 属性，但是与 CSS 存在一些冲突 Google 翻译正在注入，从而将下拉菜单的绝对（顶部）定位应用于文档而不是视口或 window.

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

覆盖 .modal class

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

我承认，这有点老套，但它完成了工作，而且似乎对 Google 翻译的功能没有影响。

Bootstrap 模态中的 TinyMCE 与 Google 翻译冲突

TinyMCE in Bootstrap modal conflicting with Google Translate

javascript

jquery

twitter-bootstrap

tinymce

google-translate