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

Question

我使用带有 ajaxtoolkit HtmlEditorExtender(Rich textbox) 的文本框，使用 Google 翻译 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的编辑部。试试这个:

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

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