Internacjonalizacja

Tiptapify obsługuje ponad 35 języków od razu po instalacji. Tłumaczenia są zarządzane przez vue-i18n.

Ustawianie domyślnego języka

Utwórz instancję vue-i18n i przekaż ją podczas rejestracji wtyczki:

// 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 })

Zmiana języka w czasie działania

Tiptapify używa Twojej instancji vue-i18n — zmień język przez 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>

Dostępne ustawienia regionalne

Obecnie obsługiwane są następujące języki:

Kod	Język
en	angielski
ar	arabski
bg	bułgarski
ch	chiński
cz	czeski
de	niemiecki
el	grecki
es	hiszpański
et	estoński
fi	fiński
fr	francuski
he	hebrajski
hi	hindi
hr	chorwacki
hu	węgierski
id	indonezyjski
it	włoski
ja	japoński
ko	koreański
la	łotewski
lt	litewski
nl	niderlandzki
no	norweski
pl	polski
pt	portugalski
pt-BR	portugalski (brazylijski)
ro	rumuński
ru	rosyjski
se	szwedzki
sk	słowacki
sl	słoweński
sr	serbski
th	tajski
tr	turecki
uk	ukraiński
vi	wietnamski

Tłumaczenia wygenerowane przez AI

Większość tłumaczeń została wygenerowana przez AI i może zawierać błędy. Jeśli znajdziesz nieprawidłowe tłumaczenie lub chcesz dodać nowy język, zgłoś problem lub skontaktuj się z opiekunem projektu.

Dodawanie własnych tłumaczeń

Tiptapify automatycznie scala wbudowane komunikaty językowe z Twoją instancją vue-i18n, gdy przekażesz ją do wtyczki. Możesz rozszerzyć lub nadpisać tłumaczenia przed rejestracją wtyczki:

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 })

Albo scalić je po utworzeniu instancji i18n:

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

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

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

Języki RTL

W przypadku języków RTL, takich jak arabski, upewnij się, że motyw Vuetify obsługuje RTL:

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

Język dla pojedynczej instancji

Tiptapify używa globalnie języka vue-i18n Twojej aplikacji. Jeśli potrzebujesz osobnych języków dla poszczególnych instancji, użyj slotów z zakresem (scoped slots) vue-i18n lub Composition API w zakresie danej instancji:

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

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

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