Руководство разработчика API Google Transliterate

В этом руководстве для разработчиков показано, как использовать Google Transliterate API. С помощью этого JavaScript API вы можете определить язык данного текстового блока и транслитерировать его в другой сценарий.

Введение

В этом руководстве разработчика представлена ​​базовая модель использования Google Transliterate API, а также подробные объяснения настраиваемых компонентов JavaScript API. Вы можете использовать это руководство для транслитерации текста на своей странице.

Сфера

В этом документе описывается, как использовать функции и свойства, характерные для Transliterate API.

Совместимость с браузером

Transliterate API поддерживает Firefox 1.5+, IE6+, Safari и Chrome. Transliterate API может загружаться без ошибок почти в каждом браузере, так что вы можете смело загружать его перед проверкой на совместимость.

Разные приложения иногда требуют разного поведения для пользователей с несовместимыми браузерами. Transliterate API предоставляет глобальный метод google.elements.transliteration.isBrowserCompatible() для проверки совместимости, но он не имеет автоматического поведения при обнаружении несовместимого браузера. В целях удобства использования вы должны обнаруживать несовместимые браузеры и, если они обнаружены, отображать сообщение об ошибке.

Аудитория

Эта документация предназначена для разработчиков, которые хотят добавить функции Google Transliterate на свои страницы или в приложения.

Тип содержимого HTML

Transliterate API обрабатывает много текста UTF-8, поэтому вам необходимо установить content-type вашей страницы на UTF-8, добавив этот метатег <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> . Без этого метатега Transliterate API не будет работать должным образом.

«Привет, мир» Google Transliterate

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <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"
          });

      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textbox with id
        // 'transliterateTextarea'.
        control.makeTransliteratable(['transliterateTextarea']);
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
    Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
    <textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
  </body>
</html>

Начиная

Загрузите API JavaScript

Чтобы начать использовать Transliterate API, включите следующий сценарий в заголовок своей веб-страницы.

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

Затем загрузите Transliterate API с помощью google.load(module, version, package) , где:

  • module вызывает конкретный модуль API, который вы хотите использовать на своей странице (в данном случае elements ).
  • version — это номер версии модуля, который вы хотите загрузить (в данном случае 1 ).
  • package указывает конкретный пакет элементов, который вы хотите загрузить, в данном случае это transliteration .
<script type="text/javascript">
  google.load("elements", "1", {
  packages: "transliterate"
  });
</script>

Вы можете узнать больше о google.load в руководстве разработчика Google Loader .

При значительном обновлении API мы увеличим номер версии и опубликуем уведомление в группе обсуждения API . Обратите внимание на любые необходимые изменения кода, когда это произойдет, и обновите свои URL-адреса до новой версии, когда они будут соответствовать требованиям.

Команда API Google также будет периодически обновлять API, добавляя последние исправления ошибок и улучшения производительности, не требуя обновления версии. По большей части эти исправления должны оставаться прозрачными для вас, но мы можем непреднамеренно нарушить работу некоторых клиентов API. Пожалуйста, используйте группу обсуждения API, чтобы сообщить о таких проблемах.

Использование API

В следующих разделах показано, как включить Google Transliterate API в вашу веб-страницу или приложение. Использование этого API требует асинхронного вызова сервера, поэтому вам нужна функция обратного вызова для обработки обмена данными.

Выполнение простой транслитерации

google.language.transliterate(wordsArray, srcLang, destLang, callback) — это глобальный метод, транслитерирующий заданный текст с исходного языка на целевой язык. API возвращает результат асинхронно заданной функции callback в качестве объекта result . Параметры этого метода:

  • wordsArray предоставляет текст для транслитерации в виде массива.
  • srcLang предоставляет исходный язык в виде языкового кода. Примеры см. в перечислении LanguageCode .
  • destLang предоставляет язык назначения в виде языкового кода. Примеры см. в перечислении LanguageCode .
  • callback — это функция обратного вызова, которая получает result .

google.language.transliterate() не имеет возвращаемого значения.

В этом упрощенном методе транслитерации используется пространство имен google.language.transliterate (а не google.elements.transliteration , которое является пространством имен для любого другого метода в Transliterate API).

google.language.transliterate() выводит объект result .

Объекты результатов создаются с использованием JSON-кодирования запросов к серверу. Следовательно, мы решили не реализовывать формальные объекты JavaScript, а вместо этого динамически создавать объекты result из их сериализованной формы.

Хотя формальной реализации объектов нет, они существуют, и мы документируем их так, как если бы существовала резервная реализация JavaScript. Влияние всего этого минимально. Все, что это означает, это то, что нет именованного конструктора. Для каждого результата система как бы вызывает new Object(), а затем устанавливает для этого объекта формальные свойства. Эти свойства ниже.

  • <результат>
    • error?
      Присутствует, если была ошибка в транслитерации.
    • transliterations
      Массив размером, равным размеру входного wordsArray .
      • transliteratedWords
        Массив максимального размера 5 с транслитерацией соответствующего слова в wordsArray .

В этом примере показано, как транслитерировать строку JavaScript:

//Load the Language API.
google.load("language", "1");

//Call google.language.transliterate() 
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
  if (!result.error) {
    var container = document.getElementById("transliteration");
    if (result.transliterations && result.transliterations.length > 0 &&
        result.transliterations[0].transliteratedWords.length > 0) {
      container.innerHTML = result.transliterations[0].transliteratedWords[0];
    }
  }
});

Просмотреть пример (transliterate.html)

Включение контроля транслитерации

.TransliterationControl(options) включает транслитерацию набора редактируемых элементов HTML DOM и предоставляет ряд методов, позволяющих управлять транслитерацией в этих элементах. Аргумент options может иметь следующие поля:

  • sourceLanguage — это обязательная строка, указывающая исходный язык с помощью перечисления LanguageCode (как в google.elements.transliteration. ENGLISH ). В настоящее время английский является единственным поддерживаемым исходным языком.
  • destinationLanguage — это обязательный массив, указывающий язык назначения с помощью перечисления LanguageCode , как в (как в google.elements.transliteration. HINDI ).

    В пользовательском интерфейсе доступные языки назначения отображаются в меню, при этом первый язык в массиве выбирается по умолчанию. Пожалуйста, обратитесь к getDestinationLanguages ​​для получения более подробной информации о допустимых целевых языках для данного исходного языка.
  • transliterationEnabled — это необязательное поле, указывающее, следует ли включать транслитерацию по умолчанию. Если вы хотите включить транслитерацию по умолчанию, укажите в этом поле значение true . Значение по умолчанию — false .
  • shortcutKey — это необязательное строковое поле, в котором указывается клавиша быстрого доступа для включения или выключения транслитерации. Чтобы указать сочетание клавиш, укажите строку, содержащую модификаторы, такие как «Ctrl», «Alt» или «Shift», а также букву алфавита. Например, «Ctrl+g» и «Ctrl+Shift+a» являются допустимыми комбинациями клавиш быстрого доступа.

    Примечание. Вы не можете использовать Shift в качестве единственного модификатора; однако вы можете использовать его в сочетании с Alt или Control.

Этот метод создает исключения в следующих случаях:

  • Недопустимый sourceLanguage или destinationLanguage язык
  • Неподдерживаемые языки в sourceLangauge язык и язык destinationLanguage
  • Неверная комбинация клавиш быстрого доступа

В следующем фрагменте кода показано, как создать экземпляр элемента управления транслитерацией:

function onLoad() {
  var options = {
    sourceLanguage: 'en',
    destinationLanguage: ['hi'],
    shortcutKey: 'ctrl+g',
    transliterationEnabled: true
  };

  // Create an instance on TransliterationControl with the required
  // options.
  var control = new google.elements.transliteration.TransliterationControl(options);
}

Включение транслитерации в узле HTML

.makeTransliteratable(elementIds, opt_options) включает транслитерацию предоставленных HTML-элементов. Параметры этого метода:

  • elementIds — это массив, содержащий строки редактируемых идентификаторов элементов или ссылок на элементы, для которых вы хотите включить транслитерацию. Редактируемый элемент может быть:

    • Текстовое поле
    • Текстовая область
    • <div> с contentEditable="true"
    • <iframe> с designMode="on"
    • iFrame с телом contentEditable="true" . Перед включением транслитерации убедитесь, что iFrame загружен.
  • opt_options — это необязательный аргумент, который предоставляет параметры, применяемые к этим элементам. Этот аргумент может содержать следующие поля:
    • adjustElementStyle — это необязательное логическое поле, определяющее, будет ли API автоматически корректировать размеры элементов и шрифта для оптимального соответствия символам целевого языка. Значение по умолчанию — true . Этот параметр влияет только на простые текстовые элементы.
    • adjustElementDirection — это необязательное логическое поле, управляющее направлением редактируемого элемента в зависимости от направления destinationLanguage . Значение по умолчанию — true .

Для систем письма справа налево, таких как арабский, API автоматически регулирует направление элемента ввода в соответствии с направлением письменного сценария и содержимым элемента ввода. Вы можете установить направление текста в элементе ввода с помощью HTML и JavaScript с direction , которое может иметь значение 'ltr' (слева направо) или 'rtl' (справа налево). Использование этого метода влияет на курсор и выравнивание текста в области ввода.

Вы можете увидеть пример поддержки API языков с письмом справа налево в примере арабской транслитерации .

Этот метод создает исключения, если какой-либо из указанных elementIds недействителен.

.makeTransliteratable() не имеет возвращаемого значения.

Следующий фрагмент кода демонстрирует типичное использование этого метода:

var ids = [ "transl1", "transl2" ];
  control.makeTransliteratable(ids);

Отображение элемента управления транслитерацией в DIV

.showControl(divElement) показывает элемент управления транслитерацией в указанном DIV, где divElement — это идентификатор DIV. Этот метод не имеет возвращаемого значения.

Следующий фрагмент кода демонстрирует типичное использование этого метода:

control.showControl('translControl');
...
<div id="translControl">

Включение транслитерации

.enableTransliteration() включает транслитерацию в элементе управления транслитерацией. Этот метод не имеет аргументов и не возвращает значения.

Отключение транслитерации

.disableTransliteration() отключает транслитерацию в элементе управления транслитерацией. Этот метод не имеет аргументов и не возвращает значения.

Включение или выключение транслитерации

.toggleTransliteration() включает или выключает транслитерацию в элементе управления транслитерацией. Этот метод не имеет аргументов и не возвращает значения.

Следующий фрагмент кода демонстрирует типичное использование этого метода:

function checkboxClickHandler() {
  transliterationControl.toggleTransliteration();
  ...
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()">

Изменение языковой пары для транслитерации

.setLanguagePair(sourceLanguage, destinationLanguage) позволяет динамически изменять языковую пару, используемую элементом управления транслитерацией, где:

  • sourceLanguage предоставляет тип языка для транслитерации. Этот аргумент берет свое значение из перечисления LanguageCode (например, google.elements.transliteration.TransliterationControl. LanguageCode.ENGLISH) .
  • targetLanguage предоставляет тип языка для транслитерированного текста.

.setLanguagePair() возвращает логическое значение, указывающее, было ли действие setLanguage успешным.

Следующий фрагмент кода демонстрирует использование этого метода в обработчике для изменения языков транслитерации с помощью раскрывающихся меню:

function languageChangeHandler() {
  var dropdown = document.getElementById('languageDropDown');
  transliterationControl.setLanguagePair(
    google.elements.transliteration.LanguageCode.ENGLISH,
    dropdown.options[dropdown.selectedIndex].value);
}
...
<select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>

Получение текущей языковой пары

.getLanguagePair() не имеет аргументов и возвращает текущую языковую пару для элемента управления транслитерацией в виде объекта с полями для sourceLanguage и destinationLanguage .

Определение того, включена ли транслитерация

.isTransliterationEnabled() не имеет аргументов и возвращает логическое значение, указывающее, включена ли транслитерация в элементе управления транслитерацией.

В следующем фрагменте кода этот метод используется для установки флажка, если транслитерация включена:

// Set the checkbox to the correct state.
  document.getElementById('checkboxId').checked =
  transliterationControl.isTransliterationEnabled();
...
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>

Добавление прослушивателя событий транслитерации

.addEventListener(eventType, listener, opt_listenerScope) добавляет прослушиватель к элементу управления транслитерацией для указанного типа события. Когда запускается определенный тип события, прослушиватель вызывается с объектом события. Содержимое объекта события зависит от типа события . Параметры этого метода:

  • eventType — это событие, для которого должен быть добавлен прослушиватель. Этот аргумент берет свое значение из перечисления eventType (например, google.elements.transliteration.TransliterationControl. EventType.STATE_CHANGED) .
  • listener предоставляет функцию слушателя для события.
  • opt_listenerScope вызывает прослушиватель с this набором для объекта, указанного в opt_listenerScope .

.addEventListener() не имеет возвращаемого значения.

В следующем фрагменте кода показано, как использовать этот метод для отображения сообщения об ошибке, если сервер недоступен:

transliterationControl.addEventListener(
  google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
            serverUnreachableHandler);

function serverUnreachableHandler(e) {
  document.getElementById("errorDiv").innerHTML =
  "Transliteration Server unreachable";
}            
...
<div id="errorDiv"></div>

Удаление прослушивателя событий транслитерации

.removeEventListener(eventType, listener, opt_listenerScope) удаляет прослушиватель событий из элемента управления транслитерацией, где:

  • Этот аргумент берет свое значение из перечисления eventType (например, google.elements.transliteration.TransliterationControl. EventType.STATE_CHANGED) .
  • listener — это функция для события, которое необходимо удалить.
  • opt_listenerScope — это область, в которой слушатель был зарегистрирован во время добавления слушателя.

.removeEventListener() не имеет возвращаемого значения.

В следующем фрагменте кода показано, как удалить прослушиватель событий, созданный в предыдущем примере:

transliterationControl.removeEventListener(
  google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE, serverUnreachableHandler);

Настройка видимых компонентов

Вы можете стилизовать отображаемый элемент управления транслитерацией с помощью метода showControl , чтобы расширить классы, определенные в файле CSS по умолчанию. API автоматически загружает этот файл CSS через google.load() . Этот файл CSS определяет стили для элемента управления и меню предложений транслитерации, которое появляется, когда вы щелкаете или редактируете транслитерированное слово. Если вы не хотите загружать CSS по умолчанию, установите для nocss значение true при вызове google.load .

google.load("elements", "1", {packages: "transliteration", "nocss" : true});

Меню выбора языка, кнопка, указывающая язык, выбранный пользователем, и меню предложений заключены в элементы DIV, помеченные определенными классами CSS. Вы можете определить переопределяющие правила CSS, которые применяются к этим элементам, чтобы стилизовать их в соответствии с вашей страницей. Пожалуйста, обратитесь к этому задокументированному файлу CSS транслитерации для получения подробной информации о CSS по умолчанию, загружаемом с пакетом Transliterate API.

Вызов обработчика onLoad

.setOnLoadCallback(callback) — это статическая функция, которая регистрирует указанную функцию-обработчик для вызова после загрузки страницы, содержащей этот вызов, где callback — это обязательная функция, вызываемая при загрузке содержащего документа и готовности API к использованию (например, после onLoad ). Эта функция реализована в пространстве имен google (например, google.setOnLoadCallback(callback); ).

.setOnLoadCallback() не имеет возвращаемого значения.

Примечание. В предыдущей документации рекомендовалось использовать атрибут onload элемента body ( <body onload="OnLoad()"> ). Хотя это хороший способ, когда вы полностью контролируете страницу и весь код, загружаемый страницей, этот подход может вызвать проблемы с некоторыми средами выполнения, которые разрушат ваш обработчик body.onload . setOnLoadCallback() не имеет этих проблем и поэтому является рекомендуемым методом регистрации обратного вызова, который вызывает ваш код, когда API полностью загружен и готов к использованию.

setOnLoadCallback реализован в пространстве имен google :

google.setOnLoadCallback(function);

Настройка дополнительных методов

В дополнение к методам, перечисленным выше, Transliterate API также предлагает следующие глобальные методы, позволяющие повысить удобство использования ваших приложений. Эти методы основаны на пространстве имен google.elements.transliterate .

Определение того, поддерживает ли текущий браузер транслитерацию

.isBrowserCompatible — это глобальный метод без аргументов, который возвращает логическое значение, указывающее, доступна ли транслитерация для браузера клиента.

В следующем фрагменте кода показано, как определить поддержку браузером транслитерации:

<textarea id="textarea"></textarea>
<div id="errorDiv"></div>

...
if (google.elements.transliteration.isBrowserCompatible()) {
  var transliterationControl = new google.elements.transliteration.TransliterationControl(
    'sourceLanguage': 'en',
    'destinationLanguage': ['hi']);
  transliterationControl.makeTransliteratable(['textarea']);
} else {
    document.getElementById('errorDiv').innerHTML = 'Sorry! Your browser does not support transliteration';
}

Поиск поддерживаемых языков транслитерации

.getDestinationLanguages(sourceLanguage) — это глобальный метод, который возвращает карту целевых языков, для которых поддерживается транслитерация для данного sourceLanguage . Возвращенная карта содержит поддерживаемые целевые языки, в которых ключом является название языка, а значением — код языка. Возвращаемая карта аналогична описанной в перечислении LanguageCode .

Следующий фрагмент кода демонстрирует использование этого метода:

var supportedDestinationLanguages =
  google.elements.transliteration.getDestinationLanguages(google.elements.transliteration.LanguageCode.ENGLISH);

перечисления

перечисление EventType

В перечислении google.elements.transliteration.TransliterationControl.EventType перечислены события, которые возможны во время транслитерации. Вы можете предоставить собственные обработчики для этих событий в своем коде.

var google.elements.transliteration.TransliterationControl.EventType = {
   STATE_CHANGED : 'state_changed',
   LANGUAGE_CHANGED : 'language_changed',
   SERVER_REACHABLE : 'server_reachable',
   SERVER_UNREACHABLE : 'server_unreachable'
};
  • google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED : результаты, когда транслитерация включена или отключена в элементе управления транслитерацией через:
    • Горячая клавиша
    • enableTransliteration , disableTransliteration или toggleTransliteration
    • Щелчок мышью по элементу управления транслитерацией, нарисованному методом showControl .
    Объект события, переданный слушателю, содержит поле transliterationEnabled . Это поле имеет значение true, если включена транслитерация, on противном случае — значение false.
  • google.elements.transliteration.TransliterationControl.EventType.LANGUAGE_CHANGED : результаты при изменении языковой пары транслитерации в элементе управления транслитерацией с помощью:
    • Метод setLanguagePair
    • Элемент управления транслитерацией, нарисованный методом showControl
    Объект события, переданный слушателю, содержит поля sourceLanguage и destinationLanguage .
  • google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE : результаты при успешном обращении к серверу для транслитерации текста.
  • google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE после неудачной попытки связаться с сервером для транслитерации текста.

Перечисление LanguageCode

google.elements.transliteration.LanguageCode сопоставляет константы имен с кодами языков, которые можно использовать для указания исходного и целевого языков в методах транслитерации.

var google.elements.transliteration.LanguageCode = {
    ENGLISH: 'en',
    AMHARIC: 'am',
    ARABIC: 'ar',
    BENGALI: 'bn',
    CHINESE: 'zh',
    GREEK: 'el',
    GUJARATI: 'gu',
    HINDI: 'hi',
    KANNADA: 'kn',
    MALAYALAM: 'ml',
    MARATHI: 'mr',
    NEPALI: 'ne',
    ORIYA: 'or',
    PERSIAN: 'fa',
    PUNJABI: 'pa',
    RUSSIAN: 'ru',
    SANSKRIT: 'sa',
    SINHALESE: 'si',
    SERBIAN: 'sr',
    TAMIL: 'ta',
    TELUGU: 'te',
    TIGRINYA: 'ti',
    URDU: 'ur'
};

перечисление SupportedDestinationLanguages

Перечисление google.elements.transliteration.SupportedDestinationLanguages ​​сопоставляет константы имен с массивами языковых кодов, которые можно использовать для указания групп целевых языков в элементе управления транслитерацией.

var google.elements.transliteration.SupportedDestinationLanguages = {
    // ALL includes all languages supported in the Transliterate API.
    // As support for more languages becomes available, this enum will be
    // automatically updated to include the new languages transparently.
    ALL: [
        google.elements.transliteration.LanguageCode.AMHARIC,
        google.elements.transliteration.LanguageCode.ARABIC,
        google.elements.transliteration.LanguageCode.BENGALI,
        google.elements.transliteration.LanguageCode.CHINESE,
        google.elements.transliteration.LanguageCode.GREEK,
        google.elements.transliteration.LanguageCode.GUJARATI,
        google.elements.transliteration.LanguageCode.HINDI,
        google.elements.transliteration.LanguageCode.KANNADA,
        google.elements.transliteration.LanguageCode.MALAYALAM,
        google.elements.transliteration.LanguageCode.MARATHI,
        google.elements.transliteration.LanguageCode.NEPALI,
        google.elements.transliteration.LanguageCode.ORIYA,
        google.elements.transliteration.LanguageCode.PERSIAN,
        google.elements.transliteration.LanguageCode.PUNJABI,
        google.elements.transliteration.LanguageCode.RUSSIAN,
        google.elements.transliteration.LanguageCode.SANSKRIT,
        google.elements.transliteration.LanguageCode.SERBIAN,
        google.elements.transliteration.LanguageCode.SINHALESE,
        google.elements.transliteration.LanguageCode.TAMIL,
        google.elements.transliteration.LanguageCode.TELUGU,
        google.elements.transliteration.LanguageCode.TIGRINYA,
        google.elements.transliteration.LanguageCode.URDU],
 
    // INDIC includes all Indic languages supported in the Transliterate API.
    // As support for more Indic languages becomes available, this enum will be
    // automatically updated to include the new languages transparently.
    INDIC: [
        google.elements.transliteration.LanguageCode.BENGALI,
        google.elements.transliteration.LanguageCode.GUJARATI,
        google.elements.transliteration.LanguageCode.HINDI,
        google.elements.transliteration.LanguageCode.KANNADA,
        google.elements.transliteration.LanguageCode.MALAYALAM,
        google.elements.transliteration.LanguageCode.MARATHI,
        google.elements.transliteration.LanguageCode.NEPALI,
        google.elements.transliteration.LanguageCode.ORIYA,
        google.elements.transliteration.LanguageCode.PUNJABI,
        google.elements.transliteration.LanguageCode.SANSKRIT,
        google.elements.transliteration.LanguageCode.SINHALESE,
        google.elements.transliteration.LanguageCode.TAMIL,
        google.elements.transliteration.LanguageCode.TELUGU,
        google.elements.transliteration.LanguageCode.URDU]
};

Примеры

Транслитерация в форматированных текстовых редакторах

Вы можете использовать Transliterate для редакторов, поддерживающих форматированное редактирование текста, таких как редактируемый элемент div или iframe или редактируемое поле, созданное с помощью библиотеки Closure или Yahoo! Библиотека пользовательского интерфейса . В следующем примере демонстрируется этот вариант использования.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <title>Transliteration in Rich Text Editor</title>
    <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", {
            packages: "transliteration"
          });

      function onLoad() {
        var options = {
            sourceLanguage:
                google.elements.transliteration.LanguageCode.ENGLISH,
            destinationLanguage:
                [google.elements.transliteration.LanguageCode.HINDI],
            shortcutKey: 'ctrl+g',
            transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the editable DIV with id
        // 'transliterateDiv'.
        control.makeTransliteratable(['transliterateDiv']);
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
    Type in Hindi (Press Ctrl+g to toggle between English and Hindi)<br>
    <div id="transliterateDiv" contenteditable="true" style="width:600px;height:200px;border:1px solid;overflow-y:scroll"></div>
  </body>
</html>

Просмотреть пример (richedittransliteration.html)

Контроль транслитерации с одним языком

В этом примере отображается элемент управления для переключения между режимами ввода на английском и хинди. Он также включает транслитерацию в двух текстовых полях.

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <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"
          });

      function onLoad() {
        var options = {
          sourceLanguage: 'en', // or google.elements.transliteration.LanguageCode.ENGLISH,
          destinationLanguage: ['hi'], // or [google.elements.transliteration.LanguageCode.HINDI],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };
        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        control.makeTransliteratable(ids);

        // Show the transliteration control which can be used to toggle between
        // English and Hindi.
        control.showControl('translControl');
      }
      google.setOnLoadCallback(onLoad);
    </script>
  </head>
  <body>
  <center>Type in Hindi (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'></div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

Просмотреть пример (singlelangtransliteration.html)

Транслитерация управления несколькими языками

В этом примере отображается элемент управления, позволяющий пользователю выбрать язык назначения, используя destinationLanguage, чтобы указать начальное значение целевого языка, а также перечислить языки, которые будут поддерживаться на странице. Например, если вы заинтересованы в том, чтобы язык назначения по умолчанию на вашей странице был телугу, а также чтобы в раскрывающемся меню языка были выбраны тамильский и малаялам, вы можете указать destinationLanguage языка как ['te', 'ta', 'ml'] .

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <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"
          });

      function onLoad() {
        var options = {
          sourceLanguage: 'en',
          destinationLanguage: ['hi','kn','ml','ta','te'],
          shortcutKey: 'ctrl+g',
          transliterationEnabled: true
        };

        // Create an instance on TransliterationControl with the required
        // options.
        var control =
            new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        control.makeTransliteratable(ids);

        // Show the transliteration control which can be used to toggle between
        // English and Hindi and also choose other destination language.
        control.showControl('translControl');
      }
      google.setOnLoadCallback(onLoad);

    </script>
  </head>
  <body>
  <center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'></div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
  </body>
</html>

Просмотреть пример (multilangtransliteration.html)

Транслитерация с пользовательским контролем

Это расширенный пример, который показывает, как создать собственный пользовательский элемент управления транслитерацией. Он использует флажок для переключения между режимами ввода на английском и хинди и раскрывающийся список для изменения целевого языка. Он также регистрирует обработчики событий для различных событий, которые могут быть вызваны элементом управления транслитерацией. Дополнительные сведения о возможных событиях см. в справочнике по классам API .

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <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"
          });

      var transliterationControl;
      function onLoad() {
        var options = {
            sourceLanguage: 'en',
            destinationLanguage: ['ar','hi','kn','ml','ta','te'],
            transliterationEnabled: true,
            shortcutKey: 'ctrl+g'
        };
        // Create an instance on TransliterationControl with the required
        // options.
        transliterationControl =
          new google.elements.transliteration.TransliterationControl(options);

        // Enable transliteration in the textfields with the given ids.
        var ids = [ "transl1", "transl2" ];
        transliterationControl.makeTransliteratable(ids);

        // Add the STATE_CHANGED event handler to correcly maintain the state
        // of the checkbox.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
            transliterateStateChangeHandler);

        // Add the SERVER_UNREACHABLE event handler to display an error message
        // if unable to reach the server.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
            serverUnreachableHandler);

        // Add the SERVER_REACHABLE event handler to remove the error message
        // once the server becomes reachable.
        transliterationControl.addEventListener(
            google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
            serverReachableHandler);

        // Set the checkbox to the correct state.
        document.getElementById('checkboxId').checked =
          transliterationControl.isTransliterationEnabled();

        // Populate the language dropdown
        var destinationLanguage =
          transliterationControl.getLanguagePair().destinationLanguage;
        var languageSelect = document.getElementById('languageDropDown');
        var supportedDestinationLanguages =
          google.elements.transliteration.getDestinationLanguages(
            google.elements.transliteration.LanguageCode.ENGLISH);
        for (var lang in supportedDestinationLanguages) {
          var opt = document.createElement('option');
          opt.text = lang;
          opt.value = supportedDestinationLanguages[lang];
          if (destinationLanguage == opt.value) {
            opt.selected = true;
          }
          try {
            languageSelect.add(opt, null);
          } catch (ex) {
            languageSelect.add(opt);
          }
        }
      }

      // Handler for STATE_CHANGED event which makes sure checkbox status
      // reflects the transliteration enabled or disabled status.
      function transliterateStateChangeHandler(e) {
        document.getElementById('checkboxId').checked = e.transliterationEnabled;
      }

      // Handler for checkbox's click event.  Calls toggleTransliteration to toggle
      // the transliteration state.
      function checkboxClickHandler() {
        transliterationControl.toggleTransliteration();
      }

      // Handler for dropdown option change event.  Calls setLanguagePair to
      // set the new language.
      function languageChangeHandler() {
        var dropdown = document.getElementById('languageDropDown');
        transliterationControl.setLanguagePair(
            google.elements.transliteration.LanguageCode.ENGLISH,
            dropdown.options[dropdown.selectedIndex].value);
      }

      // SERVER_UNREACHABLE event handler which displays the error message.
      function serverUnreachableHandler(e) {
        document.getElementById("errorDiv").innerHTML =
            "Transliteration Server unreachable";
      }

      // SERVER_UNREACHABLE event handler which clears the error message.
      function serverReachableHandler(e) {
        document.getElementById("errorDiv").innerHTML = "";
      }
      google.setOnLoadCallback(onLoad);

    </script>
  </head>
  <body>
  <center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
    <div id='translControl'>
      <input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
      Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
    </div>
    <br>Title : <input type='textbox' id="transl1"/>
    <br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
    <br><div id="errorDiv"></div>
  </body>
</html>

Просмотреть пример (customtransliteration.html)

Исправление проблем

Если вы столкнулись с проблемами:

  • Ищите опечатки. Помните, что JavaScript — это язык, чувствительный к регистру.
  • Используйте отладчик JavaScript. Google Chrome имеет полный набор инструментов разработчика . В Firefox вы можете использовать консоль JavaScript или Firebug . В IE можно использовать Microsoft Script Debugger .
  • Найдите группу обсуждения . Если вы не можете найти сообщение, отвечающее на ваш вопрос, опубликуйте свой вопрос в группе вместе со ссылкой на веб-страницу, демонстрирующую проблему.