谷歌音译无法在tinymce编辑器中工作

Question

我试图将google音译集成到编辑器为tinymce的项目中。 我的文字区域 ：

<textarea id="to_be_translated" style="width:100%"></textarea>

我按照本教程进行了集成，将google transliterate集成在一起，并将我的textarea的ID to_be_translated为to_be_translated到以下行

control.makeTransliteratable（[ 'to_be_translated']）

并使用以下代码为上述textarea实现Tinymce。

<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

加载页面时，只有Tinymce可以工作，但音译却没有。 我找不到背后的原因。 有人可以提出解决问题的方法吗？

Answer 1

如果您在使用Tinymce时尝试将textarea的ID赋予Google音译代码，则会出现此问题。 如果您不给Tinymce修改文本区域而提供了文本区域的ID，就没有问题。 但是当您使用Tinymce时，它会修改您的代码并像这样隐藏您的文本区域，

<textarea id="to_be_translated" style="width: 100%; display: none;" aria-hidden="true"></textarea>

因此，您将无法使用textarea的ID进行音译。

解

如果您尝试检查tinymce的编辑器窗口，将会看到一个iframe，类似于下面的iframe，其id与textarea的id相似，但附加了_ifr 。

 <iframe id="to_be_translated_ifr" style="width: 100%; height: 100px; display: block;"></iframe> 

因此，现在，如果您尝试像这样修改您的Google音译代码，

control.makeTransliteratable（[ 'to_be_translated_ifr']）

谷歌音译将开始与Tinymce合作。 因此，简而言之，Tinymce将隐藏您的textarea，并使用ID为iframe的iframe，就像您的textarea一样，但附加_ifr。
为了在使用Tinymce编辑器时使Google音译工作，您必须将iframe的ID赋予音译代码，而不是textarea的ID。