راهنمای برنامه‌نویس Google Transliterate API

این راهنمای توسعه‌دهنده نحوه استفاده از Google Transliterate API را نشان می‌دهد. با استفاده از این API جاوا اسکریپت، می‌توانید زبان یک بلوک متنی مشخص را شناسایی کرده و آن را به یک اسکریپت دیگر ترجمه کنید.

مقدمه

این راهنمای توسعه‌دهنده یک مدل پایه برای استفاده از Google Transliterate API، همراه با توضیحات کامل در مورد اجزای جاوا اسکریپت قابل تنظیم 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 به درستی کار نخواهد کرد.

"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>

شروع شدن

API جاوا اسکریپت را بارگیری کنید

برای شروع استفاده از 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 های خود را در صورت مطابقت با آنها به نسخه جدید به روز کنید.

تیم Google API همچنین به‌طور دوره‌ای API را با رفع اشکال‌های اخیر و بهبود عملکرد بدون نیاز به به‌روزرسانی نسخه به‌روزرسانی می‌کند. در بیشتر موارد، این اصلاحات باید برای شما شفاف بماند، اما ممکن است ناخواسته برخی از سرویس گیرندگان API را خراب کنیم. لطفاً از گروه بحث API برای گزارش چنین مسائلی استفاده کنید.

با استفاده از API

بخش‌های زیر نحوه ادغام Google Transliterate API را در صفحه وب یا برنامه خود نشان می‌دهند. استفاده از این API نیاز به تماس ناهمزمان با یک سرور دارد، بنابراین برای پردازش تبادل داده به یک تابع callback نیاز دارید.

انجام آوانویسی ساده

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 درخواست های سرور تولید می شوند. در نتیجه، ما تصمیم گرفته‌ایم که اشیاء رسمی جاوا اسکریپت را پیاده‌سازی نکنیم، و به‌جای آن، اشیاء result را به‌صورت پویا از شکل سریال‌شده‌شان ایجاد کنیم.

در حالی که هیچ پیاده سازی رسمی از اشیاء وجود ندارد، آنها وجود دارند، و ما آنها را به گونه ای مستند می کنیم که گویی یک اجرای جاوا اسکریپت پشتیبان وجود دارد. تأثیر همه اینها حداقل است. تمام معنی آن این است که سازنده نامی وجود ندارد. برای هر نتیجه، مثل این است که سیستم New Object() را فراخوانی می کند و سپس ویژگی های رسمی را روی آن شی تنظیم می کند. این خواص در زیر آمده است.

  • <نتیجه>
    • error?
      اگر در نویسه‌گردانی خطایی وجود داشت، ارائه دهید.
    • transliterations
      آرایه ای با اندازه برابر با اندازه ورودی wordsArray .
      • transliteratedWords
        آرایه‌ای با حداکثر اندازه 5، با نویسه‌گردانی برای کلمه مربوطه در wordsArray .

این مثال نحوه ترجمه رشته جاوا اسکریپت را نشان می دهد:

//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 نامعتبر است
  • زبان‌های پشتیبانی‌نشده 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 و جاوا اسکریپت با 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

قطعه کد زیر استفاده از این روش را در یک handler برای تغییر زبان‌های نویسه‌گردانی از طریق منوهای کشویی نشان می‌دهد:

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 برمی‌گرداند 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 enum (مانند 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 enum (مانند 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 پیش‌فرض را بارگیری کنید، هنگام تماس با google.load ، nocss را روی true تنظیم کنید.

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()"> ) استفاده کنید. در حالی که وقتی کنترل کامل صفحه و همه کدهای بارگذاری شده توسط صفحه را در اختیار دارید، این روش خوبی است، اما این روش می‌تواند در برخی از زمان‌های اجرا مشکلاتی ایجاد کند که handler 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);

Enums

Enum نوع رویداد

شمارش 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 است. اگر نویسه‌گردانی « on » باشد، این فیلد درست است، در غیر این صورت نادرست است.
  • google.elements.transliteration.TransliterationControl.EventType.LANGUAGE_CHANGED : هنگامی که جفت زبان نویسه‌گردانی در کنترل نویسه‌گردانی از طریق تغییر می‌کند، نتیجه می‌شود:
    • متد setLanguagePair
    • کنترل نویسه‌گردانی که با روش showControl ترسیم شده است
    شی رویداد ارسال شده به شنونده حاوی فیلدهای sourceLanguage و DestinationLanguage destinationLanguage .
  • google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE : هنگامی که با موفقیت برای نویسه گردانی متن با سرور تماس می گیرید، نتیجه می گیرد.
  • google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE پس از تلاش ناموفق برای تماس با سرور برای نویسه‌گردانی متن نتیجه می‌دهد.

فهرست کد زبان

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'
};

فهرست پشتیبانی شده DestinationLanguages

شمارش 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 قابل ویرایش، یا یک فیلد قابل ویرایش ایجاد شده با استفاده از کتابخانه بسته شدن یا یاهو! کتابخانه UI . نمونه زیر این مورد استفاده را نشان می دهد.

<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 Language را به عنوان ['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)

عیب یابی

اگر با مشکلاتی مواجه شدید:

  • به دنبال اشتباهات تایپی باشید به یاد داشته باشید که جاوا اسکریپت یک زبان حساس به حروف بزرگ و کوچک است.
  • از یک دیباگر جاوا اسکریپت استفاده کنید. Google Chrome مجموعه کاملی از ابزارهای توسعه دهنده دارد. در فایرفاکس، می توانید از کنسول جاوا اسکریپت یا Firebug استفاده کنید. در اینترنت اکسپلورر، می توانید از Microsoft Script Debugger استفاده کنید.
  • گروه بحث را جستجو کنید. اگر نمی توانید پستی را پیدا کنید که به سؤال شما پاسخ دهد، سؤال خود را به همراه پیوندی به یک صفحه وب که مشکل را نشان می دهد به گروه ارسال کنید.