Internationalisierung

Tiptapify unterstützt von Haus aus 35+ Sprachen. Übersetzungen werden über vue-i18n verwaltet.

Die Standard-Locale festlegen

Erstelle eine vue-i18n-Instanz und übergib sie beim Registrieren des Plugins:

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

Die Locale zur Laufzeit ändern

Tiptapify verwendet deine vue-i18n-Instanz — ändere die Locale über 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>

Verfügbare Locales

Aktuell werden die folgenden Sprachen unterstützt:

Code	Sprache
en	Englisch
ar	Arabisch
bg	Bulgarisch
ch	Chinesisch
cz	Tschechisch
de	Deutsch
el	Griechisch
es	Spanisch
et	Estnisch
fi	Finnisch
fr	Französisch
he	Hebräisch
hi	Hindi
hr	Kroatisch
hu	Ungarisch
id	Indonesisch
it	Italienisch
ja	Japanisch
ko	Koreanisch
la	Lettisch
lt	Litauisch
nl	Niederländisch
no	Norwegisch
pl	Polnisch
pt	Portugiesisch
pt-BR	Portugiesisch (Brasilien)
ro	Rumänisch
ru	Russisch
se	Schwedisch
sk	Slowakisch
sl	Slowenisch
sr	Serbisch
th	Thailändisch
tr	Türkisch
uk	Ukrainisch
vi	Vietnamesisch

KI-generierte Übersetzungen

Die meisten Übersetzungen sind KI-generiert und können Fehler enthalten. Wenn du eine falsche Übersetzung findest oder eine neue Sprache hinzufügen möchtest, öffne bitte ein Issue oder kontaktiere den Maintainer.

Eigene Übersetzungen hinzufügen

Tiptapify mergt seine eingebauten Locale-Nachrichten automatisch in deine vue-i18n-Instanz, wenn du sie an das Plugin übergibst. Du kannst Übersetzungen erweitern oder überschreiben, bevor du das Plugin registrierst:

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

Oder nach dem Erstellen der i18n-Instanz mergen:

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

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

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

RTL-Sprachen

Stelle bei RTL-Sprachen wie Arabisch sicher, dass dein Vuetify-Theme RTL unterstützt:

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

Locale pro Instanz

Tiptapify verwendet die vue-i18n-Locale deiner App global. Brauchst du Locales pro Instanz, nutze die Scoped Slots oder die Composition API von vue-i18n im Geltungsbereich der Instanz:

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

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

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