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

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

Доступно для

Планы Team, Professional, Business и Enterprise

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

Доступно для

Расширенный и Enterprise план (устаревшая версия режим)

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

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

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

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

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

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

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

Требования

Чтобы использовать Контекстный редактор, приложению требуется:

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

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

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

JavaScript Snippet

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

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

Общайтесь с интерфейсом приложений API Phrase Strings.
Предоставьте пользователь интерфейс.
Указать логин.

В настройках проекта указан Идентификатор проекта.

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

Пример:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Не измените это имя для работы конфигурации
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      дата-центр: 'eu', // Задано значение 'us' для центра хранения и обработки данных в США
      префикс: '_{', // Задать префикс для формата ключа в шаблонах вида
      суффикс: '_}}', // Задать суффикс для формата ключа в шаблонах вида
      отключить сочетания клавиш: false, // Установите значение true, чтобы отключить сочетания клавиш
      autoНижний регистр: true, // Значение false, если ключи содержат заглавные буквы
    };
  </script>
  <script type="module" async="" src="https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js"></script>}

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

i18next

Примечание

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

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

Установите библиотеку i18next-phrase-in-context- editor-post-processor с предпочтительным менеджером пакетов:
```
# пряжа
пряжа Добавить i18next-phrase-in-context- editor-post-processor

# npm
npm установите Phrase i18next-in-context- editor-post-processor
```
Примечание

Рекомендуемые версии библиотек 1.4.0 или более поздние.

или загрузите его через CDN:
```
<script src="https://unpkg.com/i18next-phrase-in-context-editor-post-processor"></script>
```

Бутстрап (образец):

импортировать i18next из 'i18next';
импортировать i18nextXHRBackend из 'i18next-xhr-backend';

i18далее
    .use(i18nextXHRBackend)
    .init({
        резервный вариантLng: 'en',
        отладка: правда,
        ns: ['special', ' Common'],
        по умолчаниюNS: 'специальный',
        backend: {
            // загрузить некоторые переводы из репозитория i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // сделать что-то по i18следующая инициализация
    });

Для интеграции библиотеки:

Импортировать PhraseInContextEditorPostProcessor из библиотеки i18next- phrase- in- Context- editor- post- Processor.
Создать процессор пост- редактора Phrase, передав в качестве аргумента PhraseConfig.
Передайте недавно созданный i18next Phrase Post Processor Контекстного редактора в i18next используйте метод.
Добавить строку phraseInContextEditor в свойство массива постобработки (передано внутри объекта конфигурации метода i18next init).

Добавьте фрагмент ICE JavaScript в следующий раз в настройках.

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

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

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

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

Значение I18n

Примечание

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

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

Установите новый пакет вместе с предпочтительным менеджером пакетов:

# пряжа
пряжа Добавить vue-i18n-phrase-in-context- editor

# npm
npm установите vue-i18n-phrase-in-context- editor

или загрузить CDN (зарегистрировать вручную в окне['vue-i18n-phrase-in-context- editor']):

<script src="https://unpkg.com/vue-i18n-phrase-in-context- editor/dist/vue-i18n-phrase-in-context- editor.umd.min.js"></script>

Бутстрап (образец):

импортировать Vue из 'vue';
импортировать VueI18n из 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  языковой стандарт: process.env.VUE_APP_I18N_Языковой стандарт || 'en',
  backLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  сообщений: {
      hello: Здравствуйте, мир!
  }
});

новое значение ({
  i18n,
  отобразить: h => h(Приложение)
}).$mount('#app');

Для интеграции библиотеки:

Импортировать библиотеку Контекстного редактора Voue I18n Phrase.
Создать новый вариант Контекстного редактора I18n Phrase, передав Vue I18n в качестве первого аргумента и Prase Config в качестве второго.

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

Отреагировать (intl)

Примечание

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

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

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

Установите новый пакет через НПМ:

установить react-intl-phraseapp

или построить из оригинала:

npm запустить дистрибутив

установить npm

Конфигурировать:
```
пусть настройка = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseВключено: true,
  префикс: "[__",
  suffix: "__]]",
  fullReparse: true
};
```
В настройках проекта найден Идентификатор проекта.

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

Добавить фрагмент в приложение реакции:

импортировать {initializePhraseAppEditor} из 'react-intl-phraseapp'

пусть настройка = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseВключено: true,
  префикс: "[__",
  suffix: "__]]",
  fullReparse: true
};

инициализироватьPhraseAppEditor(конфигурация);

Найдите весь импорт Форматированного сообщения и измените исходник с react- intl на react- intl- Phraseapp.
```
импортировать {FormattedMessage} из 'react-intl-phraseapp'
```
Проведите испытания блока, используя шут:
```
npm test
```

Образец кода

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

Угловой 2 (ngx-translate)

Необходимые условия

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

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

Установка с НПМ:

установить ngx-translate-phraseapp

Конфигурировать:

импортировать { initializePhraseAppEditor, PhraseConfig } из 'ngx-translate-phraseapp';

позволить настроить: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseВключено: true,
};

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

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

При необходимости настройте атрибут useOldICE, чтобы переключиться на старого ДВС:

пусть настройка = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseВключено: true,
  useOldICE: true,
};

инициализироватьPhraseAppEditor(конфигурация);

При необходимости Добавьте специальные 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",

Парсер документов редактора по умолчанию преобразует все ключи в нижнюю регистровую форму. Если вы столкнулись с проблемами при таком поведении и хотите использовать в редакторе ключи, учитывающие регистр, отключите функцию автоматического написания нижнего регистра:
```
пусть настройка = {
  // ...
  autoНижний регистр: ложь
}
```

Добавьте следующие фрагменты в приложение «Угловой»:

app.component.ts

импортировать { инициализироватьPhraseAppEditor, PhraseAppCompiler, PhraseConfig} из 'ngx-translate-phraseapp'

позволить настроить: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseВключено: true,
};

инициализироватьPhraseAppEditor(конфигурация);

app.module.ts

импортировать { TranslateModule, TranslateLoader, TranslateCompiler } из '@ngx-translate/core';
импортировать { HttpClientModule, HttpClient } из '@angular/common/http';
импортировать { PhraseAppCompiler } из 'ngx-translate-phraseapp'
импортировать { AppComпонент } из './app.component';


экспортировать функцию HttpLoaderFactory(http: HttpClient) {
  возвратить новый TranslateHttpLoader(http);
}

@NgModule({
  объявлений: [
    AppComпонент
  ],
  импорт: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      загрузчик: {
        предоставить: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      компилятор: {
        предоставить: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  поставщики: [],
  бутстрэп: [AppComпонент]
})

Образец кода

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

Ruby on Rails (i18n)

Примечание

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

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

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

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

Добавьте библиотеку phraseapp- in Context- Editor- Ruby в нужную среду, используя один из следующих методов:
- Via Gem
```
драгоценный камень установить phraseapp-в контексте редактор-ruby
```
- через Bundler
  
  Добавить его в Gemfile:
```
gem 'phraseapp-in-context- editor-ruby
```
- Создавайте прямо из оригинала, чтобы получить самые свежие и интересные новости:
```
пакет & gem build
```
Создайте файл инициализации, выполнив генератор Rails:
```
Rails генерирует phraseapp_in_context_editor:install --Учетная запись_Идентификатор=<YOUR_УЧЕТНАЯ ЗАПИСЬ_Идентификатор> --проект-Идентификатор=<YOUR_ПРОЕКТ_Идентификатор>
```
В настройках проекта найден Идентификатор проекта.

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

Образец кода

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

Django

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

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

Примечание

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

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

Установите пакет django- Phrase с помощью pip:
```
$ pip install django-phrase
```
Добавьте Phrase в список установленных приложений:
```
УСТАНОВЛЕННЫЕ_ПРИЛОЖЕНИЯ = (

    ' phrase',

)
```
Добавьте следующие фрагменты шаблона в шаблоны/base_generic.html или эквивалентные файлы:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Используйте тег шаблона Frase_i18n в шаблонах (например, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Добавьте в настройки.py следующую конфигурацию:

    # Настройки Контекстного редактора Phrase
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID" # Установите свою собственную учетную запись
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID" # Установите свой собственный ID проекта
    PHRASE_DATACENTER = "eu" # Выберите свой дата-центр "eu" | "us"
    PHRASE_PREFIX = "_{_{_"
    PHRASE_SUFFIX = "_}}"}}

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

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

В случае возникновения проблем возможна интеграция фрагмента вручную.

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

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

Образец кода

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

Колба

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

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

Примечание

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

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

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

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

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

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

из колбы импортировать колбу, [...]
импортировать Babel из flask_babel
от flask_ phrase импортировать Phrase, gettext, ngettext
app = Flask(__name__)
babel = Babel(приложение)
Phrase = Phrase(приложение)

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

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: «ВАШ ПРОЕКТ-ИДЕНТИФИКАТОР»,
        accountId: «ВАША УЧЕТНАЯ ЗАПИСЬ-ИДЕНТИФИКАТОР»,
        центр обработки данных: "eu",
    };
    (функция() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'модуль';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

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

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

При необходимости установите центр хранения и обработки данных в США, чтобы включить работу с конечными точками США:

window.PHRASEAPP_CONFIG = {
    projectId: «ВАШ ПРОЕКТ-ИДЕНТИФИКАТОР»,
    accountId: «ВАША УЧЕТНАЯ ЗАПИСЬ-ИДЕНТИФИКАТОР»,
    центр обработки данных: «нас»,
};

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

Образец кода

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

Symfony 5.x

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

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

Примечание

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

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

Скопируйте PhraseStringsInContextEditor и его содержимое в папку /src/Услуги хранилища или в нужное место. Если вы помещены в другое место, соответствующим образом настройте пространство имен.
Настройте config/services.yaml, чтобы украсить услугу переводчика адаптером Phrase:
```
услуги:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        украшает: переводчик
```

Добавьте следующий фрагмент JavaScript в базу или шаблон верстки Twig между {% блочными Javascripts%}, чтобы Контекстный редактор мог прочитать веб-страницу:

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        центр обработки данных: 'eu',
        происхождение: 'phrase- symfony',
    };
    (функция() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'модуль';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

Приложение Symfony теперь подключено к Контекстному редактору.

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

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

window.PHRASEAPP_CONFIG = {
    projectId: «ВАШ ПРОЕКТ-ИДЕНТИФИКАТОР»,
    accountId: «ВАША УЧЕТНАЯ ЗАПИСЬ-ИДЕНТИФИКАТОР»,
    центр обработки данных: «нас»,
};

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

Образец кода

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

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

Разоблачение имен ключей

Обычно уровень просмотра рендерит переводы, передавая название переводимой строки (т. е. ключа) какому-либо сортированному методу перевода или помощнику вида.

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

$translations = массив(

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

  "page.link.label" => "Я - ссылка",

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

)

функция translate($keyName) {

  return $translations[$keyName];

}

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

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

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

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

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

{{__phrase_NameOfYourKey__}}

Пример:

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

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

функция translate($keyName) {

  если ($phraseModeEnabled) {

    возврат «»;

  } else {

    return $translations[$keyName];

  }

}

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

Пример:

const t = (ключ: строка) => '{{__phrase_' + key + '__}}'

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

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

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

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

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

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

window.PHRASEAPP_CONFIG = {

  autoНижний регистр: ложь

}

Настроить декораторы ключей

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

{{__phrase_YOUR.KEY__}}

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

window.PHRASEAPP_CONFIG = {

  префикс: '[[__',

  suffix: "__]]"

}

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

[[[__phrase_YOUR.KEY__]]

Если драгоценность Phraseapp-in-Text Editor-ruby используется для обеспечения функциональности Контекстного редактора, убедитесь, что декораторы настроены следующим образом:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

конец

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

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

Эта настройка доступна только при использовании драгоценного камня Phraseapp- в контекстном редакторе- 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

}

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

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

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

импортировать выход из «lodash/escape»;

window.PHRASEAPP_CONFIG = {  

    санировать: побег

}

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

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

window.PHRASEAPP_CONFIG = {

  единый вход в систему (SSO): {

    активировано: true,
    
    поставщик: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  единый вход в систему (SSO): {

    принудительный: истина

  }

}

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

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

Угловой 2 (ngx-translate)

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

Установка с НПМ:

установить ngx-translate-phraseapp

Конфигурировать:

пусть настройка = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseВключено: true,
  префикс: "_{_",
  суффикс: "__}}",
  fullReparse: true
};}

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

Парсер документов редактора по умолчанию преобразует все ключи в нижнюю регистровую форму. Если вы столкнулись с проблемами при таком поведении и хотите использовать в редакторе ключи, учитывающие регистр, отключите функцию автоматического написания нижнего регистра:
```
пусть настройка = {
  // ...
  autoНижний регистр: ложь
}
```

Добавьте следующие фрагменты в приложение «Угловой»:

app.component.ts

импортировать { инициализироватьPhraseAppEditor, PhraseAppCompiler} из 'ngx-translate-phraseapp'

пусть настройка = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseВключено: true,
  префикс: "_{_",
  суффикс: "__}}",
  fullReparse: true
};

инициализироватьPhraseAppEditor(конфигурация);}

app.module.ts

импортировать { TranslateModule, TranslateLoader, TranslateCompiler } из '@ngx-translate/core';
импортировать { HttpClientModule, HttpClient } из '@angular/common/http';
импортировать { PhraseAppCompiler } из 'ngx-translate-phraseapp'

экспортировать функцию HttpLoaderFactory(http: HttpClient) {
  возвратить новый TranslateHttpLoader(http);
}

@NgModule({
  объявлений: [
    AppComпонент
  ],
  импорт: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      загрузчик: {
        предоставить: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      компилятор: {
        предоставить: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  поставщики: [],
  бутстрэп: [AppComпонент]
})

Образец кода

Это демонстрационное приложение демонстрирует интеграцию Контекстного редактора с 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", "ВАШ ПРОЕКТ-Идентификатор");

myApp.value ("phraseEnabled", true);

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

angular-phrase on GitHub

Образец кода

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

Джанго

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

Установите пакет django- Phrase с помощью pip:
```
$ pip install django-phrase
```
Добавьте Phrase в список установленных приложений:
```
УСТАНОВЛЕННЫЕ_ПРИЛОЖЕНИЯ = (

    ' 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.

Отреагировать (intl)

Примечание

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

Установите пакет через НПМ:

установить react-intl-phraseapp

или построить из оригинала:

npm запустить дистрибутив

установить npm

Конфигурировать:

пусть настройка = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseВключено: true,
  префикс: "[__",
  suffix: "__]]",
  fullReparse: true
};

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

Добавить фрагмент в приложение реакции:

импортировать {initializePhraseAppEditor} из 'react-intl-phraseapp'

пусть настройка = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseВключено: true,
  префикс: "[__",
  suffix: "__]]",
  fullReparse: true
};

инициализироватьPhraseAppEditor(конфигурация);

Найдите весь импорт Форматированного сообщения и измените исходник с react- intl на react- intl- Phraseapp.
```
импортировать {FormattedMessage} из 'react-intl-phraseapp'
```
Проведите испытания блока, используя шут:
```
npm test
```

Образец кода

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

Ruby on Rails (i18n)

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

Добавьте драгоценность phraseapp-in-text Editor-ruby в среду, которую вы хотите использовать Контекстный редактор:
```
группа :разработка сделать
  gem 'phraseapp-in-context- editor-ruby'
 конец
```
и установите его, выполнив команду пакета:
```
Установка пакета $
```
Установите драгоценный камень phraseapp- в контекстном редакторе-ruby, запустив генератор Rails:
```
Fundle Exec Rails за $ сгенерируют phraseapp_in_context_editor:install -- получить доступ-токен=ВАШ_ПОЛучить ДОСТУП_ТОКЕН --идентификатор проекта=Идентификатор ВАШЕГО_ПРОЕКТА_
```
-- токен доступа

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

-- project-id

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

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

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

Образец кода

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

Весна

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

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

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

публичное сообщениеИсходник() {

    возвратите новый PhraseAppMessageSource();

}

Укажите необходимый помощник JavaScript в шаблонах, выставив помощника в виде боба:
```
@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}
```
Добавьте тег <script> в шаблоны в теге <head> каждой страницы:
```
<head>

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

</head>
```
Перезапустите приложение и войти указав учетные учетные данные пользователь Phrase

Пример исходного кода приложения на GitHub

Как локализовать весенние приложения, как профессионал

Spring Boot Starter package (представлен ePages)

Symfony 2.x

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

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

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

импорт:

    - { resource: config.yml }

параметры:

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

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

# web/app_translation.php

<?php

request_once ___DIR__.'/../app/bootstrap.php.cache';

требовать_раз ___DIR__.'/../app/AppKernel.php';

use Symfony\Component\HttpFoundation\Request;

$kernel = новое AppKernel («перевод», false);

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

Переопределите стандартный метод перевода по заказу Контекстного редактора с именами ключей:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

пространство имен Acme\YourBundle\Translation;

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

класс PhraseTranslator расширяет BaseTranslator

{

    общедоступная функция trans($id, $parameters массива = массив(), $domain = 'сообщения', $locale = null)

    {

        $префикс = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'маршруты') {

            / Возвращать переведенные значения для отрасли «маршруты»

            возврат strtr($this->каталоги[$locale]-> get(((string) $id, $domain), $параметры);

        } else {

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

            return $prefix.$id.$suffix;

        }

    }

}

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

Симфоническая переводческая документация

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

Symfony 3.x

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

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

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

импорт:

   - { resource: config.yml }
```

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

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

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

$kernel = новое AppKernel («перевод», true);

$kernel->loadClassCache();

$request = Request::createFromGlobals();

$ответ = $kernel->handle(запрос $);

$response->send();

$kernel->terminate(запрос $, ответ $);

Переопределите стандартный метод перевода по заказу Контекстного редактора с именами ключей:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

пространство имен AppBundle\Translation;

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

класс PhraseTranslator расширяет BaseTranslator

{

   общедоступная функция trans($id, $parameters массива = массив(), $domain = 'сообщения', $locale = null)

   {

       $префикс = "";

       if (null === $domain) {

           отрасль $ = «сообщения»;

       }

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

{

   процесс формирования общедоступных функций (контейнер ContainerBuilder $)

   {

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

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

   }

}

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

# src/AppBundle/AppBundle.php

<?php

пространство имен AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

class AppBundle расширяет пакет

{

   сборка общедоступных функций(контейнер ContainerBuilder $)

   {

       родительский элемент::build($container);

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

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

       };

   }

}

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

Симфоническая переводческая документация

Значение I18n

Примечание

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

Установите пакет вместе с предпочтительным менеджером пакетов:

# пряжа
пряжа Добавить vue-i18n-phrase-in-context- editor

# npm
npm установите vue-i18n-phrase-in-context- editor

или загрузить CDN (зарегистрировать вручную в окне['vue-i18n-phrase-in-context- editor']):

<script src="https://unpkg.com/vue-i18n-phrase-in-context- editor/dist/vue-i18n-phrase-in-context- editor.umd.min.js"></script>

Бутстрап (образец):

импортировать Vue из 'vue';
импортировать VueI18n из 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  языковой стандарт: process.env.VUE_APP_I18N_Языковой стандарт || 'en',
  backLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  сообщений: {
      hello: Здравствуйте, мир!
  }
});

новое значение ({
  i18n,
  отобразить: h => h(Приложение)
}).$mount('#app');

Для интеграции библиотеки:

Импортировать библиотеку Контекстного редактора Voue I18n Phrase.
Создать новый вариант Контекстного редактора I18n Phrase, передав Vue I18n в качестве первого аргумента и Prase Config в качестве второго.

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

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

Режим Ajax

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

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

window.PHRASEAPP_CONFIG = {

  ajaxнаблюдатель: false

}

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

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Навязывание языкового стандарта

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

window.PHRASEAPP_CONFIG = {

  forceLocale: «pt-BR»

}

Проигнорированные ключи

Эта настройка доступна только при использовании драгоценного камня Phraseapp- в контекстном редакторе- Ruby.

Ключи могут быть исключены из рендеринга в Контекстном редакторе. При работе с Rails ключи могут игнорироваться для таких данных, как сообщения об ошибках или ключи формата даты и времени. Чтобы исключить автоматическую обработку ключей драгоценным камнем Phraseapp- в контекстном редакторе- Ruby, Добавьте набор ключей в файл инициализации phraseapp_ in_context_ editor.rb. Также можно использовать подстановочные знаки:

PhraseApp::InContextEditor.configure do |config|

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

конец

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