Редактор в контексте (Строки)

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

Доступно для

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

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

Доступно для

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

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

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

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

Редактор в контексте:

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

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

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

Требования

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

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

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

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

Фрагмент JavaScript

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

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

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

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

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

Пример:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Не изменяйте это имя, чтобы конфигурация работала
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Установите 'us' для центра обработки данных в США
      prefix: '{{__', // Установите префикс для формата ключа в шаблонах представления
      suffix: '__}}', // Установите суффикс для формата ключа в шаблонах представления
      disableShortcuts: false, // Установите true, чтобы отключить сочетания клавиш
      autoLowercase: true, // Установите в false, если ключи содержат заглавные буквы
    };
  </script>
  <script type="module" async="" src="https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js"></script>

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

i18next

Примечание

Постобработчик редактора фраз в контексте i18next поддерживает все версии 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: {
            // загрузить некоторые переводы из репозитория i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // выполнить что-то при инициализации i18next
    });
```
Чтобы интегрировать библиотеку:
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,
    }))
```
Запустите редактор In-Context.
Откройте приложение в веб-браузере, чтобы отобразить редактор In-Context. Войдите с любым пользователем организации 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: '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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      компилятор: {
        предоставить: TranslateCompiler,
        использоватьКласс: PhraseAppCompiler
      }
    }),
  ],
  поставщики: [],
  загрузить: [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.

Образец кода

Этот демонстрация показывает интеграцию 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:

    # Настройки редактора In-Context Phrase
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Установите свой идентификатор учетной записи
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Установите свой идентификатор проекта
    PHRASE_DATACENTER = "eu"  # Выберите свой дата-центр '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 snippet в основной файл макета с помощью следующего тега (он должен находиться внутри секции файла шаблона):
```
<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "YOUR-PROJECT-ID",
        accountId: "YOUR-ACCOUNT-ID",
        datacenter: "eu",
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>
```
Идентификатор проекта можно найти в настройках проекта.

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

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

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

Образец кода

Это демо приложение демонстрирует, как интегрировать редактор 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:

сервисы:
    ...
    App\Service\PhraseStringsInContextEditor\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.

При необходимости установите центр обработки данных в США, чтобы включить работу с конечными точками США:
```
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" => "Я ссылка",

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

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

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

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

{{__phrase_YOUR.KEY__}}

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

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

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

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

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

}

Санитизировать вывод на веб-страницу

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

Образец кода

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

Настройте In-Context Editor для проекта с этими параметрами:

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

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

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

Образец кода

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

React (intl)

Примечание

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

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

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

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

Образец кода

Этот демо показывает интеграцию редактора Phrase In-Context с 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

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

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

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

импорты:

    - { ресурс: config.yml }

параметры:

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

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

# web/app_translation.php

<?php

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

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

use Symfony\Component\HttpFoundation\Request;

$kernel = new AppKernel('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') {

            // Возврат переведенных значений для домена 'routes'

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

        } else {

            // Возврат ключей перевода PhraseApp для всех остальных доменов

            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. В примере новая среда называется translation.

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

импорты:

   - { ресурс: config.yml }
```

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

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

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

$kernel = new AppKernel('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';

       }

       // Возврат ID ключа перевода с префиксом и суффиксом для 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

Примечание

Чтобы установить 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: 'Привет, мир!'
  }
});

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 Editor

Ajax режим

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

Ajax режим может вызвать проблемы в некоторых случаях и может привести к серьезным проблемам с производительностью при использовании In-Context editor. Чтобы отключить 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 gem.

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