Internasionalisasi

Tiptapify mendukung 35+ bahasa langsung dari paketnya. Terjemahan dikelola melalui vue-i18n.

Mengatur Locale Default

Buat instance vue-i18n dan berikan saat mendaftarkan 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 })

Mengganti Locale saat Runtime

Tiptapify menggunakan instance vue-i18n Anda — ganti locale melalui 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>

Locale yang Tersedia

Bahasa berikut saat ini didukung:

Kode	Bahasa
en	Inggris
ar	Arab
bg	Bulgaria
ch	Tionghoa
cz	Ceko
de	Jerman
el	Yunani
es	Spanyol
et	Estonia
fi	Finlandia
fr	Prancis
he	Ibrani
hi	Hindi
hr	Kroasia
hu	Hungaria
id	Indonesia
it	Italia
ja	Jepang
ko	Korea
la	Latvia
lt	Lituania
nl	Belanda
no	Norwegia
pl	Polandia
pt	Portugis
pt-BR	Portugis (Brasil)
ro	Rumania
ru	Rusia
se	Swedia
sk	Slovakia
sl	Slovenia
sr	Serbia
th	Thai
tr	Turki
uk	Ukraina
vi	Vietnam

Terjemahan Buatan AI

Sebagian besar terjemahan dibuat oleh AI dan mungkin mengandung kesalahan. Jika Anda menemukan terjemahan yang salah atau ingin menambahkan bahasa baru, silakan buka issue atau hubungi maintainer.

Menambahkan Terjemahan Kustom

Tiptapify otomatis menggabungkan pesan locale bawaannya ke instance vue-i18n Anda saat Anda memberikannya ke plugin. Anda dapat memperluas atau menimpa terjemahan sebelum mendaftarkan 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 })

Atau gabungkan setelah instance i18n dibuat:

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

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

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

Bahasa RTL

Untuk bahasa RTL seperti Arab, pastikan tema Vuetify Anda mendukung RTL:

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

Locale per Instance

Tiptapify menggunakan locale vue-i18n aplikasi Anda secara global. Jika Anda memerlukan locale per instance, gunakan scoped slot vue-i18n atau composition API di dalam cakupan instance tersebut:

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

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

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