Internationalization (i18n)

ZynText includes built-in translations for 14 languages. All toolbar labels, tooltips, modal text, and prompts are translatable.

Built-in Languages

Setting the Language

Per Instance

Pass lang in the options:

new ZynText(textarea, { lang: 'fr' });

Global Default

Set the default language for all new editor instances:

// Set once, before creating editors
ZynText.setLang('de');

// All new instances will use German
new ZynText(textarea1);  // German UI
new ZynText(textarea2);  // German UI

From the Page Locale

A common pattern is reading the language from the HTML lang attribute:

<html lang="fr">
...
<script>
  new ZynText(textarea, {
    lang: document.documentElement.lang || 'en'
  });
</script>

Laravel Blade

new ZynText(textarea, {
  lang: @json(app()->getLocale())
});

Adding a New Language

Use ZynText.addTranslations() to register a new language at runtime. Missing keys fall back to English automatically.

// Register Korean translations
ZynText.addTranslations('ko', {
  'bold': '굵게',
  'italic': '기울임',
  'underline': '밑줄',
  'link': '링크',
  'image': '이미지',
  'undo': '실행 취소',
  'redo': '다시 실행',
  // ... add all keys you want to translate
  // Any missing keys fall back to English
});

// Now use it
new ZynText(textarea, { lang: 'ko' });

Overriding Existing Translations

You can override specific strings in any built-in language:

// Change the English "Bold" label to "Strong"
ZynText.addTranslations('en', {
  'bold': 'Strong'
});

Querying Available Languages

const langs = ZynText.availableLanguages();
// ['en', 'fr', 'es', 'pt', 'ar', 'ja', 'zh', 'ru', 'he', 'de', 'it', 'tr', 'hi', 'bn']

Using the Translator Programmatically

Each editor instance has a t(key, params?) method:

const editor = new ZynText(textarea, { lang: 'ja' });

editor.t('bold');       // '太字'
editor.t('heading1');   // '見出し 1'

// With placeholders
editor.t('tableSize', { rows: 3, cols: 4 });  // '3 x 4'

All Translation Keys

These are all the keys defined in each language file. Use them with addTranslations():

Toolbar

headings, heading1, heading2, heading3, heading4, heading5, heading6, paragraph
bold, italic, underline, strikethrough, clearFormatting
link, image, blockquote, codeBlock, horizontalRule, insertTable
bulletList, orderedList, indent, outdent
alignLeft, alignCenter, alignRight, justify
undo, redo, fullscreen, viewSource

AI Tools

aiTools, aiImproveWriting, aiFixGrammar, aiMakeShorter, aiMakeLonger
aiProfessionalTone, aiCasualTone, aiFriendlyTone, aiSummarize

Link Popover

editLink, insertLink, url, urlPlaceholder, openInNewTab, removeLink, apply

Image

imageUrl
imgInline, imgFloatLeft, imgFloatRight, imgCenter
imgShrink, imgGrow, imgRestoreSize, imgMargin, imgAltText, imgDelete
altTextPrompt

Margin Popover

marginPx, marginTop, marginRight, marginBottom, marginLeft

Delete Modal

removeImage, removeImageQuestion, removeFromEditor, deleteFromServer, cancel

Other

tableSize, dropImageHere, copyCode