In-Context Editor (Strings)

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

Доступно для

Команда, Профессиональный, Бизнес, Предприятие и Планы UI/UX программного обеспечения

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

Доступно для

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

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

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

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

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

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

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

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

Требования

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

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

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

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

Фрагмент JavaScript

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

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

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

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

Идентификатор учетной записи находится в настройках организации 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 поддерживает все версии i18next, новее 19.5.1. Хотя эта библиотека может работать и с предыдущими версиями, они не поддерживаются официально и могут не получать никаких конкретных обновлений или исправлений ошибок.

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

Установите библиотеку 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',
    }))
```
Примечание

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

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

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

Vue I18n

Примечание

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

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

Установите новейший пакет с помощью предпочитаемого менеджера пакетов:
```
# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor
```
или загрузите с помощью CDN (зарегистрируйте вручную window['vue-i18n-phrase-in-context-editor']):
```
<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>
```
Bootstrap (пример):
```
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      hello: 'Привет, мир!'
  }
});

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 в качестве первого аргумента и Конфигурация Фразы в качестве второго.

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

React (intl)

Примечание

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

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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

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

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

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

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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Установите с помощью 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]
})

Образец кода

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

Ruby on Rails (i18n)

Примечание

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

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

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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Добавьте phraseapp-in-context-editor-ruby библиотеку в нужную среду, используя один из следующих методов:
- Через Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Через Bundler
  
  Добавьте это в Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Соберите напрямую из исходников, чтобы получить последние обновления:
```
bundle && gem build
```
Создайте файл инициализации, выполнив генератор Rails:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
Идентификатор проекта находится в настройках проекта.

Идентификатор учетной записи находится в настройках организации 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.
Используйте фреймворк Django для Python.

Примечание

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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

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

    'phrase',

)
```
Добавьте следующие шаблонные фрагменты в файл макета templates/base_generic.html или эквивалентный:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Используйте тег шаблона phrase_i18n в шаблонах (например, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```
Добавьте следующую конфигурацию в settings.py:
```
    # Phrase In-Context Editor settings
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Set your own account id
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Set your own project id
    PHRASE_DATACENTER = "eu"  # Choose your datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"
```
Идентификатор проекта находится в настройках проекта.

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

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

Django adapter code on GitHub

Образец кода

Это demo приложение демонстрирует, как интегрировать Контекстный редактор с приложением Django.

Flask

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

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

Примечание

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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Установите пакет Flask-Phrase с помощью pip:
```
pip install Flask-Phrase
```

Добавьте следующую конфигурацию в приложение Flask (app.config или config.py):

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

Код приложения должен выглядеть примерно так:

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

Добавьте фразу JavaScript snippet в файл базового макета с следующим тегом (он должен находиться внутри секции файла шаблона):

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "ВАШ-ИД-ПРОЕКТА",
        accountId: "ВАШ-ИД-УЧЕТНОЙ-ЗАПИСИ",
        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: "ВАШ-ИД-ПРОЕКТА",
    accountId: "ВАШ-ИД-УЧЕТНОЙ-ЗАПИСИ",
    datacenter: "us",
};

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

Образец кода

Это демо приложение демонстрирует, как интегрировать Контекстный редактор с приложением Flask.

Symfony 5.x

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

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

Примечание

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

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

Скопируйте PhraseStringsInContextEditor и его содержимое в папку /src/Service репозитория или в желаемое место. Если размещено в другом месте, соответственно настройте пространство имен.
Настройте config/services.yaml, чтобы украсить translator сервис адаптером Phrase:
```
services:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator
```
Добавьте следующий фрагмент JavaScript в базовый или шаблон Twig между {% block javascripts %}, чтобы Контекстный редактор мог читать веб-страницу:
```
<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        datacenter: 'eu',
        origin: 'phrase-symfony',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>
```
Приложение Symfony теперь подключено к Контекстному редактору.

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

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

Если необходимо, установите центр обработки данных в США, чтобы включить работу с конечными точками США:
```
window.PHRASEAPP_CONFIG = {
    projectId: "ВАШ-ИД-ПРОЕКТА",
    accountId: "ВАШ-ИД-УЧЕТНОЙ-ЗАПИСИ",
    datacenter: "us",
};
```
Перезагрузите приложение и войдите с учетными данными Phrase, чтобы начать процесс перевода непосредственно на веб-странице.

Образец кода

Это демо приложение демонстрирует, как интегрировать Контекстный редактор с приложением Symfony.

Настройка Контекстного редактора

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

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

Пример кода PHP:

$translations = array(

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

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

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

)

function translate($keyName) {

  return $translations[$keyName];

}

Шаблон затем будет отображать результат метода translate() вместо фактической переведенной строки:

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

Форматирование

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

Используйте этот формат, чтобы показать имена ключей вместо переводов:

{{__phrase_NameOfYourKey__}}

Пример:

Если ключ page.headline находится в шаблоне, отобразите строку {{__phrase_page.headline__}}.

Измените вспомогательный метод translate(), чтобы показать имена ключей в требуемом формате:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

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

Пример:

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

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

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

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

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

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

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

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

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

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

{{__phrase_YOUR.KEY__}}

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

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

Включение и отключение Контекстного редактора

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

Контекстный редактор по умолчанию отключен.

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

PhraseApp::InContextEditor.enabled = true|false

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

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

Полная переработка

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

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

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

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

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

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

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

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

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

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

Angular 2 (ngx-translate)

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Установите с помощью 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: {
        предоставить: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        предоставить: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Образец кода

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

AngularJS (angular-translate)

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

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

angular-phrase на GitHub

Образец кода

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

Django

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

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

    'phrase',

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

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

Образец кода

Это демо приложение демонстрирует, как интегрировать Контекстный редактор с приложением Django.

React (intl)

Примечание

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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

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

Образец кода

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

Ruby on Rails (i18n)

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Добавьте phraseapp-in-context-editor-ruby гем в среду, с которой вы хотите использовать Контекстный редактор:
```
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
```
--access-token

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

--project-id

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

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

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

Образец кода

Этот демо демонстрирует интеграцию редактора контекста Phrase с react-i18next.

Весна

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Убедитесь, что пакет 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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Создайте новую среду, в которой будет работать редактор контекста. В примере новая среда называется перевод.

Создайте новый файл конфигурации:
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

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

Создайте контроллер, чтобы сделать среду доступной для браузера:

# web/app_translation.php

<?php

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

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

use Symfony\Component\HttpFoundation\Request;

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

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

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

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Добавьте фрагмент JavaScript в макет:
```
# Acme/YourBundle/Resources/views/layout.html.twig
```
Откройте приложение в любом веб-браузере, чтобы увидеть примененный Контекстный редактор к приложению. Войдите с любым пользователем организации Phrase.

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

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

Symfony 3.x

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Создайте новую среду, в которой будет работать редактор контекста. В примере новая среда называется перевод.

Создайте новый файл конфигурации:
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

Создайте контроллер, чтобы сделать среду доступной для браузера:

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

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

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

$kernel->loadClassCache();

$request = Request::createFromGlobals();

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

$response->send();

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

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

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

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

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

<?php

namespace AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

use Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   public function process(ContainerBuilder $container)

   {

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

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

   }

}

Если вы используете отдельные компиляторы, зарегистрируйте их в методе build() класса пакета:

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

class AppBundle extends Bundle

{

   public function build(ContainerBuilder $container)

   {

       parent::build($container);

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

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

       };

   }

}

Добавьте фрагмент JavaScript в макет:
```
# src/YourBundle/Resources/views/layout.html.twig
```
Откройте приложение в любом веб-браузере, чтобы увидеть примененный Контекстный редактор к приложению. Войдите с любым пользователем организации Phrase.

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

Vue I18n

Примечание

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

Чтобы установить Контекстный редактор в этой среде, выполните следующие шаги:

Установите пакет с помощью предпочитаемого менеджера пакетов:
```
# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor
```
или загрузите с помощью CDN (зарегистрируйте вручную window['vue-i18n-phrase-in-context-editor']):
```
<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>
```
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: 'Привет, мир!'
  }
});

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 экземпляр в качестве первого аргумента и Конфигурация фраз в качестве второго.

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

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

Ajax режим

Контекстный редактор поддерживает Ajax и манипуляции с DOM (т.е. через JavaScript) с использованием наблюдателей мутаций.

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

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

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

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

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

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

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

Ключи могут быть исключены из отображения в контекстном редакторе. При работе с 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

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