上下文编辑器 (Strings)

文本由 Phrase Language AI 从英语机器翻译而得。

适用于

Team、Professional、Business、Enterprise 和 Software UI/UX plans

如有许可相关问题，请联系销售部门。

适用于

高级版和企业版计划（旧版）

如有许可相关问题，请联系销售部门。

上下文编辑器旨在帮助译员更高效地完成工作，并通过与 Strings 翻译编辑器的直接集成来翻译网页。

目前有两个版本可用：

上下文编辑器：

包含新功能（多语言视图、布局选项、批量操作、协作功能等）以及来自翻译编辑器的 UI。
旧版上下文编辑器。

安装上下文编辑器后，可以对其进行自定义以适配多种技术。

安装 Strings 上下文编辑器

要求

要使用上下文编辑器，应用程序需要：

基于 Web 的网站、Web 应用程序、移动站点等。
译员可以访问运行编辑器的 Web 服务器。如有需要，这可以是本地环境。
键值对本地化文件结构。

已提取可翻译字符串的网站，以及使用键值结构来呈现翻译的视图层。
暴露给视图或模板层的键名。
用于渲染编辑器的 JavaScript 代码片段。
理想情况下，应有一个专门用于翻译的环境。这可以是预发布环境的克隆，虽然初始设置工作量较大，但能提供更好的工作流程和更高的稳定性。

如果无法提供专门的环境，可以使用现有的预发布环境，并根据需要选择启用上下文编辑器。

JavaScript 代码片段

在应用程序布局中包含该 JavaScript 代码片段。

该代码片段包含以下所需代码：

与 Phrase Strings API 进行通信。
渲染用户界面。
提供登录功能。

项目 ID 位于项目设置中。

账户 ID 位于 Strings 组织设置中。

示例：

<script type=\"text/javascript\">
    window.PHRASEAPP_CONFIG={ // 请勿更改此名称，否则配置将无法工作
      accountId:'ACCOUNT_ID',
      projectId:'PROJECT_ID',
      datacenter: 'eu', // 如使用美国数据中心，请设置为 'us'
      prefix: '{{__', // 设置视图模板中键格式的前缀
      suffix: '__}}', // 设置视图模板中键格式的后缀
      disableShortcuts: false, // 设置为 true 以禁用键盘快捷键
      autoLowercase: true, // 如果键包含大写字母，请设置为 false
    };
  </script>
  <script type=\"module\" async=\"\" src=\"https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js\"></script>

Web 框架安装

i18next

注意

i18next Phrase 上下文内编辑器后处理器支持所有高于 19.5.1 的 i18next 版本。尽管此库可能也适用于以前的版本，但它们不受官方支持，并且可能不会获得任何特定的更新或错误修复。

要在该环境中安装上下文内编辑器，请按照以下步骤操作：

使用首选的包管理器安装 i18next-phrase-in-context-editor-post-processor 库：

# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor

注意

推荐的库版本为 1.4.0 或更高版本。

或通过 CDN 加载：

<script src="https://unpkg.com/i18next-phrase-in-context-editor-post-processor"></script>

Bootstrap（示例）：

import i18next from 'i18next';
import i18nextXHRBackend from 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // 从 i18next-gitbook 仓库加载一些翻译
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // 在 i18next 初始化时执行某些操作
    });

要集成该库：

从 i18next-phrase-in-context-editor-post-processor 库中导入 PhraseInContextEditorPostProcessor。
创建新的 i18next Phrase In-Context Editor Post Processor 实例，并将 PhraseConfig 作为参数传递。
将新创建的 i18next Phrase In-Context Editor Post Processor 实例传递给 i18next use 方法。
将 phraseInContextEditor 字符串添加到 postProcess 数组属性中（在 i18next init 方法的配置对象中传递）。

在设置中将 ICE JavaScript 代码片段添加到 i18next 实例。

代码片段示例：

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId:'00000000000000004158e0858d2fa45c',
      accountId:'0bed59e5',
    }))

注意

必须提供 accountId 才能成功设置 ICE。账户 ID 位于 Strings 组织设置中。

如果需要，配置 useOldICE 属性以切换到旧版 ICE：

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId:'00000000000000004158e0858d2fa45c',
      accountId:'0bed59e5',
      useOldICE: true,
    }))

启动上下文内编辑器。
在网页浏览器中打开应用程序以显示上下文内编辑器。使用任何 Phrase 组织用户登录。

配置选项和示例方法。

Vue I18n

注意

Vue I18n Phrase In-Context Editor 支持所有 8.17.5 及更高版本的 Vue I18n。此库或许能与旧版本兼容，但这些版本未获得官方支持，也不会收到任何特定更新或错误修复。

要在该环境中安装上下文内编辑器，请按照以下步骤操作：

使用首选的软件包管理器安装最新软件包：

# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor

或通过 CDN 加载（手动注册 window['vue-i18n-phrase-in-context-editor'] ）：

<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>

Bootstrap（示例）：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  消息： {
      你好：“你好，世界！”
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

要集成该库：

导入 Vue I18n Phrase 上下文内编辑器 库。
创建新的 Vue I18n Phrase 上下文内编辑器 实例，将 Vue I18n 实例作为第一个参数传入，并将 Phrase 配置 作为第二个参数传入。

配置选项和示例方法。

React (intl)

注意

此库可能无法在 IE11 或更旧的浏览器中运行。如果需要支持旧版浏览器，请将 Babel 添加到构建流水线中。

此库继承了 react-intl 软件包的通用组件。如果通过调用 initializePhraseAppEditor 启用了 Phrase，组件的行为将会改变。

要在该环境中安装上下文内编辑器，请遵循以下步骤：

通过 NPM 安装最新软件包：
```
npm install react-intl-phraseapp
```
或从源代码构建：
```
npm run dist
```
```
npm install
```

配置：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

项目的项目 ID 可以在项目设置中找到。

账户 ID 可以在 Strings 组织设置中找到。

将代码片段添加到 react 应用程序中:

import {initializePhraseAppEditor} from 'react-intl-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

initializePhraseAppEditor(config);

找到所有 FormattedMessage 的导入，并将源从 react-intl 更改为 react-intl-phraseapp。
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
使用 jest 运行单元测试：
```
npm test
```

代码示例

此 demo 展示了 Phrase In-Context 编辑器与 react-intl 的集成。

Angular 2 (ngx-translate)

先决条件

注册一个 Phrase Strings 账户。
在 Angular 2 应用程序中使用 ngx-translate 模块进行本地化。

要在该环境中安装上下文内编辑器，请遵循以下步骤：

使用 NPM 安装：
```
npm install ngx-translate-phraseapp
```

配置：

import { initializePhraseAppEditor, PhraseConfig } from 'ngx-translate-phraseapp';

let config：PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

项目的项目 ID 可以在项目设置中找到。

账户 ID 可以在 Strings 组织设置中找到。

如果需要，请配置 useOldICE 属性以切换到模式：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  useOldICE: true,
};

initializePhraseAppEditor(config);

如有需要，请添加美国专用 URL 以便通过美国数据中心进行工作：

baseUrl: \"https://us.app.phrase.com\",
apiBaseUrl: 'https://api.us.app.phrase.com/api/v2',
oauthEndpointUrl: \"https://api.us.app.phrase.com/api/v2/authorizations\",
profileUrl: \"https://us.app.phrase.com/settings/profile\",

默认情况下，编辑器的文档解析器会将所有键转换为小写。如果在使用此行为时遇到问题，并希望在编辑器中使用区分大小写的键，请禁用自动小写功能：
```
let config = {
  // ...
  autoLowercase: false
}
```

将这些代码片段添加到 Angular 应用中：

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} from 'ngx-translate-phraseapp'

let config:PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

initializePhraseAppEditor(config);

app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { PhraseAppCompiler } from 'ngx-translate-phraseapp'
import { AppComponent } from './app.component';


export function HttpLoaderFactory(http:HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide:TranslateLoader,
        useFactory:HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide:TranslateCompiler,
        useClass:PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

代码示例

此演示应用展示了 In-Context 编辑器与 Angular 和 ngx-translate 的集成。

Ruby on Rails (i18n)

注意

此库可能无法在旧版浏览器或 Microsoft IE11 上直接运行。如果需要支持这些浏览器，请将 Babel 添加到构建流水线中。

先决条件

注册一个 Phrase Strings 账户。
使用优秀的 i18n gem（Rails 也在使用）。

要在该环境中安装上下文内编辑器，请遵循以下步骤：

使用以下方法之一将 phraseapp-in-context-editor-ruby 库添加到所需环境中：
- 通过 Gem
```
gem install phraseapp-in-context-editor-ruby
```
- 通过 Bundler
  
  将其添加到 Gemfile 中：
```
gem 'phraseapp-in-context-editor-ruby
```
- 直接从源代码构建以获取最新版本：
```
bundle && gem build
```
通过执行 Rails 生成器来创建初始化程序文件：
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
项目的项目 ID 可以在项目设置中找到。

账户 ID 可以在 Strings 组织设置中找到。
将 Ruby 代码片段添加到应用程序布局 app/views//layouts/application.html.erb 中：
```
<%= load_in_context_editor %>
```

将以下配置添加到初始化程序 /config/initializers/phraseapp_in_context_editor.rb 中：

  config.enabled = true
  config.project_id = \"YOUR_PROJECT_ID\"
  config.account_id = \"YOUR_ACCOUNT_ID\"
  config.datacenter = "eu"

如有需要，请设置美国数据中心以启用与美国端点的连接：

  config.enabled = true
  config.project_id = \"YOUR_PROJECT_ID\"
  config.account_id = \"YOUR_ACCOUNT_ID\"
  config.datacenter = "us"

在任何网络浏览器中打开该应用程序，即可查看应用于该应用的上下文编辑器。使用任何 Phrase 组织用户登录。

代码示例

此演示展示了 Phrase In-Context 编辑器与 react-i18next 的集成。

Django

先决条件

注册一个 Phrase Strings 账户。
使用 Django 框架用于 Python。

注意

自 2.0.0 版本起，不再提供旧版本的 ICE。

要在该环境中安装上下文内编辑器，请遵循以下步骤：

使用 pip 安装 django-phrase 软件包：
```
$ pip install django-phrase
```
将 Phrase 添加到已安装应用列表中：
```
INSTALLED_APPS = (

    'phrase',

)
```
将以下模板片段添加到布局文件 templates/base_generic.html 或等效文件中：
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
在模板中使用 phrase_i18n 模板标签（例如，demo/ice_demo/templates/index.html）：
```
{% load phrase_i18n %}
```

将以下配置添加到 settings.py 中：

    # Phrase 上下文内编辑器设置
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = \"YOUR_ACCOUNT_ID\"  # 设置您自己的账户 ID
    PHRASE_PROJECT_ID = \"YOUR_PROJECT_ID\"  # 设置您自己的项目 ID
    PHRASE_DATACENTER = \"eu\"  # 选择您的数据中心 'eu' | 'us'
    PHRASE_PREFIX = \"{{__\"
    PHRASE_SUFFIX = \"__}}\"

项目的项目 ID 可以在项目设置中找到。

账户 ID 可以在 Strings 组织设置中找到。

如果遇到问题，可以手动集成 JavaScript 代码片段。

在任何网络浏览器中打开该应用程序，即可查看应用于该应用的上下文编辑器。使用任何 Phrase 组织用户登录。

GitHub 上的 Django 适配器代码

代码示例

此演示应用程序展示了如何将上下文内编辑器与 Django 应用程序集成。

Flask

先决条件

注册一个 Phrase Strings 账户。
使用 Python 的 Flask 框架。

注意

自 2.0.0 版本起，不再提供旧版本的 ICE。

要在该环境中安装上下文内编辑器，请遵循以下步骤：

使用 pip 安装 Flask-Phrase 软件包：
```
pip install Flask-Phrase
```

将以下配置添加到 Flask 应用（app.config 或 config.py）中：

PHRASEAPP_ENABLED = True
PHRASEAPP_PREFIX = '{{__'
PHRASEAPP_SUFFIX = '__}}'

应用代码应该看起来像这样：

from flask import Flask, [...]
from flask_babel import Babel
from flask_phrase import Phrase, gettext, ngettext
app = Flask(__name__)
babel = Babel(app)
phrase = Phrase(app)

将短语 JavaScript 代码片段添加到基础布局文件中，并使用以下标签（它应位于模板文件的 section 中）：

<script>
    window.PHRASEAPP_CONFIG = {
        projectId:"YOUR-PROJECT-ID",
        accountId:"YOUR-ACCOUNT-ID",
        datacenter: "eu",
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

项目的项目 ID 可以在项目设置中找到。

账户 ID 可以在 Strings 组织设置中找到。

如有需要，请设置美国数据中心以启用与美国端点的连接：

window.PHRASEAPP_CONFIG = {
    projectId:"YOUR-PROJECT-ID",
    accountId:"YOUR-ACCOUNT-ID",
    datacenter: "us",
};

当 PHRASEAPP_ENABLED = True 时，该包会修改翻译函数的返回值，以呈现一种 ICE 可以读取的格式。当设置为 False 时，它将回退到标准的 Flask-Babel's gettext 函数。

代码示例

此 demo 应用程序演示了如何将上下文内编辑器与 Flask 应用程序集成。

Symfony 5.x

先决条件

注册一个 Phrase Strings 账户。
使用 PHP 的 Symfony 框架。

注意

2.0.0 版本支持 Symfony 5 及更高版本。如果使用 Symfony 2、3 或 4，请查看 ICE 的旧版本。

要将上下文内编辑器与 Symfony 应用程序集成，请按照以下步骤操作：

将 PhraseStringsInContextEditor 及其内容复制到存储库的 /src/Service 文件夹或所需位置。如果放置在其他位置，请相应地调整命名空间。

调整 config/services.yaml 以使用 Phrase 的适配器装饰 translator 服务：

services:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator

将以下 JavaScript 代码片段添加到基础或 Twig 布局模板的 {% block javascripts %} 之间，以便上下文编辑器可以读取网页：

<script>
    window.PHRASEAPP_CONFIG = {
        accountId:'0bed59e5',
        projectId:'00000000000000004158e0858d2fa45c',
        datacenter: 'eu',
        origin: 'phrase-symfony',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

Symfony 应用程序现已连接到上下文编辑器。

项目的项目 ID 可以在项目设置中找到。

账户 ID 可以在 Strings 组织设置中找到。

如有需要，请设置美国数据中心以启用与美国端点的连接：

window.PHRASEAPP_CONFIG = {
    projectId:"YOUR-PROJECT-ID",
    accountId:"YOUR-ACCOUNT-ID",
    datacenter: "us",
};

重新加载应用程序并使用 Phrase 凭据登录，即可直接在网页上开始翻译过程。

代码示例

此演示应用程序演示了如何将上下文编辑器与 Symfony 应用程序集成。

设置上下文编辑器

公开键名

通常，视图层通过将可翻译字符串的名称（即键）传递给某种翻译方法或视图助手来呈现翻译。

PHP 代码示例：

$translations = array(

  "page.headline" => "一些标题",

  "page.link.label" => "我是一个链接",

  "page.link.hint" => "点击我"

)

function translate($keyName) {

  return $translations[$keyName];

}

模板随后将呈现 translate() 方法的输出，而不是实际的翻译字符串：

<h1><?php echo translate("page.headline"); ?></h1>

格式化

必须在模板中指明要呈现哪些键的翻译。

使用此格式来显示键名而不是翻译：

{{__phrase_NameOfYourKey__}}

示例：

如果模板中存在键page.headline，则呈现字符串{{__phrase_page.headline__}}。

修改 translate() 辅助方法，以便按要求的格式显示键名：

function translate($keyName) {

  if ($phraseModeEnabled) {

    return \"\";

  } else {

    return $translations[$keyName];

  }

}

根据框架的不同，可以覆盖代码中的翻译辅助程序，或者创建一个包装版本以在模板中使用。

示例：

const t = (key: string) => '{{__phrase_' + key + '__}}'

转义键名和特殊字符

确保将键名转换为可识别的格式。

下表中的字符在向上下文编辑器公开时需要进行转义：

字符	转义序列	示例
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} 变为 {{__phrase__key[[[[[[html_open]]]]]]__}}
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} 变为 {{__phrase__[[[[[[html_close]]]]]]key__}}

自动大小写转换

默认情况下，In-Context 编辑器的文档解析器会将所有键转换为小写。如果遇到此行为相关的问题，并希望在 In-Context 编辑器中使用区分大小写的键，请禁用自动小写功能：

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

自定义键装饰器

使用 In-Context 编辑器时，键名通常会用装饰器（默认情况下为花括号）包裹，以便在文档上下文中生成唯一的标识键：

{{__phrase_YOUR.KEY__}}

如果这导致与其他库（例如，使用类似语法的客户端模板引擎，包括 AngularJS 和 Ember.js）发生冲突，请在设置中更改 In-Context 编辑器的装饰器前缀和后缀。要告知 In-Context 编辑器解析器应查找哪些装饰器，请在 JavaScript 代码片段之前添加以下配置值：

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: \"__]]\"

}

这会告知编辑器查找以 [[__ 开头并以 __]] 结尾的标签：

[[__phrase_YOUR.KEY__]]

如果使用 phraseapp-in-context-editor-ruby gem 来提供上下文编辑器功能，请确保已配置装饰器：

PhraseApp::InContextEditor.configure do |config|

  config.prefix = \"[[__\"

  config.suffix = \"__]]\"

end

如果不使用该 gem，请确保在自定义代码中调整了键名暴露模式。

启用和禁用上下文编辑器

此设置仅在使用 phraseapp-in-context-editor-ruby gem 时可用。

上下文编辑器默认处于禁用状态。

上下文编辑器可以被显式启用或禁用。这会影响 JavaScript 代码片段的包含（使用视图助手时）以及视图中修饰键名的渲染：

PhraseApp::InContextEditor.enabled = true|false

将该标志绑定到环境变量的示例：

PhraseApp::InContextEditor.enabled = (ENV[\"IN_CONTEXT_EDITING\"] == \"1\")

完全重新解析

如果在使用上下文编辑器时配合了使用虚拟 DOM（如 React）的 JavaScript 框架，请启用 fullReparse。这允许在检测到 DOM 更改时进行正确的重新解析：

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

从上下文编辑器中隐藏元素

hidingClasses 选项中列出的类被视为隐藏，并被上下文编辑器扫描程序排除在外。要使具有给定类的元素可扫描，请从 hidingClasses 数组中删除该类名，而不是添加它。将类名添加到数组会排除匹配的元素并隐藏编辑按钮；从数组中删除类名则会包含匹配的元素并显示编辑按钮。

hidingClasses 选项对元素及其祖先执行静态类存在检查。它不会评估计算出的或响应式的可见性。如果元素使用了与 hidingClasses 中的条目相匹配的响应式工具类（例如，名为“hidden”的类与特定于断点的可见性类相结合），则无论它在当前视口中是否实际可见，都会被排除在扫描之外。避免在需要扫描的元素上仅为了响应式样式而使用 hidingClasses 中列出的类名。

净化输出到网页

可以通过向 sanitize 属性提供一个函数，将上下文编辑器配置为在将翻译插入网页之前对其进行转义或更改。

该函数接受翻译字符串作为第一个参数，并应返回一个字符串：

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

单点登录

如果使用 single sign-on 并希望在启用 SSO 的情况下初始化上下文编辑器，请在 JavaScript 代码片段之前添加以下配置值：

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

若要要求用户使用 SSO 登录，请设置 enforced 参数：

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

键分页和翻译状态

对于拥有大量可翻译键的页面，上下文编辑器会以每页 100 个键进行加载。仅第一页的键在加载时会初始化编辑标记。其余键在页面进一步滚动或直接搜索某个键之前显示为未翻译，因为直接搜索会绕过分页。没有用于增加页面大小的配置选项，因为分页是在服务器端而非通过客户端库进行的。

若要检查所有键的翻译状态而不依赖滚动，请点击“上下文内编辑器”中的搜索图标以打开键列表。键列表显示了已集成键与项目中缺失键的总数，并且可以切换为显示项目中的所有键，而不仅仅是当前页面上检测到的键。或者，直接在 Strings 翻译编辑器中检查相关作业的翻译完整性，该编辑器没有这种基于页面的渲染限制。

旧版上下文编辑器：设置

Web 框架安装

Angular 2 (ngx-translate)

若要在此环境中安装上下文编辑器，请按照以下步骤操作：

使用 NPM 安装：
```
npm install ngx-translate-phraseapp
```

配置：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "{{__",
  suffix: "__}}",
  fullReparse: true
};

项目 ID 可在项目设置中找到。

默认情况下，编辑器的文档解析器会将所有键转换为小写。如果在使用此行为时遇到问题，并希望在编辑器中使用区分大小写的键，请禁用自动小写功能：
```
let config = {
  // ...
  autoLowercase: false
}
```

将这些代码片段添加到 Angular 应用中：

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler} from 'ngx-translate-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "{{__",
  suffix: "__}}",
  fullReparse: true
};

initializePhraseAppEditor(config);

app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { PhraseAppCompiler } from 'ngx-translate-phraseapp'

export function HttpLoaderFactory(http:HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  声明：[
    AppComponent
  ],
  导入: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      加载程序：{
        提供：TranslateLoader,
        useFactory：HttpLoaderFactory,
        deps: [HttpClient]
      },
      编译器：{
        提供：TranslateCompiler,
        useClass:PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

代码示例

此演示应用程序展示了上下文编辑器与 Angular 和 ngx-translate 的集成。

AngularJS (angular-translate)

若要在此环境中安装上下文编辑器，请按照以下步骤操作：

通过 Bower 安装 angular-phrase（或手动下载）：
```
$ bower install angular-phrase
```
在加载 angular-translate 模块后，将 angular-phrase 模块添加到现有的 AngularJS 应用程序中：
```
var myApp = angular.module(\"myApp\", ['pascalprecht.translate', 'phrase']);
```

配置该模块：

myApp.value(\"phraseProjectId\", \"YOUR-PROJECT-ID\");

myApp.value(\"phraseEnabled\", true);

myApp.value(\"phraseDecoratorPrefix\", \"\");

项目 ID 可在项目设置中找到。这将创建一个包含一些配置选项的初始化文件。

将phrase-javascript指令添加到应用程序的<head>标签内：
```
<phrase-javascript></phrase-javascript>
```
在任意网络浏览器中打开该应用程序，即可查看应用于该应用的上下文编辑器。使用任意 Phrase 组织用户登录。

GitHub 上的 angular-phrase

代码示例

此演示应用程序用于 angular-phrase，展示了如何使用 angular-translate 对 AngularJS 进行本地化。

Django

若要在此环境中安装上下文编辑器，请按照以下步骤操作：

使用 pip 安装 django-phrase 软件包：
```
$ pip install django-phrase
```
将 Phrase 添加到已安装应用程序列表中：
```
INSTALLED_APPS = (

    'phrase',

)
```
在模板中使用 phrase_i18n 模板标签：
```
{% load phrase_i18n %}
```
若要允许 django-phrase 覆盖翻译方法，请在 i18n 之后加载 phrase_i18n。
将 JavaScript 代码片段添加到布局中：
```
{% phrase_javascript %}
```

使用以下选项为项目配置上下文编辑器：

PHRASE_ENABLED = TruePHRASE_PROJECT_ID = 'YOUR_PROJECT_ID'PHRASE_PREFIX = '{{__'PHRASE_SUFFIX = '__}}'

在任意网络浏览器中打开该应用程序，即可查看应用于该应用的上下文编辑器。使用任何属于 Phrase 组织的账户登录。

GitHub 上的 Django 适配器代码

代码示例

此演示应用程序演示了如何将上下文内编辑器与 Django 应用程序集成。

React (intl)

注意

此库可能无法在 IE11 或更旧的浏览器中运行。如果需要支持旧版浏览器，请将 Babel 添加到构建管道中。

此库继承了 react-intl 包的通用组件。如果通过调用 initializePhraseAppEditor 启用了 Phrase，组件的行为将会改变。

若要在此环境中安装上下文内编辑器，请按照以下步骤操作：

通过 NPM 安装该包：

npm install react-intl-phraseapp

或从源代码构建：

npm run dist

npm install

配置：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

项目的项目 ID 可以在项目设置中找到。

将代码片段添加到 react 应用程序中：

import {initializePhraseAppEditor} from 'react-intl-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

initializePhraseAppEditor(config);

找到所有 FormattedMessage 的导入，并将源从 react-intl 更改为 react-intl-phraseapp。
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
使用 jest 运行单元测试：
```
npm test
```

代码示例

此演示展示了 Phrase In-Context 编辑器与 react-intl 的集成。

Ruby on Rails (国际化)

若要在此环境中安装上下文内编辑器，请按照以下步骤操作：

将 phraseapp-in-context-editor-ruby gem 添加到您想要使用上下文内编辑器的环境中：
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
并通过执行 bundle 命令进行安装：
```
$ bundle install
```
通过执行 Rails 生成器来安装 phraseapp-in-context-editor-ruby gem：
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

在个人资料设置中或通过授权 API 创建并管理访问令牌。

--project-id

项目的项目 ID 可以在项目设置中找到。这将创建一个包含一些配置选项的初始化文件。
使用 phraseapp_in_context_editor_js 辅助程序，将 JavaScript 代码片段添加到您应用程序布局的 <head> 标签内：
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
在任意网络浏览器中打开该应用程序，即可查看应用于该应用的 In-Context 编辑器。使用任何属于 Phrase 组织的账户登录。
禁用 Turbolinks（如果已使用）

Turbolinks 在每次页面获取时都会从页面中移除所有上下文内编辑器 UI 元素。

将 data-no-turbolink 属性添加到 <body> 标签中：
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

代码示例

此演示展示了 Phrase In-Context 编辑器与 react-i18next 的集成。

Spring

若要在此环境中安装上下文内编辑器，请按照以下步骤操作：

确保包 com.phraseapp.incontexteditor 在应用程序中可用。
设置正确的项目 ID 并在 PhraseAppConfiguration.class 中调整其他参数。

要通过 Phrase 渲染所有翻译，请将该 bean 添加到应用程序中：

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

通过将辅助工具公开为 bean，在模板中提供所需的 JavaScript 辅助工具：

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

将 <script> 标签添加到模板中每个页面的 <head> 标签内：

<head>

    <script th:utext="${@phraseAppJavascriptHeader.getHeader()}"></script>

</head>

重启应用程序并使用 Phrase 用户凭据登录。

GitHub 上的示例应用程序源代码

如何像专业人士一样本地化 Spring 应用程序

Spring Boot 入门包（由 ePages 提供）

Symfony 2.x

若要在此环境中安装上下文内编辑器，请按照以下步骤操作：

创建一个新的环境，In-Context 编辑器将在其中运行。在该示例中，新环境被命名为 translation。

创建新的配置文件：

# app/config/config_translation.yml

导入：

    - { resource: config.yml }

参数：

    translator.class:Acme\\YourBundle\\Translation\\PhraseTranslator

创建一个控制器以使环境浏览器可访问：

# web/app_translation.php

<?php

require_once __DIR__.'/../app/bootstrap.php.cache';

require_once __DIR__.'/../app/AppKernel.php';

use Symfony\Component\HttpFoundation\Request;

$kernel = new AppKernel('translation', false);

$kernel->handle(Request::createFromGlobals())->send();

覆盖标准翻译方法，以便将键名公开给上下文编辑器：

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\\YourBundle\\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

    public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

        if (!isset($this->catalogues[$locale])) {

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // 返回“routes”域的翻译值

            return strtr($this->catalogues[$locale]->get((string) $id, $domain), $parameters);

        } else {

            // 返回所有其他域的 PhraseApp 翻译键

            return $prefix.$id.$suffix;

        }

    }

}

将 JavaScript 代码片段添加到布局中：

# Acme/YourBundle/Resources/views/layout.html.twig

在任意网络浏览器中打开该应用程序，即可查看应用于该应用的 In-Context 编辑器。使用任何属于 Phrase 组织的账户登录。

Symfony 翻译文档

GitHub 上的 Symfony 2.x 适配器代码

Symfony 3.x

若要在此环境中安装上下文内编辑器，请按照以下步骤操作：

创建一个新的环境，In-Context 编辑器将在其中运行。在该示例中，新环境被命名为 translation。

创建新的配置文件：
```
# app/config/config_translation.yml

导入：

   - { resource: config.yml }
```

创建一个控制器，使该环境可以通过浏览器访问：

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

$loader = require __DIR__.'/../app/autoload.php';

$kernel = new AppKernel('translation', true);

$kernel->loadClassCache();

$request = Request::createFromGlobals();

$response = $kernel->handle($request);

$response->send();

$kernel->terminate($request, $response);

覆盖标准翻译方法，以便将键名公开给上下文编辑器：

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

   public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

       // 返回带有 PhraseApp 前缀和后缀的翻译键 ID

       return $prefix.$id.$suffix;

   }

}

确保当该 bundle 与编译器传递器一起使用时，该类始终被覆盖：

# src/AppBundle/DependencyInjection/Compiler/OverrideServiceCompilerPass.php

<?php

namespace AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

use Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   public function process(ContainerBuilder $container)

   {

       $definition = $container->getDefinition('translator.default');

       $definition->setClass('AppBundle\\Translation\\PhraseTranslator');

   }

}

如果使用单独的编译器传递器，请在 bundle 类的 build() 方法中注册它们：

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

class AppBundle extends Bundle

{

   public function build(ContainerBuilder $container)

   {

       parent::build($container);

       if($container->getParameter(\"kernel.environment\") == 'translation') {

           $container->addCompilerPass(new OverrideServiceCompilerPass());

       };

   }

}

将 JavaScript 代码片段添加到布局中：

# src/YourBundle/Resources/views/layout.html.twig

在任意网络浏览器中打开该应用程序，即可查看应用于该应用的 In-Context 编辑器。使用任意 Phrase 组织用户登录。

Symfony 翻译文档

Vue I18n

注意

Vue I18n Phrase In-Context Editor 支持所有 8.17.5 及更高版本的 Vue I18n。此程序库或许能与旧版本兼容，但这些版本并未获得官方支持，也不会再收到任何特定的更新或错误修复。

要在该环境中安装上下文编辑器，请按照以下步骤操作：

使用首选的包管理器安装该软件包：

# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor

或通过 CDN 加载（手动注册 window['vue-i18n-phrase-in-context-editor'] ）：

<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>

Bootstrap（示例）：

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      你好：“你好，世界！”
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

要集成该库：

导入 Vue I18n Phrase In-Context Editor 库。
创建新的 Vue I18n Phrase In-Context Editor 实例，并将 Vue I18n 实例作为第一个参数，Phrase Config 作为第二个参数传入。

配置选项和示例方法。

使用旧版上下文内编辑器

Ajax 模式

上下文内编辑器支持使用变更观察器 (mutation observers) 进行 Ajax 和 DOM 操作（即通过 JavaScript）。

在某些情况下，Ajax 模式可能会导致问题，并可能在使用上下文内编辑器时导致严重的性能问题。若要禁用 Ajax 模式，请在 JavaScript 代码片段之前添加以下配置值：

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

调试模式

若要启用调试模式，请在 JavaScript 代码片段之前添加以下配置值：

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

强制区域设置

若要在启动上下文内编辑器时显式设置特定的区域设置，请使用 forceLocale 设置。这对于在上下文内编辑器中预选当前在您的 Web 应用程序中显示的区域设置也很有用：

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

忽略的键

此设置仅在使用 phraseapp-in-context-editor-ruby gem 时可用。

可以排除某些键，使其不通过上下文内编辑器进行渲染。在使用 Rails 时，错误消息或日期和时间格式键等数据对应的键可能会被忽略。若要排除某些键，使其不被 phraseapp-in-context-editor-ruby gem 自动处理，请将这些键的数组添加到 phraseapp_in_context_editor.rb 初始化文件中。也可以使用通配符：

PhraseApp::InContextEditor.configure do |config|

  config.ignored_keys = [\"date.*\", \"forbidden.key\",   \"errors.messages*\"]

end

与这些模式中任何一个匹配的键将不会被上下文编辑器访问，并会正常渲染。