Internationalisering

Tiptapify stöder 35+ språk direkt. Översättningarna hanteras via vue-i18n.

Ange standardspråk

Skapa en vue-i18n-instans och skicka den när du registrerar pluginet:

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

Byta språk under körning

Tiptapify använder din vue-i18n-instans — byt språk 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>

Tillgängliga språk

Följande språk stöds för närvarande:

Kod	Språk
en	Engelska
ar	Arabiska
bg	Bulgariska
ch	Kinesiska
cz	Tjeckiska
de	Tyska
el	Grekiska
es	Spanska
et	Estniska
fi	Finska
fr	Franska
he	Hebreiska
hi	Hindi
hr	Kroatiska
hu	Ungerska
id	Indonesiska
it	Italienska
ja	Japanska
ko	Koreanska
la	Lettiska
lt	Litauiska
nl	Nederländska
no	Norska
pl	Polska
pt	Portugisiska
pt-BR	Portugisiska (Brasilien)
ro	Rumänska
ru	Ryska
se	Svenska
sk	Slovakiska
sl	Slovenska
sr	Serbiska
th	Thailändska
tr	Turkiska
uk	Ukrainska
vi	Vietnamesiska

AI-genererade översättningar

De flesta översättningar är AI-genererade och kan innehålla fel. Om du hittar en felaktig översättning eller vill lägga till ett nytt språk, öppna ett ärende eller kontakta underhållaren.

Lägga till egna översättningar

Tiptapify slår automatiskt ihop sina inbyggda språkmeddelanden med din vue-i18n-instans när du skickar den till pluginet. Du kan utöka eller åsidosätta översättningar innan du registrerar pluginet:

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

Eller slå ihop efter att i18n-instansen har skapats:

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

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

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

RTL-språk

För RTL-språk som arabiska, se till att ditt Vuetify-tema stöder RTL:

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

Språk per instans

Tiptapify använder appens vue-i18n-språk globalt. Om du behöver språk per instans, använd vue-i18n😒 scoped slots eller composition API inom instansens scope:

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

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

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