Internazionalizzazione

Tiptapify supporta più di 35 lingue già pronte all'uso. Le traduzioni sono gestite tramite vue-i18n.

Impostare la lingua predefinita

Crea un'istanza di vue-i18n e passala quando registri il 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 })

Cambiare lingua a runtime

Tiptapify usa la tua istanza di vue-i18n: cambia la lingua tramite 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>

Lingue disponibili

Al momento sono supportate le seguenti lingue:

Codice	Lingua
en	Inglese
ar	Arabo
bg	Bulgaro
ch	Cinese
cz	Ceco
de	Tedesco
el	Greco
es	Spagnolo
et	Estone
fi	Finlandese
fr	Francese
he	Ebraico
hi	Hindi
hr	Croato
hu	Ungherese
id	Indonesiano
it	Italiano
ja	Giapponese
ko	Coreano
la	Lettone
lt	Lituano
nl	Olandese
no	Norvegese
pl	Polacco
pt	Portoghese
pt-BR	Portoghese (brasiliano)
ro	Rumeno
ru	Russo
se	Svedese
sk	Slovacco
sl	Sloveno
sr	Serbo
th	Tailandese
tr	Turco
uk	Ucraino
vi	Vietnamita

Traduzioni generate dall'AI

La maggior parte delle traduzioni è generata dall'AI e può contenere errori. Se trovi una traduzione errata o vuoi aggiungere una nuova lingua, apri una issue o contatta il maintainer.

Aggiungere traduzioni personalizzate

Tiptapify unisce automaticamente i propri messaggi di localizzazione integrati alla tua istanza di vue-i18n quando la passi al plugin. Puoi estendere o sovrascrivere le traduzioni prima di registrare il 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 })

Oppure unirle dopo aver creato l'istanza di i18n:

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

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

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

Lingue RTL

Per le lingue RTL come l'arabo, assicurati che il tuo tema Vuetify supporti RTL:

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

Lingua per istanza

Tiptapify usa globalmente la lingua di vue-i18n della tua app. Se ti servono lingue diverse per ogni istanza, usa gli scoped slot di vue-i18n o la composition API nell'ambito dell'istanza:

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

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

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