In-Context Editor (Strings)

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

可用于

团队、专业、商业、企业和软件 UI/UX 计划

关于许可问题，请联系销售团队。

包含在

Advanced 和 Enterprise 套餐（原）

关于许可问题，请联系销售团队。

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

目前，有两个版本可用：

上下文编辑器：

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

安装上下文编辑器后，可以根据许多技术进行自定义。

安装字符串上下文编辑器

要求

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

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

具有可翻译字符串提取的网页和使用键值结构呈现翻译的视图层。
暴露给视图或模板层的键名。
呈现编辑器的 JavaScript 代码片段。
理想情况下，应该有一个专门的翻译环境。这可以是一个暂存环境的克隆，尽管最初设置时工作量更大，但提供了更好的工作流和更高的稳定性。

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

JavaScript Snippet

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

该代码片段包含所需的代码：

与短语字符串API进行通信。
渲染用户界面。
提供登录。

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

账户ID在字符串组织设置中找到。

示例:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId:'账户_ID',
      projectId:'项目_ID',
      datacenter: 'eu', // Set to 'us' for US data center
      prefix: '{{__', // Set to the prefix for the key format in the view templates
      suffix: '__}}', // Set to the suffix for the key format in the view templates
      disableShortcuts: false, // Set to true to disable keyboard shortcuts
      autoLowercase: true, // Set to false if keys contain capital letters
    };
  </script>
  <script type="module" async="" src="https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js"></script>

Web框架安装

i18next

注释

i18next短语上下文编辑器后处理器支持所有版本高于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: {
            // load some translations from i18next-gitbook repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // do something on i18next initialization
    });

要集成库：

从 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 支持所有 Vue I18n 版本 8.17.5 及更高版本。此库可能与以前的版本兼容，但它们并未正式支持，也不会获得任何特定的更新或错误修复。

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

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

# 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实例作为第一个参数，短语配置作为第二个参数。

配置选项和示例方法。

React（intl）

说明

此库可能不支持IE11或更早的浏览器。如果需要支持旧浏览器，请将Babel添加到构建管道中。

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

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

通过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
```

代码示例

此演示显示了 Phrase 上下文编辑器与 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 属性以切换到旧 ICE：

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: {
        提供：TranslateLoader,
        useFactory：HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        提供：TranslateCompiler,
        useClass：PhraseAppCompiler
      }
    ），
  ],
  providers: [],
  bootstrap: [AppComponent]
})

代码示例

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

Ruby on Rails (i18n)

说明

此库可能无法在旧版浏览器或 Microsoft IE11 中开箱即用。如果需要支持这些浏览器，请将 Babel 添加到构建管道中。

先决条件

注册 Phrase Strings 账户。
使用优秀的 i18n gem，该 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 组织用户登录。

代码示例

此 demo 显示了 Phrase 上下文编辑器与 react-i18next 的集成。

Django

先决条件

注册 Phrase Strings 账户。
使用 Django 框架进行 Python 开发。

说明

ICE 的旧版本自 2.0.0 版本以来不可用。

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

使用 django-phrase 包和 pip 安装：
```
$ pip install django-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 In-Context Editor settings
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Set your own account id
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Set your own project id
    PHRASE_DATACENTER = "eu"  # Choose your datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

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

如果出现问题，可以手动集成 JavaScript snippet。

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

Django adapter code on GitHub

代码示例

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

Flask

先决条件

注册 Phrase Strings 账户。
使用 Flask 框架进行 Python。

说明

ICE 的旧版本自 2.0.0 版本以来不可用。

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

使用 Flask-Phrase 包和 pip 安装：
```
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 snippet 添加到基础布局文件中，使用以下标签（它应放在模板文件的部分内）：

<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 账户。
使用 Symfony 框架进行 PHP.

说明

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

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

将 上下文编辑器中的短语字符串 及其内容复制到存储库或所需位置的 /src/Service 文件夹中。如果放置在其他位置，请相应调整命名空间。

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

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" => "Some Headline",

  "page.link.label" => "I am a link",

  "page.link.hint" => "Click me"

)

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__}}

自动大小写转换

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

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

自定义键装饰器

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

{{__phrase_YOUR.KEY__}}

如果这与其他库（例如，使用类似语法的客户端模板引擎，包括 AngularJS 和 Ember.js）发生冲突，请在设置中更改上下文编辑器的装饰器前缀和后缀。要告诉上下文编辑器解析器应该查找哪些装饰器，请在 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的JavaScript框架（如React），请启用fullReparse。这允许在检测到DOM更改时进行正确的重新解析：

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

输出到网页的清理

上下文编辑器可以配置为在将翻译插入网页之前转义或更改翻译，通过提供一个函数给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

  }

}

旧的上下文编辑器：设置

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({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        提供：TranslateLoader,
        useFactory：HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        提供：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组织用户登录。

angular-phrase在GitHub上

代码示例

这个demo应用程序展示了如何使用angular-translate本地化AngularJS。

Django

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

使用django-phrase包和pip进行安装：
```
$ 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组织用户登录。

Django适配器代码在GitHub上

代码示例

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

React (intl)

说明

这个库可能不适用于IE11或更早的浏览器。如果需要支持旧版浏览器，请将Babel添加到构建管道中。

这个库继承了react-intl包的公共组件。如果通过调用 initializePhraseAppEditor 启用短语，则组件的行为将会改变。

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

通过 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
```

代码示例

此 demo 显示了 Phrase 上下文编辑器与 react-intl 的集成。

Ruby on Rails (i18n)

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

将 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 在项目设置中找到。这将创建一个带有一些配置选项的初始化文件。
将 JavaScript 代码片段添加到您的应用布局中的 <head> 标签内，使用 phraseapp_in_context_editor_js 助手：
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
在任何网络浏览器中打开应用程序，以查看应用于该应用的上下文编辑器。使用任何Phrase组织用户登录。
禁用 Turbolinks（如果使用）

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

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

代码示例

此 demo 显示了 Phrase 上下文编辑器与 react-i18next 的集成。

Spring

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

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

通过Phrase呈现所有翻译，将bean添加到应用程序中：

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

通过将所需的JavaScript助手作为bean暴露在模板中来提供：

@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

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

创建一个新的环境，在其中运行上下文编辑器。在示例中，新环境命名为translation。

创建一个新的配置文件：

# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

    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') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

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

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

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

Symfony翻译文档

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

Symfony 3.x

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

创建一个新的环境，在其中运行上下文编辑器。在示例中，新环境命名为translation。

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

imports:

   - { 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';

       }

       // Return ID of translation key with pre- and suffix for PhraseApp

       return $prefix.$id.$suffix;

   }

}

确保在与编译器传递一起使用时始终重写该类：

# 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');

   }

}

如果使用单独的编译器传递，请在捆绑类的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

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

Symfony翻译文档

Vue I18n

说明

Vue I18n 短语上下文编辑器支持所有 Vue I18n 版本 8.17.5 及更高版本。该库可能与以前的版本兼容，但不提供官方支持，也不会获得任何特定的更新或错误修复。

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

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

# 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>

引导（示例）：

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 短语上下文编辑器 库。
创建新的 Vue I18n 短语上下文编辑器 实例，将 Vue I18n 实例作为第一个参数，短语配置 作为第二个参数。

配置选项和示例方法。

使用旧的上下文编辑器

Ajax 模式

上下文编辑器支持 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

匹配这些模式的键将无法在上下文编辑器中访问，并且会正常渲染。