Kansainvälistäminen

Tiptapify tukee valmiiksi yli 35 kieltä. Käännöksiä hallitaan vue-i18n:n kautta.

Oletuskielialueen asettaminen

Luo vue-i18n-instanssi ja anna se pluginia rekisteröitäessä:

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

Kielialueen vaihtaminen ajon aikana

Tiptapify käyttää omaa vue-i18n-instanssiasi — vaihda kielialue useI18n():n kautta:

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

Käytettävissä olevat kielialueet

Tällä hetkellä tuettuja kieliä ovat:

Koodi	Kieli
en	englanti
ar	arabia
bg	bulgaria
ch	kiina
cz	tšekki
de	saksa
el	kreikka
es	espanja
et	viro
fi	suomi
fr	ranska
he	heprea
hi	hindi
hr	kroatia
hu	unkari
id	indonesia
it	italia
ja	japani
ko	korea
la	latvia
lt	liettua
nl	hollanti
no	norja
pl	puola
pt	portugali
pt-BR	portugali (Brasilia)
ro	romania
ru	venäjä
se	ruotsi
sk	slovakki
sl	sloveeni
sr	serbia
th	thai
tr	turkki
uk	ukraina
vi	vietnam

Tekoälyn tuottamat käännökset

Suurin osa käännöksistä on tekoälyn tuottamia, ja niissä voi olla virheitä. Jos löydät virheellisen käännöksen tai haluat lisätä uuden kielen, avaa issue tai ota yhteyttä ylläpitäjään.

Omien käännösten lisääminen

Tiptapify yhdistää sisäänrakennetut kielialueen viestit automaattisesti vue-i18n-instanssiisi, kun annat sen pluginille. Voit laajentaa tai ohittaa käännöksiä ennen pluginin rekisteröintiä:

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

Tai yhdistä ne i18n-instanssin luomisen jälkeen:

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

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

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

Oikealta vasemmalle kirjoitettavat kielet

Oikealta vasemmalle kirjoitettavia kieliä, kuten arabiaa, varten varmista, että Vuetify-teemasi tukee RTL:ää:

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

Instanssikohtainen kielialue

Tiptapify käyttää sovelluksesi vue-i18n-kielialuetta globaalisti. Jos tarvitset instanssikohtaisia kielialueita, käytä vue-i18n:n rajattuja slotteja tai composition API:a instanssin piirissä:

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

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

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