Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Editor / Google Translation

   
  
 
 
   

  • Google Translation

    This demo shows how to translate either the whole content or a selection of text inside the RadEditor's content area using the Google AJAX Language API. The user interface uses a custom dropdown, which lists the available language options.

    To add the Google AJAX Language API to the page, include the Google AJAX API's script tag and call google.load("language", "1"):

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type
    ="text/javascript">
    google.load(
    "language", "1");
    </script>

    To populate the custom TranslateTool dropdown with language items add the inner-tag telerik:EditorDropDownItem inside the Tools --> telerik:EditorToolGroup tags:

    <telerik:RadEditor ID="RadEditor1" Skin="Telerik" OnClientCommandExecuting="OnClientCommandExecuting" runat="server">
    <Tools>
    <telerik:EditorToolGroup>
    <telerik:EditorDropDown Name="TranslateTool" Text="<img src='./flags/en.png' /> Translation Tool" width="130" ItemsPerRow="1" PopupWidth="160" PopupHeight="300">
    <telerik:EditorDropDownItem Name ="<img src='./flags/en.png' /> English" value="en" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/es.png' /> Spanish" value="es" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/de.png' /> German" value="de" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/fr.png' /> French" value="fr" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/it.png' /> Italian" value="it" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/ru.png' /> Russian" value="ru" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/pt-pt.png' /> Portuguese" value="pt" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/he.png' /> Hebrew" value="he" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/nl.png' /> Dutch" value="nl" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/ja.png' /> Japanese" value="ja" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/bg.png' /> Bulgarian" value="bg" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/ro.png' /> Romanian" value="ro" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/uk.png' /> Ukrainian" value="uk" />
    <
    telerik:EditorDropDownItem Name ="<img src='./flags/sv.png' /> Swedish" value="sv" />
    </
    telerik:EditorDropDown>
    </telerik:EditorToolGroup>
    </Tools>
    </telerik:RadEditor>

    To code below shows how to launch the Google Translator when choosing a language from the TranslateTool dropdown and set / paste the translated content back in the editor:

    <script type="text/javascript">
    function OnClientCommandExecuting(editor, args)
    {
    if (args.get_name() == "TranslateTool")
    {
    //Get language
    var language = args.get_value();

    var
    tool = editor.getToolByName("TranslateTool"); //get a reference to the custom dropdown
    //change the dropdown header icon depending on the selected language
    tool.get_element().getElementsByTagName("IMG")[0].src = "./flags/" + language + ".png";

    //Use either selected HTML or if no selection use all HTML
    var hasSelection = true;
    var
    html = editor.getSelectionHtml().trim(); //returns the currently selected HTML content
    if (!html)
    {
    html
    = editor.get_html(true); //obtain the editor's content
    hasSelection = false;
    }

    google.language.translate(html,
    "", language, function(result)
    {
    if (!result.error)
    {
    currentSelectedHtml
    = result.translation;

    //Either paste at current location or replace whole editor content
    if (hasSelection)
    {
    editor.pasteHtml(currentSelectedHtml)
    ;
    }
    else editor.set_html(currentSelectedHtml);
    }
    })
    ;

    args.set_cancel(true);
    }
    }
    </script>

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Theme="Default" Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.Editor.GoogleTranslation.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag ID="Headtag1" runat="server" />
        <!-- Include the Google AJAX Language API -->

        <script type="text/javascript" src="http://www.google.com/jsapi"></script>

        <script type="text/javascript">
          google.load("language", "1");
        </script>

    </head>
    <body class="BODY">
        <form id="form1" runat="server">
            <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB" />
            <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
            <telerik:RadEditor ID="RadEditor1" Skin="Default" OnClientCommandExecuting="OnClientCommandExecuting"
                runat="server">
                <Tools>
                    <telerik:EditorToolGroup>
                        <telerik:EditorDropDown Name="TranslateTool" Text="<img src='./flags/en.png' alt=''/> Translation Tool"
                            Width="130px" ItemsPerRow="1" PopUpWidth="120px" PopUpHeight="260px">
                            <telerik:EditorDropDownItem Name="<img src='./flags/en.png' alt=''/> English" Value="en" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/es.png' alt=''/> Spanish" Value="es" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/de.png' alt=''/> German" Value="de" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/fr.png' alt=''/> French" Value="fr" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/it.png' alt=''/> Italian" Value="it" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/ru.png' alt=''/> Russian" Value="ru" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/pt.png' alt=''/> Portuguese" Value="pt" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/he.png' alt=''/> Hebrew" Value="he" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/nl.png' alt=''/> Dutch" Value="nl" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/ja.png' alt=''/> Japanese" Value="ja" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/bg.png' alt=''/> Bulgarian" Value="bg" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/ro.png' alt=''/> Romanian" Value="ro" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/uk.png' alt=''/> Ukrainian" Value="uk" />
                            <telerik:EditorDropDownItem Name="<img src='./flags/sv.png' alt=''/> Swedish" Value="sv" />
                        </telerik:EditorDropDown>
                    </telerik:EditorToolGroup>
                </Tools>
                <Content>
                    <img alt="product logo" src="../../Img/productLogoLight.gif" />is not simply an HTML Editor. It is what Microsoft chose to use in MSDN, CodePlex, TechNet, MCMS and even as an alternative to the default editor in <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx" target="_blank">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean XHTML output, fast rendering, widest cross-browser support, and <a href="http://www.telerik.com/products/aspnet-ajax/editor.aspx" target="_blank">tons of features</a>.
                </Content>
            </telerik:RadEditor>
            <script type="text/javascript">
            function OnClientCommandExecuting(editor, args)
            {
                if (args.get_name() == "TranslateTool")
                {
                    //Get language
                    var language = args.get_value();
                    //get a reference to the custom dropdown
                    var tool = editor.getToolByName("TranslateTool");
                    //change the dropdown header icon depending on the selected language
                    tool.get_element().getElementsByTagName("IMG")[0].src = "./flags/" + language + ".png";

                    //Use either selected HTML or if no selection use all HTML
                    var hasSelection = true;
                    var html = editor.getSelectionHtml().trim(); //returns the currently selected HTML content
                    if (!html)
                    {
                        html = editor.get_html(true); //obtain the editor's content
                        hasSelection = false;
                    }

                    var flagTranslated = false;
                    google.language.translate(html, "", language, function (result) {
                        if (!result.error) {
                            currentSelectedHtml = result.translation;
                            flagTranslated = true;
                            //Either paste at current location or replace whole editor content
                            if (hasSelection) {
                                editor.pasteHtml(currentSelectedHtml);
                            }
                            else editor.set_html(currentSelectedHtml);
                        }
                    });
                    
                    setTimeout(function () {
                        if (!flagTranslated) {
                            alert("Please, reduce the amount of content for translation.");
                        }
                    }, 3000);


                    args.set_cancel(true);
                }
            }
            </script>

            <qsf:Footer runat="server" ID="Footer1" />
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451