ASP.NET 3.5 and above only

Obout.Ajax.UI Controls - HTML Editor - Google transliteration

This example demonstrates how the Google AJAX Language API can be used. Type a word in English and press SPACE to transliterate. Press CTRL+G (⌘+G on Mac) to switch between English and the selected language.
Aa
ASP.NET
<%@ Register Assembly="Obout.Ajax.UI" Namespace="Obout.Ajax.UI.HTMLEditor" TagPrefix="obout" %>
<div id='translControl' style="height:26px"></div>
<obout:Editor runat="server" Id="editor" >
<EditPanel Height="150px" OnClientActiveModeChanged="checkMode" OnClientLoaded="checkMode" />
<TopToolBar Appearance="Lite" PreservePlace="true" />
</obout:Editor>
...
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  // Load the Google Transliterate API
  google.load("elements", "1", {packages: "transliteration"});
  // on active mode changed and initial load
  function checkMode(sender, args) {
       var designMode = Obout.Ajax.UI.HTMLEditor.ActiveModeType.Design;
       var editPanel = sender;
       // clear the transliteration control
       document.getElementById('translControl').innerHTML = "";
       // current mode
       var activeMode = editPanel.get_activeMode();
       // for 'Design' mode only
       if (activeMode == designMode) {
           // get the current panel
           var panel = editPanel.get_activePanel();
           // Tricking FF's bug
           if (Sys.Browser.agent == Sys.Browser.Firefox) {
               panel.captureInDesign = function (ev) {
                   if (ev.type.indexOf("mouse") >= 0) {
                       var focus = this.get_element().contentWindow.focus;
                       this.get_element().contentWindow.focus = function () { };
                       setTimeout(function () {
                           this.get_element().contentWindow.focus = focus;
                       }, 400);
                   }
                   return true;
               };
           }
           var options = {
               sourceLanguage: 'en',
               destinationLanguage: ['el', 'ru', 'hi'],
               shortcutKey: 'ctrl+g',
               transliterationEnabled: true
           };
          
           // Create an instance on TransliterationControl with the required
           // options.
           var googleControl = new google.elements.transliteration.TransliterationControl(options);
          
           // Enable transliteration in <iframe>.
           var ids = [panel.get_element().id];
           googleControl.makeTransliteratable(ids);
          
           // Show the transliteration control
           googleControl.showControl('translControl');
       }
       return;
  }
</script>

"I'm pretty happy on replacing ComponentArt's splitter with yours, I'm getting vastly superior performance out of it. On resize of the CA splitter it can take 2-3 seconds to complete a resize of a complex page whereas yours is maybe .5 of a second max."

David Homer

Random testimonial   All testimonials