国际化

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 的作用域插槽或组合式 API：

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

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

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