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>