Đa ngôn ngữ

Tiptapify hỗ trợ sẵn hơn 35 ngôn ngữ. Các bản dịch được quản lý thông qua vue-i18n.

Đặt ngôn ngữ mặc định

Tạo một instance vue-i18n và truyền vào khi đăng ký 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 })

Đổi ngôn ngữ khi đang chạy

Tiptapify dùng instance vue-i18n của bạn — hãy đổi locale qua 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>

Ngôn ngữ có sẵn

Hiện tại hỗ trợ các ngôn ngữ sau:

Mã	Ngôn ngữ
en	Tiếng Anh
ar	Tiếng Ả Rập
bg	Tiếng Bulgaria
ch	Tiếng Trung
cz	Tiếng Séc
de	Tiếng Đức
el	Tiếng Hy Lạp
es	Tiếng Tây Ban Nha
et	Tiếng Estonia
fi	Tiếng Phần Lan
fr	Tiếng Pháp
he	Tiếng Do Thái
hi	Tiếng Hindi
hr	Tiếng Croatia
hu	Tiếng Hungary
id	Tiếng Indonesia
it	Tiếng Ý
ja	Tiếng Nhật
ko	Tiếng Hàn
la	Tiếng Latvia
lt	Tiếng Litva
nl	Tiếng Hà Lan
no	Tiếng Na Uy
pl	Tiếng Ba Lan
pt	Tiếng Bồ Đào Nha
pt-BR	Tiếng Bồ Đào Nha (Brazil)
ro	Tiếng Romania
ru	Tiếng Nga
se	Tiếng Thụy Điển
sk	Tiếng Slovak
sl	Tiếng Slovenia
sr	Tiếng Serbia
th	Tiếng Thái
tr	Tiếng Thổ Nhĩ Kỳ
uk	Tiếng Ukraina
vi	Tiếng Việt

Bản dịch do AI tạo

Phần lớn bản dịch do AI tạo ra và có thể có lỗi. Nếu bạn thấy bản dịch sai hoặc muốn thêm ngôn ngữ mới, vui lòng mở một issue hoặc liên hệ người bảo trì.

Thêm bản dịch tùy chỉnh

Tiptapify tự động gộp các thông điệp locale có sẵn vào instance vue-i18n của bạn khi bạn truyền nó vào plugin. Bạn có thể mở rộng hoặc ghi đè bản dịch trước khi đăng ký 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 })

Hoặc gộp sau khi tạo instance i18n:

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

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

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

Ngôn ngữ viết từ phải sang trái (RTL)

Với các ngôn ngữ RTL như tiếng Ả Rập, hãy đảm bảo theme Vuetify của bạn hỗ trợ RTL:

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

Locale theo từng instance

Tiptapify dùng locale vue-i18n của ứng dụng trên phạm vi toàn cục. Nếu cần locale riêng cho từng instance, hãy dùng scoped slots của vue-i18n hoặc composition API trong phạm vi của instance:

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

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

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