上下文编辑器(Strings)

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

适用于

Team版、Professional版、Business版和Enterprise版套餐

联系销售团队解决许可问题。

适用于

高级版和Enterprise套餐（原）

联系销售团队解决许可问题。

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

目前有两种版本：

上下文编辑器：

包括翻译编辑器器的新功能（多语言图、布局选项、批量操作、协作功能等）和用户界面。
:设置旧上下文编辑器。

安装上下文编辑器器后，用户可以自定义编辑器，使其工作多种技术。

安装 Strings 上下文编辑器

要求

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

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

具有 ⁇ 可译的字符串 ⁇ 提取的网站和使用键值结构来呈现 ⁇ 翻译的视图层。
暴露在视图或模板层的字键名称。
呈现编辑器的JavaScript代码段。
理想的情况是，有一个专门的翻译环境。这可以是暂存环境的复制，尽管初始设置工作量较大，但提供了更好的工作流和更高的稳定性。

如果没有专门的环境，则可以使用现有的暂存环境，并视需要启用上下文编辑器器。

JavaScript 代码段

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

该代码段包括：

与 ⁇ Phrase Strings API通信。
呈现用户界面。
提供登录。

项目ID见项目设置。

账户ID见 Strings 公司设置。

示例：

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // 不要更改此名称以使配置工作
      accountId:'ACCOUNT_ID',
      projectId:'PROJECT_ID',
      数据中心：“欧盟”，“我们”设置为美国数据中心
      前缀：“{___”, // 设置为视图模板中字键格式的前缀
      后缀：“__}}”，“// 设置为视图模板中字键格式的后缀
      禁用快捷键： False，// 设置为 true 以禁用键盘快捷键
      autoLowercase: true, // 如果字符串包含大写字母则设置为 False
    };
  </script>
  <script type=" module" async="" src="https://d2bgdl6xit7z.cloudfront.net/latest/ice/index.js"></script>

网络框架安装

i18next

说明

i18next Phrase 上下文编辑器后期处理器 ⁇ 支持比 ⁇ 19.5.1更新的所有 ⁇ i18next ⁇ 版本。虽然这个库也可以与以前的版本工作，但它们不受官方支持，可能得不到任何特定的更新或漏洞修复。

要在此环境中安装上下文编辑器，请执行以下步骤:

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

# 纱线
纱线添加i18下一个短语上下文编辑器后处理器

# npm
npm 安装 i18next- phrase-in-context- editor-post- Processor

注释

推荐的存储库版本是 1.4.0 或更高版本。

或通过 CDN 加载：

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

引导程序（示例）：

从'i18next'导入i18next;
从'i18next-xhr-backend'导入i18nextXHRBackend;

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        调试：true，
        ns: [“特别”，“共同”],
        defaultNS: 'special',
        后端：{
            / / 从 i18next-gitbook 存储库加载一些翻译
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            跨域：真
        }
    }, function(err, t) {
        / / 在 i18下一次初始化时执行一些操作
    });

要集成库，请执行以下操作：

从 i18next- phrase-in-context- editor-post-processor 库中导入 PhraseInContextEditorPostProcessor。
创建i18next Phrase 上下文编辑器译后处理器实例，传递 ⁇ PhraseConfig ⁇ 作为参数。
将新创建的 ⁇ i18next Phrase 上下文编辑器译后处理器实例传递给 ⁇ i18next ⁇ 使用方法。
将 ⁇ phraseInContextEditor ⁇ 字符串 ⁇ 添加到 ⁇ postprocess ⁇ 数组属性(在 ⁇ i18 next ⁇ init 方法的配置对象中传递)。

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

示例代码段：

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

注释

必须提供账户ID才能成功设置ICE。该账户 ID 在 Strings 公司设置中找到。

如果需要，配置使用OldICE属性以切换到:设置旧ICE:

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

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

配置选项和示例方法。

Vue I18n

注释

Vue I18n Phrase 上下文编辑器 ⁇ 支持所有 ⁇ Vue I18n ⁇ 版本8.17.5及更高版本。该代码库可能与以前的版本一起工作，但它们不受官方支持，因此不会获得任何特定更新或漏洞修复。

要在此环境中安装上下文编辑器，请执行以下步骤:

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

# 纱线
yarn 添加 vue-i18n-短语上下文编辑器

# npm
npm 安装 vue-i18n- phrase-in-context-编辑器

或加载CDN（手动注册窗口['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>

引导程序（示例）：

从'vue'导入 Vue;
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  区域：process.env.VUE_APP_I18N_区域 ⁇  'en',
  fallback区域：process.env.VUE_APP_I18N_FALLBACK_LOCALE  ⁇  'en',
  消息：{
      您好：“世界，您好！”
  }
});

new Vue（{
  i18n,
  render: h => h(应用程序)
}).$mount('#app');

要集成库，请执行以下操作：

导入Vue I18n Phrase 上下文编辑器术语库。
创建新的Vue I18n Phrase 上下文编辑器 ⁇ 实例,作为第一个参数传递 ⁇ Vue I18n ⁇ 实例,作为第二个参数传递 ⁇ Phrase 配置 ⁇ 。

配置选项和示例方法。

反应(intl)

注释

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

该库继承了 react-intl 软件包中的常见组件。如果通过调用initializePhraseAppEditor启用Phrase，则组件的行为将更改。

要在此环境中安装上上下文编辑器器，请执行以下步骤:

通过 NPM 安装最新软件包：
```
npm 安装 react-intl-phraseapp
```
或从原文/源语构建：
```
npm 运行 dist
```
```
npm 安装
```

配置：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  后缀：“__]]”，
  fullReparse: true
};

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

账户 ID 见 Strings 公司设置。

将代码段添加到反应应用程序：

从“react-intl-phraseapp”导入{initializePhraseAppEditor}

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  后缀：“__]]”，
  fullReparse: true
};

initializePhraseAppEditor(config);

查找所有格式化消息的导入，并将原文/源语从 ⁇ 反应-intl ⁇ 更改为 ⁇ 反应-intl-phraseapp。
```
从“react-intl-phraseapp”导入{FormattedMessage}
```
使用 jest 进行单元测试：
```
npm 测试
```

代码示例

这个演示展示了 Phrase 上下文编辑器与 react-intl 的集成。

角度2（ngx-翻译）

先决条件

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

要在此环境中安装上上下文编辑器器，请执行以下步骤:

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

配置：

从“ngx-translate-phraseapp”导入{initializationPhraseAppEditor, PhraseConfig};

让配置：PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  帐户ID：“<YOUR_ACCOUNT_ID>”
  phraseEnabled: true,
};

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

账户 ID 见 Strings 公司设置。

如果需要，配置使用OldICE属性以切换到:设置旧ICE:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  帐户ID：“<YOUR_ACCOUNT_ID>”，“
  phraseEnabled: true,
  useOldICE: true,
};

initializePhraseAppEditor(config);

如果需要，添加美国具体网址以启用通过美国数据中心的工作：

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：

app.component.ts

从“ngx-translate-phraseapp”导入{initializationPhraseAppEditor, PhraseAppCompiler, PhraseConfig}

让配置：PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  帐户ID：“<YOUR_ACCOUNT_ID>”
  phraseEnabled: true,
};

initializePhraseAppEditor(config);

app.module.ts

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


导出函数 HttpLoaderFactory（http:HttpClient) {
  return new TranslateHttpLoader(http);
}

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

代码示例

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

Ruby on Rails（i18n）

注释

此代码库可能不适用于旧版浏览器或 Microsoft IE11。如果需要支持这些浏览器，请将Babel ⁇ 添加到构建管道中。

先决条件

注册Phrase Strings 账户。
使用优秀的 ⁇ i18n ⁇ gem Rails也使用。

要在此环境中安装上上下文编辑器器，请执行以下步骤:

使用以下方法之一将短语上下文编辑器Ruby库添加到所需的环境:
- 通过 Gem
```
gem 安装 phraseapp-in-context- editor-Ruby
```
- 通过 Bundler
  
  将其添加到宝石文件中：
```
gem 'phraseapp-in-context-editor-ruby
```
- 直接从原文/源语开始编写，以获取最新和最伟大的：
```
套件和 gem 构建
```
通过执行 ⁇ Rails ⁇ generator创建初始化器文件：
```
Rails 生成 phraseapp_in_context_editor:安装 -- 账户_ID =<YOUR_账户_ID> -- 项目-ID =<YOUR_项目_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 上下文编辑器与 react-i18next 的集成。

Django

先决条件

注册Phrase Strings 账户。
为 Python 使用 Django ⁇ 框架。

注释

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

要在此环境中安装上上下文编辑器器，请执行以下步骤:

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

    “Phrase”、

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

为设置.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 公司设置。

如出现问题，可以手动集成段。

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

GitHub 上的 Django 适配器代码

代码示例

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

弗拉斯克语

先决条件

注册Phrase Strings 账户。
为 Python 使用 Flask ⁇ 框架。

注释

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

要在此环境中安装上上下文编辑器器，请执行以下步骤:

使用 ⁇ 点安装 ⁇ Flask-Phrase ⁇ 软件包:
```
pip 安装 Phrase
```

为 Flask 应用程序（app.config 或 config.py）添加以下配置：

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

应用程序代码应该如下所示：

从烧瓶导入烧瓶，[...]
从 flask_babel 导入 babel
从 flask_ phrase 导入 Phrase, gettext, ngettext
app = Flask(__name__)
babel = Babel( 应用程序)
phrase = Phrase(app)

用以下标签将 Phrase 代码段添加到基本布局文件中（它应该位于模板文件的部分中）：

<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://d2bgdldl6xit7z.cloudfront.net/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 的 gettext 函数。

代码示例

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

Symfony 5.x

先决条件

注册Phrase Strings 账户。
为 PHP 使用 Symfony ⁇ 框架。

注释

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

要将上下文编辑器器与 Symfony 应用程序集成，请执行以下步骤:

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

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

服务：
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        装饰：译员

在 {% 块状 Java 脚本 % 之间的基本或树枝布局模板中添加以下 JavaScript 代码段，以便上下文编辑器可以读取网页：

<script>
    window.PHRASEAPP_CONFIG = {
        accountId:'0bed59e5',
        projectId:'00000000000000004158e0858d2fa45c',
        datacenter: 'eu',
        origin: 'Phrasesymfony',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/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 代码示例：

$翻译 = 数组(

  "page.headline" => "Some Headline",

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

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

)

function translate($keyName) {

  返回 $ translations[$keyName];

}

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

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

格式

必须在模板中指明要为其渲染翻译的字符串。

使用此格式暴露字键名而不是翻译：

{{__phrase_NameOfYourKey__}}

例如：

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

修改 ⁇ translate() ⁇ helper方法，以便以所需的格式显示键名称：

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } other {

    返回 $ translations[$keyName];

  }

}

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

例如：

const t = (键:字符串) => '{{__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 = {

  前缀:'[[__',

  后缀：“__]]”

}

这告诉编辑器查找以 [[__ 开始并以 __ 结尾的 ⁇ 标记]]:

[[__phrase_YOUR.KEY__]]

如果使用短语上下文编辑器-Ruby ⁇ 提供上下文编辑器功能，请确保配置了装饰器：

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

结束

如果没有使用宝石，请确保在自定义义代码中调整字键名暴露模式。

启用和禁用上下文编辑器

此设置仅在使用上下文短语编辑器Rubygem时可用。

默认禁用上下文编辑器器。

可以显式启用或禁用上下文编辑器器。这会影响在视图中包括 ⁇ JavaScript ⁇ snippet（使用视图帮助器时）和渲染装饰的键：

PhraseApp::InContextEditor.enabled = true|false

将标记与环境变量绑定的示例：

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

完全修复

将上下文编辑器与使用虚拟DOM（如 ⁇ React）的JavaScript框架一起使用，启用fullReparse ⁇ 。这允许在检测到 DOM 更改时进行适当重新解析：

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

清理输出到网页的

上下文编辑器器可以通过为 ⁇ sanitize ⁇ 属性提供功能，配置为在译文插入网页之前转义或更改译文。

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

导入“掠夺/转义”转义；

window.PHRASEAPP_CONFIG = {  

    sanitize:逃避

}

单点登录

如果使用 ⁇ 单点登录并希望初始化启用了 ⁇ SSO ⁇ 的上下文编辑器,请在JavaScript代码段之前添加以下配置值:

window.PHRASEAPP_CONFIG = {

  sso: {

    启用：true，
    
    服务商：“saml”，“

    标识符：[插入_公司_标识符]

  }

}

要要求用户使用 SSO 登录，请设置 ⁇ 强制 ⁇ 参数:

window.PHRASEAPP_CONFIG = {

  sso: {

    强制执行：真

  }

}

旧上下文编辑器：设置

网络框架安装

角度2（ngx-翻译）

要在此环境中安装上上下文编辑器器，请执行以下步骤:

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

配置：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  前缀：“{___”,
  suffix: "__}}",
  fullReparse: true
};

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

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

将这些片段添加到 Angular app：

app.component.ts

从“ngx-translate-phraseapp”导入{initializationPhraseAppEditor, PhraseAppCompiler}

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  前缀：“{___”,
  suffix: "__}}",
  fullReparse: true
};

initializePhraseAppEditor(config);

app.module.ts

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

导出函数 HttpLoaderFactory（http:HttpClient) {
  return new TranslateHttpLoader(http);
}

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

代码示例

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

AngularJS（角度-翻译）

要在此环境中安装上上下文编辑器器，请执行以下步骤:

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

配置模块：

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

myApp.value("phraseEnabled", true);

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

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

将 Phrase Javascript ⁇ directive 添加到 ⁇ <head> 标签中的应用程序：
```
<phrase-javascript></phrase-javascript>
```
在任意网络浏览器中打开应用程序，以查看应用于该应用程序的上下文编辑器。使用任何 Phrase 公司用户登录。

GitHub 上的 Phrase

代码示例

这个演示程序为 Phrase 演示了如何使用角翻译本地化 AngularJS。

强果语

要在此环境中安装上上下文编辑器器，请执行以下步骤:

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

    “Phrase”、

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

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

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

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

GitHub 上的 Django 适配器代码

代码示例

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

反应(intl)

注释

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

该库继承了 react-intl 软件包中的常见组件。如果通过调用initializePhraseAppEditor启用Phrase，则组件的行为将更改。

要在此环境中安装上上下文编辑器器，请执行以下步骤:

通过 NPM 安装软件包：
```
npm 安装 react-intl-phraseapp
```
或从原文/源语构建：
```
npm 运行 dist
```
```
npm 安装
```

配置：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  后缀：“__]]”，
  fullReparse: true
};

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

将代码段添加到反应应用程序：

从“react-intl-phraseapp”导入{initializePhraseAppEditor}

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  后缀：“__]]”，
  fullReparse: true
};

initializePhraseAppEditor(config);

查找所有格式化消息的导入，并将原文/源语从 ⁇ 反应-intl ⁇ 更改为 ⁇ 反应-intl-phraseapp。
```
从“react-intl-phraseapp”导入{FormattedMessage}
```
使用 jest 进行单元测试：
```
npm 测试
```

代码示例

这个演示展示了 Phrase 上下文编辑器与 react-intl 的集成。

Ruby on Rails（i18n）

要在此环境中安装上上下文编辑器器，请执行以下步骤:

将 phraseapp-上下文编辑器-Ruby 添加到您要使用上下文编辑器的环境中，同时：
```
组 :开发做
  gem 'phraseapp-in-context-editor-ruby'
 结束
```
并通过执行 bundle 命令安装它：
```
$ 套餐安装
```
通过执行 ⁇ Rails ⁇ 生成器安装 ⁇ 上下文编辑器-Ruby ⁇ gem:
```
$ bundle exec Rails 生成 phraseapp_in_context_editor:安装 -- 访问令牌=YOUR_访问_令牌 -- 项目-ID=YOUR_项目_ID
```
--access-token

在个人资料文件设置中通过 ⁇ 授权 API 创建和管理 ⁇ 访问 ⁇ 或。

--project-id

项目的项目 ID 在项目设置中找到。这将创建一个具有一些配置选项的初始化文件。
使用 ⁇ phraseapp_in_context_editor_js ⁇ helper将JavaScript代码段添加到 ⁇ <head> ⁇ 标签中的应用程序布局中：
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
在任意网络浏览器中打开应用程序，以查看应用于该应用程序的上下文编辑器。使用任何 Phrase 公司用户登录。
禁用 Turbolinks（如果使用了）

每次获取页面时，Turbolinks 都会从页面中删除所有上下文编辑器器用户界面元素。

将 ⁇ 数据无涡轮连接 ⁇ 属性添加到 ⁇ 标签:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink":"" %>>
```

代码示例

这个演示展示了 Phrase 上下文编辑器与 react-i18next 的集成。

春天

要在此环境中安装上上下文编辑器器，请执行以下步骤:

确保软件包 ⁇ 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();

}

在每个页面的 ⁇ <head> ⁇ 标签中向您的模板添加 ⁇ <script> ⁇ 标签：

<head>

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

</head>

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

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

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

Spring Boot Starter 软件包（由 ePages 提供）

Symfony 2.x

要在此环境中安装上上下文编辑器器，请执行以下步骤:

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

创建一个新的配置文件：

# app/config/config_translation.yml

导入：

    - {资源: 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（'翻译'，false）；

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

覆盖标准翻译方法订单在上下文编辑器器中暴露字键名：

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

名称空间 Acme\您的绑定\翻译;

使用 Symfony\Bundle\FrameworkBundle\Translation\Translator 作为 BaseTranslator;

PhraseTranslator 类别扩展 BaseTranslator

{

    公共函数 trans($id, 数组 $参数 = 数组 (), $领域 = '消息', $区域 = 零)

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == ' routes') {

            / / 返回“路由”领域译文值

            返回strtr($this->目录[$locale]->get((字符串) $id, $domain), $ parameters);

        } other {

            / / 返回所有其他领域的 PhraseApp 翻译密钥

            return $prefix.$id.$suffix;

        }

    }

}

将 JavaScript 代码段添加到布局：

# Acme/YourBundle/资源/视图/layout.html.twig

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

Symfony 翻译文件

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

Symfony 3.x

要在此环境中安装上上下文编辑器器，请执行以下步骤:

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

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

导入：

   - {资源: config.yml }
```

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

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

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

$kernel = new AppKernel（'翻译'，true）；

$kernel->loadClassCache();

$request = Request::createFromGlobals();

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

$response->send();

$内核->终止（$请求，$响应）；

覆盖标准翻译方法订单在上下文编辑器器中暴露字键名：

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

使用 Symfony\Bundle\FrameworkBundle\Translation\Translator 作为 BaseTranslator;

PhraseTranslator 类别扩展 BaseTranslator

{

   公共函数 trans($id, 数组 $参数 = 数组 (), $领域 = '消息', $区域 = 零)

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       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;

类覆盖ServiceCompilerPass实现CompilerPass接口

{

   公共函数过程（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;

类别 AppBundle 扩展套件

{

   公共函数构建（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 Phrase 上下文编辑器 ⁇ 支持所有 ⁇ Vue I18n ⁇ 版本8.17.5及更高版本。该代码库可能与以前的版本工作，但它们不受官方支持，因此不会获得任何特定更新或漏洞修复。

要在此环境中安装上下文编辑器，请执行以下步骤:

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

# 纱线
yarn 添加 vue-i18n-短语上下文编辑器

# npm
npm 安装 vue-i18n- phrase-in-context-编辑器

或加载CDN（手动注册窗口['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>

引导程序（示例）：

从'vue'导入 Vue;
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  区域：process.env.VUE_APP_I18N_区域 ⁇  'en',
  fallback区域：process.env.VUE_APP_I18N_FALLBACK_LOCALE  ⁇  'en',
  消息：{
      您好：“世界，您好！”
  }
});

new Vue（{
  i18n,
  render: h => h(应用程序)
}).$mount('#app');

要集成库，请执行以下操作：

导入Vue I18n Phrase 上下文编辑器术语库。
创建新的Vue I18n Phrase 上下文编辑器 ⁇ 实例,作为第一个参数传递 ⁇ Vue I18n ⁇ 实例,作为第二个参数传递 ⁇ Phrase 配置 ⁇ 。

配置选项和示例方法。

使用旧的上下文编辑器

Ajax 模式

上下文编辑器器支持使用观测器操作 Ajax 和 DOM（即通过 JavaScript）。

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

window.PHRASEAPP_CONFIG = {

  ajax Observer: False

}

调试模式

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

强制区域

要在启动上下文编辑器时显式设置特定 ⁇ 区域 ⁇ 请使用forceLocale ⁇ setting。这对于在上下文编辑器中预先选择网络应用程序中当前显示的区域也很有用：

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

忽略的字符串

此设置仅在使用上下文短语编辑器Rubygem时可用。

可以将字符串 ⁇ 排除在上下文编辑器之外。使用 ⁇ 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*"]

结束

上下文编辑器器无法访问与这些模式匹配的字符串，只能正常呈现。