google transliteration not working in tinymce editor


Arshad

I am trying to integrate google transliteration into a project where the editor is tinymce . My text area :

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

I followed this tutorial to integrate google transliteration and gave the id of my textarea to_be_translatedto the following line

control.makeTransliteratable(['to_be_translated'])

And use 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 is loaded, only Tinymce works, but not transliteration. I can't find the reason behind it. Can someone suggest a solution to the problem?

Arshad

This problem occurs if you try to give the id of the textarea to the google transliteration code while using Tinymce . If you don't modify the text area to Tinymce and provide the ID of the text area, there is no problem . But when you use Tinymce it modifies your code and hides your text area like this,

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

So you won't be able to use the textarea's ID for transliteration.

solution

If you try to inspect tinymce's editor window, you will see an iframe similar to the one below with an ID similar to that of your textarea but with the ID _ifr appended .

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

So now, if you try to modify your Google transliteration code like this,

control.makeTransliteratable(['to_be_translated_ifr'])

Google Transliteration will start working with Tinymce. So in a nutshell Tinymce will hide your textarea and use the iframe with the id iframe just like your textarea but with _ifr appended.
In order for Google transliteration to work when using the Tinymce editor, you have to give the iframe's ID to the transliteration code, not the textarea's ID.

Related


google transliteration not working in tinymce editor

Arshad I am trying to integrate google transliteration into a project where the editor is tinymce . My text area : <textarea id="to_be_translated" style="width:100%"></textarea> I followed this tutorial to integrate google transliteration and gave the id of m

tinymce editor resize function not working

Pawans I'm using tinymce editor version 3.5.8 and trying to resize the editor window, which is not possible by default, I tried adding the autoresizeplugin and setting the resize property of the insize function to bothresize : "both" This is my init function t

tinymce editor resize function not working

Pawans I'm using tinymce editor version 3.5.8 and trying to resize the editor window, which is not possible by default, I tried adding the autoresizeplugin and setting the resize property of the insize function to bothresize : "both" This is my init function t

Transliteration back and forth, not working

FixiDens After a long search and trial, I wrote a function that only worked halfway through, and I managed to fix only the letters Ы. function translit($str) { $str = mb_strtolower($str); $cyr = [ 'а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и

Transliteration back and forth, not working

FixiDens After a long search and trial, I wrote a function that only worked halfway through, and I managed to fix only the letters Ы. function translit($str) { $str = mb_strtolower($str); $cyr = [ 'а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и

Transliteration back and forth, not working

FixiDens After a long search and trial, I wrote a function that only worked halfway through, and I managed to fix only the letters Ы. function translit($str) { $str = mb_strtolower($str); $cyr = [ 'а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и

Transliteration back and forth, not working

FixiDens After a long search and trial, I wrote a function that only worked halfway through, and I managed to fix only the letters Ы. function translit($str) { $str = mb_strtolower($str); $cyr = [ 'а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и

Transliteration back and forth, not working

FixiDens After a long search and trial, I wrote a function that only worked halfway through, and I managed to fix only the letters Ы. function translit($str) { $str = mb_strtolower($str); $cyr = [ 'а', 'б', 'в', 'г', 'д', 'е', 'ё', 'ж', 'з', 'и

Google Cloud Transliteration API

Acker Google does provide a translation API, a text-to-speech API, but is there a transliteration API that shows the pronunciation of Romanian text, like they do in Google Translate ? For example, hello is pronounced heˈlō,həˈlōdifferently in different languag

Google Cloud Transliteration API

Acker Google does provide a translation API, a text-to-speech API, but is there a transliteration API that shows the pronunciation of Romanian text, like they do in Google Translate ? For example, hello is pronounced heˈlō,həˈlōdifferently in different languag

TinyMCE - not working

username <script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", plugins: [ "advlist autolink lists link image char

Tinymce not working

username I'm trying to use tinymce for my django project and it's not working. I installed it using "pip install django-tinymce" and I am trying to use if for admin change form template. Please find the code below. chanage-form.html <script type="text/javascri

Tinymce not working

username I'm trying to use tinymce for my django project and it's not working. I installed it using "pip install django-tinymce" and I am trying to use if for admin change form template. Please find the code below. chanage-form.html <script type="text/javascri

Parse Google Transliteration Json using c#

Ravinda Godala I'm trying to get value from Google Transliterate Json. The Json code looks like this: [ "SUCCESS", [ [ "hlo", [ "jaisa", "jaisaa", "jaissa", "jaisaaa", "zaisa", "jaissaa"

React HTML Editor (TinyMce)

safari I'm looking for an HTML editor for React, but since I can't find anything that works (I just need to format the Text h1, h2, h3, p, bold and images [in base64]) In the end I decided to use Tiny Mce and it worked great. But only when opening the page for

React HTML Editor (TinyMce)

safari I'm looking for an HTML editor for React, but since I can't find anything that works (I just need to format the text h1, h2, h3, p, bold and images [in base64]) In the end I decided to use Tiny Mce and it worked great. But only when opening the page for

Display video in TinyMCE editor

Raz Garthian Good afternoon, I will elaborate on the problem. I am connecting the TinyMCE editor version 4.6.4to my site. It has plugins in the Media plugin through which you can insert media files into the editor. So I add the video to the editor. There are a

Tinymce wiris math editor

Projesh Bumik I'm using Wiris Editor as a plugin in TinyMCE. When I insert the equation from the Wiris editor, it shows it as an image in TinyMCE - I see that this is an embedded image, but when I click on the source tag to save the content, it's in mathml for

Add image to TinyMCE editor

AT-2017 I am using an TinyMCEeditor to insert formatted text, and one of my requirements is to insert an image, like wrapping text on an image. So I plan to make it work another way. What I'm doing now is uploading an image using HTMLfile upload and then inser

Ace editor with TinyMCE textarea

Lynx I'm trying to extend "Code View" and "Design View" in my app. I can use code view (Ace editor) or design view (tinymce) without any problem. However, I would like the two to work together and update the code on either side while developing. This will allo

tinyMCE editor not updating on the fly

Khan Shahrukh I have an HTML form with tinyMCE editor, in the form there is an image upload option with a button, clicking the button will send the file to ajax, then post the value to the controller and upload the image, I keep Good, until here everything wor

tinyMCE editor not updating on the fly

Khan Shahrukh I have an HTML form with tinyMCE editor, in the form there is an image upload option with a button, clicking the button will send the file to ajax, then post the value to the controller and upload the image, I keep Good, until here everything wor

TinyMCE editor remove spaces

User 3731362 I am using version 4.1.5 of TnyMCE editor and when I assign HTML content with spaces like below <h1>Hello this is text with whiteSpace</h1> It removes white space in TinyMce editor. How can we keep whitespace in Tiny MCE editor

Update tinymce editor with knockout

Ryan Caskey I was able to get the knockout table to create the tinymce editor by following the example listed here: Bind knockout table with tinymce The problem is when I try to update the underlying observable in the editableAreas observableArray. The view mo

Tinymce: Toolbar at bottom of editor

Devesh Kumar I am using TinyMCE 4 with modern theme. I want to set the position of the toolbar at the bottom of the editor (just like where the status bar is) Here is the code, but it doesn't work: tinymce.init({ selector: 'textarea#editor',

Tinymce: Toolbar at bottom of editor

Devesh Kumar I am using TinyMCE 4 with modern theme. I want to set the position of the toolbar at the bottom of the editor (just like where the status bar is) Here is the code, but it doesn't work: tinymce.init({ selector: 'textarea#editor',