การแปลภาษา

Tiptapify รองรับกว่า 35 ภาษาทันทีโดยไม่ต้องตั้งค่าเพิ่ม การแปลจัดการผ่าน vue-i18n

การตั้งค่าภาษาเริ่มต้น

สร้างอินสแตนซ์ vue-i18n แล้วส่งให้เมื่อลงทะเบียนปลั๊กอิน:

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

การเปลี่ยนภาษาขณะรันไทม์

Tiptapify ใช้อินสแตนซ์ vue-i18n ของคุณ — เปลี่ยนภาษาผ่าน 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>

ภาษาที่มีให้เลือก

ขณะนี้รองรับภาษาต่อไปนี้:

รหัส	ภาษา
en	อังกฤษ
ar	อาหรับ
bg	บัลแกเรีย
ch	จีน
cz	เช็ก
de	เยอรมัน
el	กรีก
es	สเปน
et	เอสโตเนีย
fi	ฟินแลนด์
fr	ฝรั่งเศส
he	ฮีบรู
hi	ฮินดี
hr	โครเอเชีย
hu	ฮังการี
id	อินโดนีเซีย
it	อิตาลี
ja	ญี่ปุ่น
ko	เกาหลี
la	ลัตเวีย
lt	ลิทัวเนีย
nl	ดัตช์
no	นอร์เวย์
pl	โปแลนด์
pt	โปรตุเกส
pt-BR	โปรตุเกส (บราซิล)
ro	โรมาเนีย
ru	รัสเซีย
se	สวีเดน
sk	สโลวัก
sl	สโลวีเนีย
sr	เซอร์เบีย
th	ไทย
tr	ตุรกี
uk	ยูเครน
vi	เวียดนาม

คำแปลที่สร้างโดย AI

คำแปลส่วนใหญ่สร้างโดย AI และอาจมีข้อผิดพลาด หากพบคำแปลที่ไม่ถูกต้องหรือต้องการเพิ่มภาษาใหม่ โปรดเปิด issue หรือติดต่อผู้ดูแล

การเพิ่มคำแปลแบบกำหนดเอง

Tiptapify จะรวมข้อความภาษาในตัวเข้ากับอินสแตนซ์ vue-i18n ของคุณโดยอัตโนมัติเมื่อคุณส่งให้ปลั๊กอิน คุณสามารถขยายหรือแทนที่คำแปลได้ก่อนลงทะเบียนปลั๊กอิน:

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

หรือรวมหลังจากสร้างอินสแตนซ์ i18n แล้ว:

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

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

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

ภาษา RTL

สำหรับภาษา RTL เช่นภาษาอาหรับ ตรวจสอบให้แน่ใจว่าธีม Vuetify ของคุณรองรับ RTL:

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

ภาษาตามอินสแตนซ์

Tiptapify ใช้ภาษาของ vue-i18n ในแอปของคุณแบบส่วนกลาง หากต้องการกำหนดภาษาแยกตามอินสแตนซ์ ให้ใช้ scoped slots หรือ composition API ของ vue-i18n ภายในขอบเขตของอินสแตนซ์นั้น:

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

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

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