다국어 지원

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>

사용 가능한 로케일

현재 다음 언어를 지원합니다.

Code	언어
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가 생성한 것이라 오류가 있을 수 있습니다. 잘못된 번역을 발견했거나 새 언어를 추가하고 싶다면 이슈를 등록하거나 메인테이너에게 문의하세요.

사용자 정의 번역 추가

플러그인에 vue-i18n 인스턴스를 전달하면 Tiptapify가 내장 로케일 메시지를 해당 인스턴스에 자동으로 병합합니다. 플러그인을 등록하기 전에 번역을 확장하거나 덮어쓸 수 있습니다.

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 로케일을 전역으로 사용합니다. 인스턴스별 로케일이 필요하면 해당 인스턴스 범위 안에서 vue-i18n의 스코프 슬롯이나 Composition API를 사용하세요.

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

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

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