CODEWITHSUNDEEP
javascripttinymcetransliteration
arshad
arshad

Reputation: 883

Google transliterate not working inside tinymce editor

I tried to integrate google transliteration in to a project where the editor is tinymce. My textarea:

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

I followed this tutorial for integrating google transliterate and gave my textarea's id to_be_translated to the following line

control.makeTransliteratable(['to_be_translated'])

and used the following code to implement Tinymce for the above textarea.

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

When the page was loaded only Tinymce worked but the transliteration was not. I couldn't find the reason behind it. Could someone please suggest a way to fix the issue?

Upvotes: 1

Views: 664

Answers (1)

arshad
arshad

Reputation: 883

This problem occurs if you try to give your textarea's id to the google transliterate's code, while using Tinymce. There is no problem if you give your textarea's id without calling Tinymce to modify your textarea. But when you use Tinymce, it modifies your code and hide your textarea like this,

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

So you won't be able to transliterate using the textarea's id.

Solution

If you try to inspect the tinymce's editor window you will see an iframe like the one below with id similar to your textarea's id but with _ifr appended to it. 

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

So now if you try to modify your google transliterate code like this,

control.makeTransliteratable(['to_be_translated_ifr'])

google transliterate will start working along with Tinymce. So, in short, Tinymce will hide your textarea and use an iframe with id like your textarea's but with _ifr appended to it.
In order to make the google transliteration work while using the Tinymce editor you have to give the iframe's id to the transliteration code instead of the textarea's id.

Upvotes: 2

Related Questions