Internationalisation

Tiptapify prend en charge plus de 35 langues dès l'installation. Les traductions sont gérées via vue-i18n.

Définir la locale par défaut

Créez une instance vue-i18n et transmettez-la lors de l'enregistrement du 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 })

Changer de locale à l'exécution

Tiptapify utilise votre instance vue-i18n — changez la locale 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>

Langues disponibles

Les langues suivantes sont actuellement prises en charge :

Code	Langue
en	Anglais
ar	Arabe
bg	Bulgare
ch	Chinois
cz	Tchèque
de	Allemand
el	Grec
es	Espagnol
et	Estonien
fi	Finnois
fr	Français
he	Hébreu
hi	Hindi
hr	Croate
hu	Hongrois
id	Indonésien
it	Italien
ja	Japonais
ko	Coréen
la	Letton
lt	Lituanien
nl	Néerlandais
no	Norvégien
pl	Polonais
pt	Portugais
pt-BR	Portugais (brésilien)
ro	Roumain
ru	Russe
se	Suédois
sk	Slovaque
sl	Slovène
sr	Serbe
th	Thaï
tr	Turc
uk	Ukrainien
vi	Vietnamien

Traductions générées par IA

La plupart des traductions sont générées par IA et peuvent contenir des erreurs. Si vous trouvez une traduction incorrecte ou souhaitez ajouter une nouvelle langue, ouvrez une issue ou contactez le mainteneur.

Ajouter des traductions personnalisées

Tiptapify fusionne automatiquement ses messages de locale intégrés dans votre instance vue-i18n lorsque vous la transmettez au plugin. Vous pouvez étendre ou surcharger les traductions avant d'enregistrer le plugin :

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

Ou les fusionner après la création de l'instance i18n :

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

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

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

Langues RTL

Pour les langues RTL comme l'arabe, assurez-vous que votre thème Vuetify prend en charge le RTL :

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

Locale par instance

Tiptapify utilise globalement la locale vue-i18n de votre application. Si vous avez besoin de locales par instance, utilisez les slots à portée de vue-i18n ou l'API Composition dans la portée de l'instance :

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

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

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