Internacionalización

Tiptapify admite más de 35 idiomas de serie. Las traducciones se gestionan mediante vue-i18n.

Establecer el idioma predeterminado

Crea una instancia de vue-i18n y pásala al registrar el 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 })

Cambiar el idioma en tiempo de ejecución

Tiptapify usa tu instancia de vue-i18n: cambia el idioma con 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>

Idiomas disponibles

Actualmente se admiten los siguientes idiomas:

Código	Idioma
en	Inglés
ar	Árabe
bg	Búlgaro
ch	Chino
cz	Checo
de	Alemán
el	Griego
es	Español
et	Estonio
fi	Finés
fr	Francés
he	Hebreo
hi	Hindi
hr	Croata
hu	Húngaro
id	Indonesio
it	Italiano
ja	Japonés
ko	Coreano
la	Letón
lt	Lituano
nl	Neerlandés
no	Noruego
pl	Polaco
pt	Portugués
pt-BR	Portugués (brasileño)
ro	Rumano
ru	Ruso
se	Sueco
sk	Eslovaco
sl	Esloveno
sr	Serbio
th	Tailandés
tr	Turco
uk	Ucraniano
vi	Vietnamita

Traducciones generadas con IA

La mayoría de las traducciones están generadas con IA y pueden contener errores. Si encuentras una traducción incorrecta o quieres añadir un idioma nuevo, abre una incidencia o contacta con el responsable del proyecto.

Añadir traducciones personalizadas

Tiptapify fusiona automáticamente sus mensajes de idioma integrados en tu instancia de vue-i18n cuando se la pasas al plugin. Puedes ampliar o sobrescribir las traducciones antes de registrar el 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 })

O fusionarlas después de crear la instancia de i18n:

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

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

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

Idiomas RTL

Para idiomas RTL como el árabe, asegúrate de que tu tema de Vuetify admita RTL:

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

Idioma por instancia

Tiptapify usa el idioma de vue-i18n de tu aplicación de forma global. Si necesitas un idioma por instancia, usa los slots con ámbito de vue-i18n o su API de composición dentro del ámbito de la instancia:

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

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

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