Automatic Translate tool

4 posts, 0 answers
  1. Luciano Mazzeo
    Luciano Mazzeo avatar
    19 posts
    Member since:
    Jan 2005

    Posted 12 Jan 2009 Link to this post

    Requirements

    RadControls version :

     2008.3 1105+

    .NET version

     2.0, 3.5

    Visual Studio version

     VS 2005+

    Programming language

     JavaScript

    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    Using Google Translator tool I add a custom dropdown on the RadEditor toolbar with a JavaScript function. The translator dropdown works either on selected HTML or if no selection translates the whole content in the editor.

    Here is how to add the custom dropdown to RadEditor toolbar:
    1) Register the Google's JS API by adding the following script tag inside the <head> tag of the page with the editor:

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

    2) Create the custom translation dropdown by adding the telerik:EditorDropDown  tag to Tools inner-tag of the RadEditor declaration:
    <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="110" PopupHeight="300"
                     <telerik:EditorDropDownItem  Name ="<img src='./flags/en.png' /> English (UK)" 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' /> Greek" value="gr" /> 
                     <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>   
        <Content> 
            This is sample content for translation!     
        </Content> 
    </telerik:RadEditor> 

    To populate the items of the dropdown use the telerik:EditorDropDownItem inner-tag of telerik:EditorDropDown. The Name attribute of the telerik:EditorDropDownItem tag represents the item name that will be rendered in the dropdown and the Value represents the value of the selected item.

    You can add as much new languages supported by Google Translator in the dropdown as you wish.

    To visualize the icons inside the dropdown items copy the flags folder to the root of your web application. The flags folder is available in the attached sample project.

    3) After adding the custom dropdown to the editor's toolbar, you should attach a function to the editor's OnClientCommandExecuting, the arguments of which will give you reference to the selected dropdown name and value.  Once you obtain the selected item's value, you can modify it and paste it through the pasteHtml function in the content area, e.g.

    <script type="text/javascript"
    google.load("language""1"); 
     
     
    function OnClientCommandExecuting(editor, args) 
    {                         
        if (args.get_name() == "TranslateTool"
        { 
            //Get language 
            var language = args.get_value(); 
             
            //Use either selected HTML or if no selection use all HTML                 
            var hasSelection = true
            var html = editor.getSelectionHtml().trim(); 
            if (!html) 
            { 
                html = editor.get_html(true); 
                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> 

    For your convenience, I have attached a sample working project.

    Enjoy
  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 15 Jan 2009 Link to this post

    Hi Luciano,

    Thank you for sharing your nice idea and code with our community. We do appreciate your work and we added 4000 Telerik points to your account.


    Greetings,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Atul Srivastav
    Atul Srivastav avatar
    65 posts
    Member since:
    Jun 2007

    Posted 06 Aug 2014 Link to this post

    HI,
    I am using  the Rad editor with the Google translation feature. But it is not working. that is not translating the text in the selected language.
    I am using telerik dll version 2008.03.1314.20. I have attached the code file. Please suggest. why is it not working.

    When, i am  clicking on the link http://demos.telerik.com/aspnet-ajax/editor/examples/googletranslation/defaultcs.aspx, it is not giving appropriate result.
  4. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 11 Aug 2014 Link to this post

    Hi Atul,

    The provided approach to implement a translate tool is 5 years old. Surely Google has changed the way their API is used.

    Note that this code library is provided only as a demonstration and if further issues occurs due to new API features, they should be handled per case.

    I suggest investigating if you are able to invoke the google translation functionality without the editor. If you have specific difficulties on using the RadEditor control, please provide more details about them. 

    On a side note, the used version of the Telerik UI for ASP.NET AJAX suite is quite old, and surely not supported under modern browsers. Due to that I recommend you upgrading it. 

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top