Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It does not work because you should not use the hidden TextBox. Instead you should use <code>HtmlEditorExtender</code>'s editor div. Try this:</p> <pre><code> function onLoad() { document.getElementById('&lt;%=htmlEditorExtender1.ClientID%&gt;_ExtenderContentEditable').setAttribute("contentEditable", "true"); //*** added this var options = { sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH, destinationLanguage: google.elements.transliteration.LanguageCode.GUJARATI, shortcutKey: 'ctrl+g', transliterationEnabled: true }; var control = new google.elements.transliteration.TransliterationControl(options); control.makeTransliteratable(['&lt;%=htmlEditorExtender1.ClientID%&gt;_ExtenderContentEditable']); //**** changed this } google.setOnLoadCallback(onLoad); </code></pre> <p>Basically, I only changed TextBox to <code>HtmlEditorExtender</code>'s editor div, which is <code>&lt;%=htmlEditorExtender1.ClientID%&gt;_ExtenderContentEditable</code></p> <p>According to <a href="https://developers.google.com/transliterate/v1/reference" rel="nofollow">official document</a> to use a div you need <code>contentEditable=true</code> attribute. First line under <code>onLoad()</code> adds that custom attribute to div.</p> <pre>.makeTransliteratable(elementIds, opt_options) enables transliteration on the supplied HTML element(s). Parameters for this method are: elementIds is an array containing strings of editable element IDs or element references for which you wish to enable transliteration. An editable element can be: A text field A text area **A div with contentEditable="true"** An iframe with designMode="on" An iFrame with contentEditable="true" body. Make sure the iFrame is loaded before enabling transliteration.</pre> <p><strong>This worked for me.</strong> If you have trouble getting this work let me know.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload