使用 Javascript 进行 HtmlEditorExtender 的 Google 翻译不起作用

Question

我使用了带有 ajaxtoolkit HtmlEditorExtender(Rich textbox) 的文本框，使用谷歌翻译 Javascript 将英语翻译成古吉拉特语。它只适用于文本框，但是当我使用 HtmlEditorExtender(Rich textbox) 时它不起作用。

以下是我使用的 Javascript。

<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

它不起作用，因为您不应该使用隐藏的文本框。相反，您应该使用HtmlEditorExtender 的编辑器 div。试试这个：

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

基本上我只是把TextBox改成了HtmlEditorExtender的编辑器div，也就是<%=htmlEditorExtender1.ClientID%>_ExtenderContentEditable

根据official document 使用一个div 你需要contentEditable=true 属性。 onLoad() 下的第一行将该自定义属性添加到 div。

.makeTransliteratable(elementIds, opt_options) 在提供的 HTML 元素上启用音译。此方法的参数是：

elementIds 是一个数组，其中包含您希望启用音译的可编辑元素 ID 或元素引用字符串。可编辑元素可以是：
一个文本字段
一个文本区域
** contentEditable="true" 的 div **
带有 designMode="on" 的 iframe
具有 contentEditable="true" 正文的 iFrame。确保在启用音译之前加载 iFrame。

这对我有用。如果您在完成这项工作时遇到问题，请告诉我。