API Google Transliterate официально объявлен устаревшим 26 мая 2011 года. Он будет продолжать работать в соответствии с нашей политикой прекращения поддержки .

Эта страница переведена с помощью Cloud Translation API.

Руководство разработчика API транслитерации Google

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

Введение

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

Объем

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

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

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

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

Аудитория

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

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

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

«Hello World» от 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>

Начиная

Загрузите JavaScript API

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

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

Затем загрузите 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-адреса до новой версии, когда они будут соответствовать требованиям.

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

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

В следующих разделах показано, как интегрировать API Google Transliterate в вашу веб-страницу или приложение. Использование этого 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 , которое является пространством имен для всех остальных методов в API Transliterate).

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

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

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

<результат>
- error?
  Присутствует, если при транслитерации допущена ошибка.
  - code
    Код ошибки в стиле HTTP.
  - message
    Понятное для человека строковое описание ошибки.
- 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) .
destinationLanguage указывает тип языка для транслитерированного текста.

.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-коде по умолчанию, загружаемом вместе с пакетом Transliterate API, см. в этом задокументированном CSS-файле транслитерации .

Вызов обработчика 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);

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

Помимо перечисленных выше методов, API Transliterate также предлагает следующие глобальные методы, позволяющие повысить удобство использования ваших приложений. Эти методы основаны на пространстве имён 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 enum

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! UI Library . Следующий пример демонстрирует этот вариант использования.

<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 .
Поищите в группе обсуждения . Если вы не нашли сообщение с ответом на свой вопрос, опубликуйте его в группе вместе со ссылкой на веб-страницу, иллюстрирующую проблему.

Руководство разработчика API транслитерации Google Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Введение

Объем

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

Аудитория

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

«Hello World» от Google Transliterate

Начиная

Загрузите JavaScript API

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

LanguageCode enum

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

Примеры

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

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

Управление транслитерацией на нескольких языках

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

Поиск неисправностей

Руководство разработчика API транслитерации Google