Интернационализация

Tiptapify поддерживает более 35 языков из коробки. Переводы управляются через vue-i18n.

Установка локали по умолчанию

Создайте экземпляр vue-i18n и передайте его при регистрации плагина:

// main.ts
import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
})

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Смена локали во время работы

Tiptapify использует ваш экземпляр vue-i18n — меняйте локаль через useI18n():

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { locale } = useI18n()

const languages = [
  { code: 'en', label: 'English' },
  { code: 'de', label: 'Deutsch' },
  { code: 'fr', label: 'Français' },
  { code: 'es', label: 'Español' },
  { code: 'ru', label: 'Русский' },
]
</script>

<template>
  <div>
    <v-select
      v-model="locale"
      :items="languages"
      item-title="label"
      item-value="code"
      label="Language"
    />

    <Tiptapify placeholder="Start writing..." />
  </div>
</template>

Доступные локали

Сейчас поддерживаются следующие языки:

Код	Язык
en	Английский
ar	Арабский
bg	Болгарский
ch	Китайский
cz	Чешский
de	Немецкий
el	Греческий
es	Испанский
et	Эстонский
fi	Финский
fr	Французский
he	Иврит
hi	Хинди
hr	Хорватский
hu	Венгерский
id	Индонезийский
it	Итальянский
ja	Японский
ko	Корейский
la	Латышский
lt	Литовский
nl	Нидерландский
no	Норвежский
pl	Польский
pt	Португальский
pt-BR	Португальский (бразильский)
ro	Румынский
ru	Русский
se	Шведский
sk	Словацкий
sl	Словенский
sr	Сербский
th	Тайский
tr	Турецкий
uk	Украинский
vi	Вьетнамский

Переводы, созданные с помощью AI

Большинство переводов создано с помощью AI и может содержать ошибки. Если вы нашли неточный перевод или хотите добавить новый язык, создайте issue или свяжитесь с мейнтейнером.

Добавление собственных переводов

Tiptapify автоматически добавляет свои встроенные сообщения локалей в ваш экземпляр vue-i18n, когда вы передаёте его плагину. Вы можете расширить или переопределить переводы до регистрации плагина:

import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages: {
    // Custom translations take precedence over Tiptapify's built-in ones
    en: {
      toolbar: {
        bold: 'Make bold',
        italic: 'Make italic',
      },
    },
  },
})

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

Или объединить их после создания экземпляра i18n:

const i18n = createI18n({
  legacy: false,
  locale: 'en',
})

i18n.global.mergeLocaleMessage('en', customTranslations)

app.use(i18n)
app.use(TiptapifyPlugin, { i18n })

RTL-языки

Для RTL-языков, например арабского, убедитесь, что ваша тема Vuetify поддерживает RTL:

const vuetify = createVuetify({
  locale: {
    rtl: true,
  },
})

Локаль для отдельного экземпляра

Tiptapify глобально использует локаль vue-i18n вашего приложения. Если нужны локали для отдельных экземпляров, используйте scoped-слоты vue-i18n или composition API в области видимости экземпляра:

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n({ useScope: 'local' })
</script>

<template>
  <Tiptapify :placeholder="t('editor.placeholder')" />
</template>