Internationalisatie

Tiptapify ondersteunt standaard 35+ talen. Vertalingen worden beheerd via vue-i18n.

De standaardtaal instellen

Maak een vue-i18n-instantie en geef die mee bij het registreren van de plugin:

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

De taal tijdens runtime wijzigen

Tiptapify gebruikt je vue-i18n-instantie — wijzig de taal via 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>

Beschikbare talen

De volgende talen worden momenteel ondersteund:

Code	Taal
en	Engels
ar	Arabisch
bg	Bulgaars
ch	Chinees
cz	Tsjechisch
de	Duits
el	Grieks
es	Spaans
et	Estisch
fi	Fins
fr	Frans
he	Hebreeuws
hi	Hindi
hr	Kroatisch
hu	Hongaars
id	Indonesisch
it	Italiaans
ja	Japans
ko	Koreaans
la	Lets
lt	Litouws
nl	Nederlands
no	Noors
pl	Pools
pt	Portugees
pt-BR	Portugees (Braziliaans)
ro	Roemeens
ru	Russisch
se	Zweeds
sk	Slowaaks
sl	Sloveens
sr	Servisch
th	Thais
tr	Turks
uk	Oekraïens
vi	Vietnamees

Door AI gegenereerde vertalingen

De meeste vertalingen zijn door AI gegenereerd en kunnen fouten bevatten. Vind je een onjuiste vertaling of wil je een nieuwe taal toevoegen, open dan een issue of neem contact op met de maintainer.

Eigen vertalingen toevoegen

Tiptapify voegt zijn ingebouwde taalberichten automatisch samen met je vue-i18n-instantie wanneer je die aan de plugin meegeeft. Je kunt vertalingen uitbreiden of overschrijven voordat je de plugin registreert:

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

Of voeg ze samen nadat de i18n-instantie is gemaakt:

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

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

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

RTL-talen

Zorg er voor RTL-talen zoals Arabisch voor dat je Vuetify-thema RTL ondersteunt:

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

Taal per instantie

Tiptapify gebruikt de vue-i18n-taal van je app globaal. Heb je een taal per instantie nodig, gebruik dan de scoped slots of de composition API van vue-i18n binnen het bereik van de instantie:

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

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

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