In-context Editor (Strings)

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

Доступно для

Тарифные планы Team, Professional, Business, Enterprise и Software UI/UX

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

Доступно для

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

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

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

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

In-context Editor:

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

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

Установка In-context Editor для Strings

Требования

Чтобы использовать In-context Editor, приложению требуется:

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

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

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

JavaScript-фрагмент

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

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

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

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

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

Пример:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId: 'ACCOUNT_ID',
      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 Editor в этой среде, выполните следующие действия:

Установите библиотеку 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 в метод use i18next.
4. Добавить строку phraseInContextEditor в свойство массива postProcess (передается внутри объекта конфигурации метода init i18next).
Добавьте JavaScript-фрагмент ICE в экземпляр i18next в настройке.

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

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

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

Параметры настройки и примеры методов.

Vue I18n

Примечание

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

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

Установите newest package с помощью предпочтительного менеджера пакетов:
```
# 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 Editor в этой среде, выполните следующие действия:

Установить новейший пакет через 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 Editor с react-intl.

Angular 2 (ngx-translate)

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

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

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

Установить с помощью 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 для переключения на old ICE:
```
let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  useOldICE: true,
};

initializePhraseAppEditor(config);
```
При необходимости добавить специфичные для США URL-адреса, чтобы Включить работу через центр хранения и обработки данных<1> в США:
```
baseUrl: "https://us.app.phrase.com",
apiBaseUrl: 'https://api.us.app.phrase.com/api/v2',
oauthEndpointUrl: "https://api.us.app.phrase.com/api/v2/authorizations",
profileUrl: "https://us.app.phrase.com/settings/profile",
```
По умолчанию документ-парсер редактор преобразует все ключи в нижний регистр. Если возникают проблемы с таким поведением и вы хотите использовать чувствительные к регистру ключи в редактор, отключить функцию автоматического преобразования в нижний регистр:
```
let config = {
  // ...
  autoLowercase: false
}
```

Добавить эти фрагменты в приложение Angular:

app.component.ts

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

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

initializePhraseAppEditor(config);

app.module.ts

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


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

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

Образец кода

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

Ruby on Rails (i18n)

Примечание

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

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

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

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

Добавить библиотеку 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"
```
При необходимости установить центр хранения и обработки данных US, чтобы Включить работу с конечными точками US:
```
  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "us"
```
Открыть приложение в любом веб-браузере, чтобы увидеть In-context Editor, примененный к приложению. Войдите в систему с любым пользователем организации Phrase.

Образец кода

Эта demo показывает интеграция Phrase In-context Editor с react-i18next.

Django

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

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

Примечание

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

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

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

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

Образец кода

Это demo приложение демонстрирует, как выполнить интеграция In-context Editor с приложением Django.

Flask

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

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

Примечание

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

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

Установить пакет 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.

При необходимости установить центр хранения и обработки данных US, чтобы Включить работу с конечными точками US:
```
window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "YOUR-ACCOUNT-ID",
    datacenter: "us",
};
```

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

Образец кода

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

Symfony 5.x

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

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

Примечание

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

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

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

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

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

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

Образец кода

Это демо-приложение демонстрирует, как интегрировать In-context Editor с приложением 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 Editor в настройке. Чтобы сообщить In-context Editor, какие декораторы должен искать парсер, добавьте следующие значения конфигурации перед JavaScript-фрагментом:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

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

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

In-context Editor отключен по умолчанию.

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

PhraseApp::InContextEditor.enabled = true|false

Пример привязки флага к переменной окружения:

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

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

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

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Очистка результат для веб-страницы

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

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

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

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

Если вы используете единый вход в систему и хотите инициализировать In-context Editor с включенным единым входом в систему (SSO), добавьте следующее значение конфигурации перед фрагментом JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Старый In-context Editor: настройка

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

Angular 2 (ngx-translate)

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

Установите с помощью NPM:
```
npm install ngx-translate-phraseapp
```

Настройте:

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

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

По умолчанию синтаксический анализатор документа редактора преобразует все ключи в нижний регистр. Если при таком поведении возникают проблемы и вы хотите использовать в редакторе ключи с учетом регистра, отключите функцию автоматического преобразования в нижний регистр:
```
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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Образец кода

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

AngularJS (angular-translate)

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

Установите 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 Editor, примененный к приложению. Войти с любым пользователем организации Phrase.

angular-phrase на GitHub

Образец кода

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

Django

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

Установите пакет 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 Editor для проекта с помощью этих параметров:
```
PHRASE_ENABLED = TruePHRASE_PROJECT_ID = 'YOUR_PROJECT_ID'PHRASE_PREFIX = '{{__'PHRASE_SUFFIX = '__}}'
```
Откройте приложение в любом веб-браузере, чтобы увидеть In-context Editor, примененный к приложению. Войти с любым пользователем организации Phrase.

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

Образец кода

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

React (intl)

Примечание

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

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

Установите пакет через 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
```

Образец кода

Эта demo показывает интеграция Phrase In-context Editor с react-intl.

Ruby on Rails (i18n)

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

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

Создать и управлять access tokens в профиль настройки или через интерфейс приложений API Authorizations.

--project-id

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

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

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

Образец кода

В этой demo показана интеграция Phrase In-context Editor с react-i18next.

Spring

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

Убедитесь, что package com.phraseapp.incontexteditor доступен в приложении.
Установите правильный Идентификатор проекта и настройте другие параметры в 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

Пакет Starter для Spring Boot (предоставлен ePages)

Symfony 2.x

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

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

# 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 Editor, примененный к приложению. Войти с любым пользователем организации Phrase.

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

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

Symfony 3.x

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

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

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

   }

}

Убедитесь, что класс всегда переопределяется при использовании бандла с compiler pass:

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

   }

}

При использовании отдельных compiler passes зарегистрируйте их в методе 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 Editor, примененный к приложению. Войти с любым пользователем организации Phrase.

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

Vue I18n

Примечание

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

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

Установите пакет с помощью предпочтительного менеджера пакетов:
```
# 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<3> в качестве первого аргумента, а Phrase Config<5> в качестве второго.

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

Использование старого In-context Editor

Режим Ajax

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

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

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

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

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

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

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

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

Ключи можно Исключить из отображения в In-context Editor. При работе с 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

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