การแปลภาษา

ดูรายละเอียดทั้งหมดได้ที่คู่มือการแปลภาษา

ตัวอย่างอย่างรวดเร็ว

สลับภาษาของเอดิเตอร์ขณะรันไทม์:

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

const { locale } = useI18n()

const languages = [
  { code: 'en', name: 'English' },
  { code: 'de', name: 'Deutsch' },
  { code: 'fr', name: 'Français' },
  { code: 'es', name: 'Español' },
]
</script>

<template>
  <div>
    <v-select
      v-model="locale"
      :items="languages"
      item-title="name"
      item-value="code"
      label="Language"
    />

    <Tiptapify />
  </div>
</template>

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

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

เอดิเตอร์หลายตัวที่ใช้ภาษาต่างกัน

ใช้ scoped locales ของ vue-i18n เพื่อกำหนดภาษาแยกตามอินสแตนซ์:

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

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

<template>
  <v-row>
    <v-col>
      <h3>English</h3>
      <Tiptapify />
    </v-col>
    <v-col>
      <h3>German</h3>
      <Tiptapify />
    </v-col>
  </v-row>
</template>