| 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