Google translate using Javascript for HtmlEditorExtender doesn't work

Question

I have used the text box with ajaxtoolkit HtmlEditorExtender(Rich textbox) for translating English to Gujarati using Google translation Javascript. It works well only for text box, but when I used HtmlEditorExtender(Rich textbox) it does not work.

Below is the Javascript I used.

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("elements", "1", {
            packages: "transliteration"
        });
        function onLoad() {
            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(['<%=TextBox1.ClientID%>']);
        }
        google.setOnLoadCallback(onLoad);

        var finalString = "";
        function Changed(textControl) {

            var _txtUnicodeName = document.getElementById('<%=TextBox1.ClientID%>');

            var _EnteredString = _txtUnicodeName.value;
        }
    </script>

    <asp:UpdatePanel ID="Activistupdatepanel" runat="server">
                    <ContentTemplate>
                        <div>
                            <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <ajaxtoolkit:HtmlEditorExtender ID="htmlEditorExtender1" TargetControlID="TextBox1"
                        runat="server" EnableSanitization="False" Enabled="True">
                    </ajaxtoolkit:HtmlEditorExtender>
                        </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

Answer 1

It does not work because you should not use the hidden TextBox. Instead you should use HtmlEditorExtender 's editor div. Try this:

        function onLoad() {
        document.getElementById('<%=htmlEditorExtender1.ClientID%>_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(['<%=htmlEditorExtender1.ClientID%>_ExtenderContentEditable']); //**** changed this
    }
    google.setOnLoadCallback(onLoad);

Basically, I only changed TextBox to HtmlEditorExtender 's editor div, which is <%=htmlEditorExtender1.ClientID%>_ExtenderContentEditable

According to official document to use a div you need contentEditable=true attribute. First line under onLoad() adds that custom attribute to div.

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

This worked for me. If you have trouble getting this work let me know.