Google 音译在 tinymce 编辑器中不起作用

Question

我尝试将google音译集成到编辑器为tinymce的项目中。我的 textarea:

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

我按照 this tutorial 集成了 google 音译并将我的文本区域的 ID to_be_translated 提供给以下行

control.makeTransliteratable(['to_be_translated'])

并使用以下代码为上述文本区域实现 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 时尝试将 文本区域的 ID 提供给 google 音译代码，则会出现此问题。如果您提供 textarea 的 id 而不调用 Tinymce 来修改您的 textarea，则没有问题。但是当你使用 Tinymce 时，它会修改你的代码并像这样隐藏你的文本区域，

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

因此您将无法使用文本区域的 ID 进行音译。

解决方案

如果您尝试检查 tinymce 的编辑器 window，您将看到一个如下所示的 iframe，其 id 与您的文本区域的 id 相似，但附加了 _ifr。

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

现在，如果您尝试像这样修改 google 音译代码，

control.makeTransliteratable(['to_be_translated_ifr'])

google transliterate 将开始与 Tinymce 一起工作。因此，简而言之，Tinymce 将隐藏您的 textarea 并使用 iframe，其 id 与您的 textarea 相同，但附加了 _ifr。
为了在使用 Tinymce 编辑器时使 google 音译工作，您必须将 iframe 的 id 而不是文本区域的 id 提供给音译代码。

Google 音译在 tinymce 编辑器中不起作用

Google transliterate not working inside tinymce editor

javascript

tinymce

transliteration

解决方案