Question

我使用带有ajaxtoolkit HtmlEditorExtender（Rich textbox）的文本框，使用Google翻译Javascript将英语翻译成古吉拉特语。它仅适用于文本框，但是当我使用HtmlEditorExtender（Rich文本框）时，它不起作用。

以下是我使用的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

它不起作用，因为您不应该使用隐藏的TextBox。相反，你应该使用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) 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.

这对我有用。如果您无法完成这项工作，请告诉我。

使用Javascript for HtmlEditorExtender的Google翻译不起作用

1 个答案: