Контекстный редактор Strings (Strings)

Контент автоматически переведен с английского языка с помощью Phrase Language AI.

Доступно для

Планы Team, Professional, Business, Enterprise и Software UI/UX

Свяжитесь с отделом продаж по вопросам лицензирования.

Доступно для

планов Advanced и Enterprise (устаревшая версия)

Свяжитесь с отделом продаж по вопросам лицензирования.

Контекстный редактор разработан, чтобы помочь переводчикам работать эффективнее и переводить страницу веб-сайта благодаря прямой интеграции с редактором переводов Strings.

В настоящее время доступны две версии:

Контекстный редактор:

Включает новые функциональные возможности (многоязычный просмотр, параметры макета, пакетные действия, функции совместной работы и т. д.) и пользовательский интерфейс из редактора переводов.
старый контекстный редактор.

После установки контекстного редактора его можно настроить для работы со многими технологиями.

Установка контекстного редактора Strings

Требования

Для использования контекстного редактора приложению требуется:

Веб-сайты, веб-приложения, мобильные сайты и т. д.
У переводчиков есть доступ к веб-серверу, на котором запущен редактор. При необходимости это может быть локальная среда.
Структура файла локализации «ключ-значение».

Веб-сайты с извлеченными переводимыми строками и уровнем представления, который использует структуру «ключ-значение» для отображения переводов.
Имена ключей, доступные на уровне представления или шаблона.
Фрагмент JavaScript, который отображает редактор.
В идеале — выделенная среда для переводов. Это может быть клон промежуточной среды, и, хотя первоначальная настройка требует больше усилий, это обеспечивает лучший рабочий процесс и большую стабильность.

Если выделенная среда невозможна, можно использовать существующую промежуточную среду с возможностью включения контекстного редактора по мере необходимости.

Фрагмент JavaScript

Включите фрагмент JavaScript в макет приложения.

Фрагмент включает код, необходимый для:

Взаимодействовать с Phrase Strings API.
Отобразить пользовательский интерфейс.
Обеспечить вход в систему.

ID проекта находится в настройках проекта.

ID аккаунта находится в настройках организации Strings.

Образец:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId: ИДЕНТИФИКАТОР УЧЕТНОЙ ЗАПИСИ
      projectId: PROJECT.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>

Установка веб-фреймворков

i18next

Примечание

Постпроцессор i18next Phrase In-Context Editor поддерживает все версии i18next новее 19.5.1. Хотя эта библиотека может работать и с предыдущими версиями, они официально не поддерживаются и могут не получать никаких специфических обновлений или исправлений ошибок.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите библиотеку 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
    });
```
Чтобы интегрировать библиотеку:
1. Импортируйте PhraseInContextEditorPostProcessor из библиотеки i18next-phrase-in-context-editor-post-processor.
2. Создайте новый экземпляр i18next Phrase In-Context Editor Post Processor, передав PhraseConfig в качестве аргумента.
3. Передайте созданный экземпляр i18next Phrase In-Context Editor Post Processor в метод i18next use.
4. Добавьте строку phraseInContextEditor в свойство массива postProcess (передается внутри объекта конфигурации метода i18next init).
Добавьте JavaScript-фрагмент ICE в экземпляр i18next при настройке.

Пример фрагмента:
```
i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId: '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
    {
```
Примечание

Для успешной настройки ICE необходимо указать accountId. Идентификатор учетной записи можно найти в настройках организации Strings.

При необходимости настройте атрибут useOldICE, чтобы переключиться на старый ICE:
```
i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId: '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
      useOldICE: true,
    {
```
Запустите редактор In-Context.
Откройте приложение в веб-браузере, чтобы отобразить редактор In-Context. Войдите в систему под любым пользователем организации Phrase.

Параметры конфигурации и примеры методов.

Vue I18n

Примечание

Vue I18n Phrase In-Context Editor поддерживает все версии Vue I18n 8.17.5 и новее. Эта библиотека может работать с предыдущими версиями, но они официально не поддерживаются и не будут получать никаких специальных обновлений или исправлений ошибок.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите новейший пакет с помощью предпочтительного менеджера пакетов:
```
# 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: {
      "hello": { "hello" : "World",
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');
```
Чтобы интегрировать библиотеку:
1. Импортируйте библиотеку Vue I18n Phrase In-Context Editor.
2. Создайте новый экземпляр Vue I18n Phrase In-Context Editor, передав экземпляр Vue I18n в качестве первого аргумента, а Phrase Config — в качестве второго.

Параметры конфигурации и примеры методов.

React (intl)

Примечание

Эта библиотека может не работать в IE11 или более старых браузерах. Добавьте Babel в конвейер сборки, если требуется поддержка старых браузеров.

Эта библиотека наследует общие компоненты пакетов react-intl. Если Phrase включен путем вызова initializePhraseAppEditor, поведение компонентов изменится.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите новейший пакет через 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
{
```
Идентификатор проекта находится в настройках проекта.

Идентификатор учетной записи находится в настройках организации 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 In-Context с react-intl.

Angular 2 (ngx-translate)

Предварительные требования

Зарегистрируйтесь в учетной записи Phrase Strings.
Используйте модуль ngx-translate для локализации в приложениях Angular 2.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите с помощью 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,
{
```
Идентификатор проекта находится в настройках проекта.

Идентификатор учетной записи находится в настройках организации 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]
})

Образец кода

Это демо-приложение демонстрирует интеграцию редактора In-Context с Angular и ngx-translate.

Ruby on Rails (i18n)

Примечание

Эта библиотека может не работать «из коробки» в устаревших браузерах или Microsoft IE11. Добавьте Babel в конвейер сборки, если требуется поддержка этих браузеров.

Предварительные требования

Зарегистрируйтесь, чтобы создать учетную запись Phrase Strings.
Используйте отличный гем i18n, который также используется в Rails.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Добавьте библиотеку 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>
```
Идентификатор проекта находится в настройках проекта.

Идентификатор учетной записи находится в настройках организации 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"
```
Откройте приложение в любом веб-браузере, чтобы увидеть редактор In-Context, примененный к приложению. Войдите в систему под любым пользователем организации Phrase.

Образец кода

Эта демо-приложение демонстрирует интеграцию редактора In-Context с react-i18next.

Django

Предварительные требования

Зарегистрируйтесь для получения учетной записи Phrase Strings.
Используйте фреймворк Django для Python.

Примечание

Старая версия ICE недоступна начиная с версии 2.0.0.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите пакет django-phrase с помощью pip:
```
$ 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 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 = "__}}"
```
Идентификатор проекта находится в настройках проекта.

Идентификатор учетной записи находится в настройках организации Strings.

В случае возникновения проблем можно вручную интегрировать JavaScript-фрагмент.
Откройте приложение в любом веб-браузере, чтобы увидеть редактор In-Context, примененный к приложению. Войдите в систему под любым пользователем организации Phrase.

Код адаптера Django на GitHub

Образец кода

Это демо-приложение демонстрирует, как интегрировать редактор In-Context с приложением Django.

Flask

Предварительные требования

Зарегистрируйтесь для получения учетной записи Phrase Strings.
Используйте фреймворк Flask для Python.

Примечание

Старая версия ICE недоступна начиная с версии 2.0.0.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите пакет 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-фрагмент 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://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    {
</script>
```
Идентификатор проекта находится в настройках проекта.

Идентификатор учетной записи находится в настройках организации Strings.

При необходимости установите центр обработки данных в США, чтобы работать с конечными точками в США:
```
window.PHRASEAPP_CONFIG = {
    projectId: «YOUR-PROJECT-ID»,
    accountId: «YOUR-ACCOUNT-ID»,
    datacenter: "us",
{
```

Когда PHRASEAPP_ENABLED = True, пакет изменяет возвращаемые значения функций перевода так, чтобы они соответствовали формату, понятному ICE. Если установлено значение False, пакет будет использовать стандартные функции gettext из Flask-Babel.

Образец кода

Это демо-приложение демонстрирует, как интегрировать редактор In-Context с приложением Flask.

Symfony 5.x

Предварительные требования

Зарегистрируйтесь, чтобы создать учетную запись Phrase Strings.
Используйте фреймворк Symfony для PHP.

Примечание

Версия 2.0.0 поддерживает Symfony 5 и выше. Если вы используете Symfony 2, 3 или 4, ознакомьтесь с старой версией ICE.

Чтобы интегрировать редактор In-Context с приложением Symfony, выполните следующие действия:

Скопируйте PhraseStringsInContextEditor и его содержимое в папку /src/Service репозитория или в нужное место. Если вы разместили его в другом месте, соответствующим образом настройте пространство имен.
Настройте файл config/services.yaml, чтобы задекорировать сервис translator адаптером Phrase:
```
services:
    {
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator
```
Добавьте следующий фрагмент JavaScript в базовый шаблон или шаблон Twig между {% block javascripts %}, чтобы редактор In-Context мог читать веб-страницу:
```
<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 теперь подключено к редактору In-Context.

Идентификатор проекта находится в настройках проекта.

Идентификатор учетной записи находится в настройках организации Strings.

При необходимости установите центр обработки данных в США, чтобы включить работу с конечными точками в США:
```
window.PHRASEAPP_CONFIG = {
    projectId: «YOUR-PROJECT-ID»,
    accountId: «YOUR-ACCOUNT-ID»,
    datacenter: "us",
{
```
Перезагрузите приложение и войдите в систему с учетными данными Phrase, чтобы начать процесс перевода непосредственно на веб-странице.

Образец кода

Это демо-приложение демонстрирует, как интегрировать редактор In-Context с приложением Symfony.

Настройка In-Context Editor

Раскрытие имен ключей

Как правило, уровень представления отображает переводы путем передачи имени переводимой строки (т.е. ключа) в какой-либо метод перевода или вспомогательный элемент представления.

Пример кода 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 + '__}}'

Экранирование имен ключей и специальных символов

Убедитесь, что имена ключей преобразованы в распознаваемый формат.

Символы из следующего списка необходимо экранировать при отображении в In-Context Editor:

Символ	Последовательность экранирования	Пример
{	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} превращается в {{__phrase__key[[[[[[html_open]]]]]]__}}
{	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} превращается в {{__phrase__[[[[[[html_close]]]]]]key__}}

Автоматическое преобразование регистра

По умолчанию парсер документов In-Context Editor преобразует все ключи в нижний регистр. Если это поведение вызывает проблемы и вы хотите использовать ключи с учетом регистра в In-Context Editor, отключите функцию автоматического приведения к нижнему регистру:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Настройка декораторов ключей

При использовании In-Context Editor имена ключей обычно заключаются в декораторы (по умолчанию — фигурные скобки) для создания уникальных идентификационных ключей в контексте документа:

{{__phrase_YOUR.KEY__}}

Если это приводит к конфликтам с другими библиотеками (например, с клиентскими шаблонизаторами, такими как AngularJS и Ember.js), использующими похожий синтаксис, измените префикс и суффикс декораторов редактора In-Context в настройках. Чтобы указать In-Context Editor, какие декораторы должен искать парсер, добавьте следующие значения конфигурации перед фрагментом JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Это указывает редактору искать теги, начинающиеся с [[__ и заканчивающиеся на __]]:

[[__phrase_YOUR.KEY__]]

Если вы используете гем phraseapp-in-context-editor-ruby для обеспечения функциональности In-Context Editor, убедитесь, что декораторы настроены:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Если вы не используете этот гем, убедитесь, что шаблон отображения имени ключа скорректирован в пользовательском коде.

Включение и отключение In-Context Editor

Этот параметр доступен только при использовании гема phraseapp-in-context-editor-ruby.

Редактор In-Context по умолчанию отключен.

Редактор In-Context можно явно включить или отключить. Это влияет на включение фрагмента JavaScript (при использовании вспомогательного метода представления) и отрисовку декорированных имен ключей в представлениях:

PhraseApp::InContextEditor.enabled = true|false

Пример привязки флага к переменной среды:

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

Полный повторный парсинг

Включите fullReparse, если используете редактор In-Context с JavaScript-фреймворком, который использует виртуальный DOM, например React. Это позволяет выполнять правильный повторный парсинг при обнаружении изменений в DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Скрытие элементов от In-Context Editor

Классы, перечисленные в параметре hidingClasses, считаются скрытыми и исключаются сканером In-Context Editor. Чтобы сделать элементы с определенным классом доступными для сканирования, удалите имя этого класса из массива hidingClasses, а не добавляйте его. Добавление имени класса в массив исключает соответствующие элементы и скрывает кнопку редактирования; удаление имени класса из массива включает соответствующие элементы и отображает кнопку редактирования.

Параметр hidingClasses выполняет статическую проверку наличия класса у элемента и его предков. Он не оценивает вычисляемую или адаптивную видимость. Элемент, использующий адаптивный служебный класс, соответствующий записи в hidingClasses (например, класс с именем «hidden» в сочетании с классом видимости для конкретной контрольной точки), исключается из сканирования независимо от того, виден ли он на самом деле в текущем окне просмотра. Избегайте использования имен классов, перечисленных в hidingClasses, исключительно для адаптивного оформления элементов, которые должны сканироваться.

Очистка вывода на веб-странице

Редактор In-Context можно настроить на экранирование или изменение переводов перед их вставкой на веб-страницу, предоставив функцию для свойства sanitize.

Функция принимает строку перевода в качестве первого аргумента и должна возвращать строку:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Единый вход в систему

Если вы используете single sign-on и хотите инициализировать редактор In-Context с включенным SSO, добавьте следующее значение конфигурации перед фрагментом JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Чтобы обязать пользователей выполнять вход с использованием SSO, установите параметр enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Разбиение ключей на страницы и статус перевода

Для страниц с большим количеством переводимых ключей редактор In-Context загружает ключи по 100 на страницу. При загрузке маркеры редактирования подключаются только для ключей на первой странице. Остальные ключи отображаются как непереведенные до тех пор, пока страница не будет прокручена дальше или пока не будет выполнен прямой поиск ключа, так как прямой поиск обходит разбиение на страницы. Параметр конфигурации для увеличения размера страницы отсутствует, так как разбиение на страницы происходит на стороне сервера, а не через клиентскую библиотеку.

Чтобы проверить статус перевода для всех ключей, не прокручивая страницу, нажмите значок поиска в редакторе In-Context, чтобы открыть список ключей. В списке ключей отображается общее количество ключей, которые уже интегрированы, по сравнению с ключами, отсутствующими в проекте. Его можно переключить, чтобы отображались все ключи проекта, а не только те, которые были обнаружены на текущей странице. Альтернативный вариант — проверить полноту перевода для соответствующего задания непосредственно в редакторе переводов Strings, в котором нет этого ограничения на отображение по страницам.

Старый редактор In-Context: Настройка

Установка веб-фреймворков

Angular 2 (ngx-translate)

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установка с помощью NPM:
```
npm install ngx-translate-phraseapp
```
Конфигурировать
```
let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "{{__",
  suffix: "__}}",
  fullReparse: true
```
Идентификатор проекта (Project 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]
})

Образец кода

Это демо-приложение демонстрирует интеграцию редактора In-Context с Angular и ngx-translate.

AngularJS (angular-translate)

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите angular-phrase через Bower (или скачайте вручную):
```
$ bower install angular-phrase
```
Добавьте модуль angular-phrase в существующее приложение AngularJS после загрузки модуля angular-translate:
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Настройте модуль:
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
Идентификатор проекта находится в настройках проекта. Это создает файл инициализации с некоторыми параметрами конфигурации.
Добавьте директиву phrase-javascript в приложение внутри тега <head>:
```
<phrase-javascript></phrase-javascript>
```
Откройте приложение в любом веб-браузере, чтобы увидеть редактор In-Context, примененный к приложению. Войдите с помощью любого пользователя организации Phrase.

angular-phrase на GitHub

Образец кода

Это демо-приложение для angular-phrase показывает, как локализовать AngularJS с помощью angular-translate.

Django

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите пакет django-phrase с помощью pip:
```
$ pip install django-phrase
```
Добавьте Phrase в список установленных приложений:
```
INSTALLED_APPS = (

    'phrase',

)
```
Используйте тег шаблона phrase_i18n в шаблонах:
```
{% load phrase_i18n %}
```
Чтобы позволить django-phrase переопределять методы перевода, загрузите phrase_i18n после i18n.
Добавьте фрагмент JavaScript в макет:
```
{% phrase_javascript %}
```
Настройте редактор In-Context для проекта с помощью этих параметров:
```
PHRASE_ENABLED = TruePHRASE_PROJECT_ID = 'YOUR_PROJECT_ID'PHRASE_PREFIX = '{{__'PHRASE_SUFFIX = '__}}'
```
Откройте приложение в любом веб-браузере, чтобы увидеть редактор In-Context, примененный к приложению. Войдите с помощью любого пользователя организации Phrase.

Код адаптера Django на GitHub

Образец кода

Это демо-приложение демонстрирует, как интегрировать редактор In-Context с приложением Django.

React (intl)

Примечание

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите пакет через NPM:
```
npm install react-intl-phraseapp
```
или соберите из исходного кода:
```
npm run dist
```
```
npm install
```
Конфигурировать
```
let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
```
Идентификатор проекта находится в настройках проекта.

Добавьте фрагмент в приложение 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
```

Образец кода

Эта демо показывает интеграцию редактора In-Context от Phrase с react-intl.

Ruby on Rails (i18n)

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Добавьте гем phraseapp-in-context-editor-ruby в среду, в которой вы хотите использовать In-Context Editor:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
и установите его, выполнив команду bundle:
```
$ bundle install
```
Установите гем phraseapp-in-context-editor-ruby, выполнив генератор Rails:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
Токен доступа

Создавайте токены доступа и управляйте ими в настройках профиля или через API авторизации.

project.id

Идентификатор проекта (Project ID) можно найти в настройках проекта. Это создает файл инициализации с некоторыми параметрами конфигурации.
Добавьте JavaScript-фрагмент в макет вашего приложения внутри тега <head> с помощью помощника phraseapp_in_context_editor_js:
```
<head>
  
  <%= phraseapp_in_context_editor_js %>
  
</head>
```
Откройте приложение в любом веб-браузере, чтобы увидеть редактор In-Context, примененный к приложению. Войдите с помощью любого пользователя организации Phrase.
Отключите Turbolinks (если используется)

Turbolinks удаляет все элементы интерфейса In-Context Editor со страницы при каждой загрузке страницы.

Добавьте атрибут data-no-turbolink к тегу <body>:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Образец кода

Эта демо показывает интеграцию редактора In-Context от Phrase с react-i18next.

Spring

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Убедитесь, что пакет com.phraseapp.incontexteditor доступен в приложении.
Установите правильный идентификатор проекта и настройте другие параметры в PhraseAppConfiguration.class.

Чтобы отображать все переводы через Phrase, добавьте компонент в приложение:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Предоставьте необходимый 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 в этой среде, выполните следующие действия:

Создайте новую среду, в которой будет работать редактор In-Context. В примере новая среда называется 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();

Переопределите стандартный метод перевода, чтобы сделать имена ключей доступными для редактора In-Context:

# 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
```
Откройте приложение в любом веб-браузере, чтобы увидеть редактор In-Context, примененный к приложению. Войдите с помощью любого пользователя организации Phrase.

Документация по переводу Symfony

Код адаптера Symfony 2.x на GitHub

Symfony 3.x

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Создайте новую среду, в которой будет работать редактор In-Context. В примере новая среда называется 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);

Переопределите стандартный метод перевода, чтобы сделать имена ключей доступными для редактора In-Context:

# 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
```
Откройте приложение в любом веб-браузере, чтобы увидеть редактор In-Context, примененный к приложению. Войдите с помощью любого пользователя организации Phrase.

Документация по переводу Symfony

Vue I18n

Примечание

Редактор Phrase In-Context для Vue I18n поддерживает все версии Vue I18n 8.17.5 и новее. Эта библиотека может работать с предыдущими версиями, но они официально не поддерживаются и не будут получать никаких специальных обновлений или исправлений ошибок.

Чтобы установить редактор In-Context в этой среде, выполните следующие действия:

Установите пакет с помощью предпочтительного менеджера пакетов:
```
# 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: {
      "hello": { "hello" : "World",
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');
```
Для интеграции библиотеки:
1. Импортируйте библиотеку Vue I18n Phrase In-Context Editor.
2. Создайте новый экземпляр Vue I18n Phrase In-Context Editor, передав экземпляр Vue I18n в качестве первого аргумента, а Phrase Config — в качестве второго.

Параметры конфигурации и примеры методов.

Использование старого редактора In-Context

Режим Ajax

In-Context редактор поддерживает Ajax и манипуляции с DOM (например, через JavaScript) с использованием наблюдателей за изменениями (mutation observers).

Режим Ajax может вызывать проблемы в некоторых случаях и приводить к серьезным проблемам с производительностью при использовании редактора In-Context. Чтобы отключить режим Ajax, добавьте следующее значение конфигурации перед фрагментом JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Режим отладки

Чтобы включить режим отладки, добавьте следующее значение конфигурации перед фрагментом JavaScript:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Принудительная установка локали

Чтобы явно задать определенную локаль при запуске редактора In-Context, используйте настройку forceLocale. Это также полезно для предварительного выбора локали, которая в данный момент отображается в вашем веб-приложении в редакторе In-Context:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Игнорируемые ключи

Этот параметр доступен только при использовании гема phraseapp-in-context-editor-ruby.

Ключи можно исключить из отображения в редакторе In-Context. При работе с Rails ключи могут игнорироваться для таких данных, как сообщения об ошибках или ключи формата даты и времени. Чтобы исключить ключи из автоматической обработки с помощью гема phraseapp-in-context-editor-ruby, добавьте массив ключей в файл инициализации phraseapp_in_context_editor.rb. Также можно использовать подстановочные знаки:

PhraseApp::InContextEditor.configure do |config|

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

end

Ключи, соответствующие любому из этих шаблонов, не будут доступны для редактора In-Context и будут отображаться обычным образом.