国際化

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 を作成するか、メンテナーにご連絡ください。

独自の翻訳を追加する

プラグインに 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>