Éditeur en contexte Strings

Le contenu est traduit de l’anglais par Phrase Language AI.

Disponible pour

les forfaits Team, Professional, Business, Enterprise et Software UI/UX

Contactez le service commercial pour toute question relative aux licences.

Disponible pour

Les forfaits Advanced et Enterprise (ancien)

Contactez le service commercial pour toute question relative aux licences.

L'éditeur en contexte est conçu pour aider les traducteurs à travailler plus efficacement et à traduire une page web grâce à une intégration directe avec l'éditeur de traduction Strings.

Actuellement, deux versions sont disponibles :

L'éditeur en contexte :

Inclut de nouvelles fonctionnalités (vue multilingue, options de mise en page, actions par lots, fonctionnalités de collaboration, etc.) et l'interface utilisateur de l'éditeur de traduction.
L'ancien éditeur en contexte.

Après l'installation de l'éditeur en contexte, il peut être personnalisé pour fonctionner avec de nombreuses technologies.

Installation de l'éditeur en contexte Strings

Prérequis

Pour utiliser l'éditeur en contexte, l'application nécessite :

Sites web, applications web, sites mobiles, etc.
Les traducteurs ont accès au serveur web exécutant l'éditeur. Il peut s'agir d'un environnement local si nécessaire.
Une structure de fichier de localisation clé-valeur.

Des sites web avec des chaînes traduisibles extraites et une couche de vue qui utilise une structure clé-valeur pour rendre les traductions.
Noms de clés exposés à la couche de vue ou de modèle.
Extrait JavaScript qui rend l'éditeur.
Idéalement, un environnement dédié aux traductions. Il peut s'agir d'un clone d'un environnement de préproduction et, bien que plus long à configurer initialement, il offre un meilleur flux de travail et plus de stabilité.

Si un environnement dédié n'est pas possible, un environnement de préproduction existant peut être utilisé avec la possibilité d'activer l'éditeur en contexte selon les besoins.

Extrait JavaScript

Incluez l'extrait JavaScript dans la mise en page de l'application.

L'extrait inclut le code requis pour :

Communiquer avec l'API Phrase Strings.
Rendre l'interface utilisateur.
Fournir la connexion.

L'ID de projet se trouve dans les paramètres du projet.

L'ID de compte se trouve dans les paramètres de l'organisation Strings.

Exemple :

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId : IDENTIFIANT DU COMPTE
      projectId : IDENTIFIANT DU PROJET
      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>

Installations de frameworks Web

i18next

Note

Le post-processeur i18next Phrase In-Context Editor prend en charge toutes les versions d'i18next postérieures à 19.5.1. Bien que cette bibliothèque puisse également fonctionner avec des versions antérieures, celles-ci ne sont pas officiellement prises en charge et pourraient ne recevoir aucune mise à jour spécifique ni correction de bug.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez la bibliothèque i18next-phrase-in-context-editor-post-processor avec votre gestionnaire de paquets préféré :
```
# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor
```
Remarque

Les versions de bibliothèque recommandées sont 1.4.0 ou plus récentes.

ou chargez-la via CDN :
```
<script src="https://unpkg.com/i18next-phrase-in-context-editor-post-processor"></script>
```

Bootstrap (exemple) :

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
    });

Pour intégrer la bibliothèque :

Importez PhraseInContextEditorPostProcessor depuis la bibliothèque i18next-phrase-in-context-editor-post-processor.
Créez une nouvelle instance de i18next Phrase In-Context Editor Post Processor en passant PhraseConfig comme argument.
Passez l'instance de i18next Phrase In-Context Editor Post Processor nouvellement créée à la méthode use d'i18next.
Ajoutez la chaîne phraseInContextEditor à la propriété de tableau postProcess (passée dans l'objet de configuration de la méthode init d'i18next).

Ajoutez l'extrait JavaScript ICE à l'instance i18next dans la configuration.

Exemple d'extrait :

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId : '00000000000000004158e0858d2fa45c',
      accountId : '0bed59e5',
    {

Remarque

accountId doit être fourni pour configurer ICE avec succès. L'ID de compte se trouve dans les paramètres de l'organisation Strings.

Si nécessaire, configurez l'attribut useOldICE pour passer à l' ancien ICE :

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId : '00000000000000004158e0858d2fa45c',
      accountId : '0bed59e5',
      useOldICE: true,
    {

Démarrez l'éditeur In-Context.
Ouvrez l'application dans un navigateur web pour afficher l'éditeur In-Context. Connectez-vous avec n'importe quel utilisateur de l'organisation Phrase.

Options de configuration et exemples de méthodes.

Vue I18n

Remarque

L'éditeur In-Context Phrase pour Vue I18n prend en charge toutes les versions de Vue I18n 8.17.5 et ultérieures. Cette bibliothèque peut fonctionner avec des versions antérieures, mais elles ne sont pas officiellement prises en charge et ne recevront aucune mise à jour spécifique ni correction de bug.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez le paquet le plus récent avec le gestionnaire de paquets de votre choix :

# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor

ou chargez avec un CDN (enregistrez manuellement 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 (exemple) :

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

Pour intégrer la bibliothèque :

Importez la bibliothèque Vue I18n Phrase In-Context Editor.
Créez une nouvelle instance de Vue I18n Phrase In-Context Editor, en passant l'instance Vue I18n comme premier argument et Phrase Config comme second.

Options de configuration et exemples de méthodes.

React (intl)

Remarque

Cette bibliothèque pourrait ne pas fonctionner avec IE11 ou des navigateurs plus anciens. Ajoutez Babel au pipeline de construction si la prise en charge de navigateurs plus anciens est requise :

Cette bibliothèque hérite des composants communs des paquets react-intl. Si Phrase est activé en appelant initializePhraseAppEditor, le comportement des composants changera.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez le paquet le plus récent via NPM :
```
npm install react-intl-phraseapp
```
ou compilez à partir de la source :
```
npm run dist
```
```
npm install
```

Configurer

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
{

L'ID de projet d'un projet se trouve dans les paramètres du projet.

L'ID de compte se trouve dans les paramètres de l'organisation Strings.

Ajoutez l'extrait à l'application 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);

Trouvez toutes les importations de FormattedMessage, et changez la source de react-intl à react-intl-phraseapp :
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Exécutez les tests unitaires en utilisant jest :
```
npm test
```

Exemple de code

Cette démo montre une intégration de l'éditeur In-Context de Phrase avec react-intl.

Angular 2 (ngx-translate)

Prérequis

Inscrivez-vous pour un compte Phrase Strings.
Utilisez le module ngx-translate pour la localisation dans les applications Angular 2.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installer avec NPM :
```
npm install ngx-translate-phraseapp
```

Configurer

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

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

L'ID de projet d'un projet se trouve dans les paramètres du projet.

L'ID de compte se trouve dans les paramètres de l'organisation Strings.

Si nécessaire, configurez l'attribut useOldICE pour passer à l' ancien ICE :

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  useOldICE: true,
{

initializePhraseAppEditor(config);

Si nécessaire, ajoutez les URL spécifiques aux États-Unis pour permettre le travail via le centre de données :

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",

Par défaut, l'analyseur de document de l'éditeur convertit toutes les clés en minuscules. Si vous rencontrez des problèmes avec ce comportement et souhaitez utiliser des clés sensibles à la casse dans l'éditeur, désactivez la fonctionnalité de mise en minuscules automatique :
```
let config = {
  {
  autoLowercase: false
}
```

Ajoutez ces extraits à l'application 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: {
        Renseignez les informations suivantes : TranslateLoader,
        useFactory : HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Renseignez les informations suivantes : TranslateCompiler,
        useClass : PhraseAppCompiler
      }
    {
  {
  providers: [],
  bootstrap: [AppComponent]
{

Exemple de code

Cette application de démonstration présente une intégration de l'éditeur In-Context avec Angular et ngx-translate.

Ruby on Rails (i18n)

Remarque

Cette bibliothèque pourrait ne pas fonctionner telle quelle sur les navigateurs plus anciens ou Microsoft IE11. Ajoutez Babel au pipeline de build si ces navigateurs doivent être pris en charge.

Prérequis

Inscrivez-vous pour un compte Phrase Strings.
Utilisez l'excellente gem i18n également utilisée par Rails.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Ajoutez la bibliothèque phraseapp-in-context-editor-ruby à l'environnement souhaité en utilisant l'une des méthodes suivantes :
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Via Bundler
  
  Ajoutez-la au Gemfile :
```
gem 'phraseapp-in-context-editor-ruby
```
- Compilez directement à partir de la source pour obtenir la toute dernière version :
```
bundle && gem build
```
Créez le fichier d'initialisation en exécutant le générateur Rails :
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
L'ID de projet d'un projet se trouve dans les paramètres du projet.

L'ID de compte se trouve dans les paramètres de l'organisation Strings.
Ajoutez l'extrait Ruby à la mise en page de l'application app/views//layouts/application.html.erb :
```
<%= load_in_context_editor %>
```

Ajoutez la configuration suivante à l'initialiseur /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"

Si nécessaire, définissez le centre de données américain pour permettre de travailler avec les points de terminaison américains :

  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "us"

Ouvrez l'application dans n'importe quel navigateur web pour voir l'éditeur In-Context appliqué à l'application. Connectez-vous avec n'importe quel utilisateur de l'organisation Phrase.

Exemple de code

Cette démo montre une intégration de l'éditeur Phrase In-Context avec react-i18next.

Django

Prérequis

Inscrivez-vous pour un compte Phrase Strings.
Utilisez le framework Django pour Python.

Remarque

L'ancienne version de l'ICE n'est pas disponible depuis la version 2.0.0.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez le package django-phrase avec pip :
```
$ pip install django-phrase
```
Ajoutez Phrase à la liste des applications installées :
```
INSTALLED_APPS = (

    'phrase',

{
```
Ajoutez les extraits de modèle suivants au fichier de mise en page templates/base_generic.html ou équivalent :
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Utilisez la balise de modèle phrase_i18n dans les modèles (par exemple, demo/ice_demo/templates/index.html) :
```
{% load phrase_i18n %}
```

Ajoutez la configuration suivante à 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 = "__}}"

L'ID de projet d'un projet se trouve dans les paramètres du projet.

L'ID de compte se trouve dans les paramètres de l'organisation Strings.

En cas de problème, il est possible d'intégrer manuellement le JavaScript snippet.

Ouvrez l'application dans n'importe quel navigateur web pour voir l'éditeur In-Context appliqué à l'application. Connectez-vous avec n'importe quel utilisateur de l'organisation Phrase.

Code de l'adaptateur Django sur GitHub

Exemple de code

Cette application demo démontre comment intégrer l'éditeur In-Context avec une application Django.

Flask

Prérequis

Inscrivez-vous pour un compte Phrase Strings.
Utilisez le framework Flask pour Python.

Remarque

L'ancienne version de l'ICE n'est pas disponible depuis la version 2.0.0.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez le paquet Flask-Phrase avec pip :
```
pip install Flask-Phrase
```

Ajoutez la configuration suivante à l'application Flask (app.config ou config.py) :

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

Le code de l'application devrait ressembler à ceci :

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)

Ajoutez le JavaScript snippet de Phrase au fichier de mise en page de base avec la balise suivante (il doit être placé dans la section du fichier de modèle) :

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

L'ID de projet d'un projet se trouve dans les paramètres du projet.

L'ID de compte se trouve dans les paramètres de l'organisation Strings.

Si nécessaire, définissez le centre de données américain pour permettre de travailler avec les points de terminaison américains :

window.PHRASEAPP_CONFIG = {
    projectId : « YOUR-PROJECT-ID »,
    accountId : « YOUR-ACCOUNT-ID »,
    datacenter: "us",
{

Lorsque PHRASEAPP_ENABLED = True, le paquet modifie les valeurs renvoyées par les fonctions de traduction pour présenter un format que l'ICE peut lire. Lorsqu'il est défini sur False, il reviendra aux fonctions gettext standard de Flask-Babel's.

Exemple de code

Cette application démo démontre comment intégrer l'éditeur In-Context avec une application Flask.

Symfony 5.x

Prérequis

Inscrivez-vous pour un compte Phrase Strings.
Utilisez le framework Symfony pour PHP.

Remarque

La version 2.0.0 prend en charge Symfony 5 et les versions ultérieures. Si vous utilisez Symfony 2, 3 ou 4, consultez old version de l'ICE.

Pour intégrer l'éditeur In-Context à l'application Symfony, suivez ces étapes :

Copiez PhraseStringsInContextEditor et son contenu dans le dossier /src/Service du dépôt ou à l'emplacement souhaité. S'il est placé ailleurs, ajustez l'espace de noms en conséquence.

Ajustez config/services.yaml pour décorer le service translator avec l'adaptateur de Phrase :

services:
    {
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator

Ajoutez l'extrait JavaScript suivant au modèle de base ou de mise en page Twig entre le {% block javascripts %} afin que l'éditeur In-Context puisse lire la page Web :

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

L'application Symfony est maintenant connectée à l'éditeur In-Context.

L'ID de projet d'un projet se trouve dans les paramètres du projet.

L'ID de compte se trouve dans les paramètres de l'organisation Strings.

Si nécessaire, définissez le centre de données américain pour permettre de travailler avec les points de terminaison américains :

window.PHRASEAPP_CONFIG = {
    projectId : « YOUR-PROJECT-ID »,
    accountId : « YOUR-ACCOUNT-ID »,
    datacenter: "us",
{

Rechargez l'application et connectez-vous avec les identifiants Phrase pour démarrer le processus de traduction directement sur la page Web.

Exemple de code

Cette application démo montre comment intégrer l'éditeur In-Context à une application Symfony.

Mise en place de l'éditeur In-Context

Affichage des noms de clés

En règle générale, une couche de vue affiche les traductions en transmettant le nom d'une chaîne traduisible (c'est-à-dire la clé) à une sorte de méthode de traduction ou d'assistant de vue.

Exemple de code 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];

}

Le modèle afficherait alors le résultat de la méthode translate() au lieu de la chaîne traduite réelle :

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

Formatage

Il doit être indiqué dans le modèle pour quelles clés afficher les traductions.

Utilisez ce formatage pour exposer les noms de clés au lieu des traductions :

{{__phrase_NameOfYourKey__}}

Exemple :

Si la clé page.headline se trouve dans le modèle, affichez la chaîne {{__phrase_page.headline__}}.

Modifiez la méthode d'assistance translate() afin d'exposer les noms de clés dans le format requis :

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Selon le framework, les assistants de traduction dans le code peuvent être remplacés ou une version encapsulée peut être créée pour être utilisée dans les modèles.

Exemple :

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

Échappement des noms de clés et des caractères spéciaux

Assurez-vous que les noms de clés sont convertis dans un format reconnaissable.

Les caractères de la liste suivante doivent être échappés lorsqu'ils sont exposés à l'éditeur In-Context :

Caractère	Séquence d'échappement	Exemple :
{	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} devient {{__phrase__key[[[[[[html_open]]]]]]__}}
{	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} devient {{__phrase__[[[[[[html_close]]]]]]key__}}

Conversion automatique de la casse

Par défaut, l'analyseur de documents de l'éditeur In-Context convertit toutes les clés en minuscules. Si vous rencontrez des problèmes avec ce comportement et souhaitez utiliser des clés sensibles à la casse dans l'éditeur In-Context, désactivez la fonction de conversion automatique en minuscules :

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personnaliser les décorateurs de clés

Lors de l'utilisation de l'éditeur In-Context, les noms de clés sont généralement entourés de décorateurs (des accolades, par défaut) pour générer des clés d'identification uniques dans le contexte d'un document :

{{__phrase_YOUR.KEY__}}

Si cela provoque des conflits avec d'autres bibliothèques (par exemple, des moteurs de modèles côté client, notamment AngularJS et Ember.js) qui utilisent une syntaxe similaire, modifiez le préfixe et le suffixe des décorateurs de l'éditeur In-Context dans la configuration. Pour indiquer à l'éditeur In-Context quels décorateurs l'analyseur doit rechercher, ajoutez les valeurs de configuration suivantes avant l'extrait JavaScript :

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Ceci indique à l'éditeur de rechercher les balises commençant par [[__ et se terminant par __]] :

[[__phrase_YOUR.KEY__]]

Si vous utilisez la gem phraseapp-in-context-editor-ruby pour fournir la fonctionnalité d'éditeur In-Context, assurez-vous que les décorateurs sont configurés :

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Si vous n'utilisez pas la gem, assurez-vous que le modèle d'exposition du nom de clé est ajusté dans le code personnalisé.

Activation et désactivation de l'éditeur In-Context

Ce paramètre n'est disponible que lors de l'utilisation de la gem phraseapp-in-context-editor-ruby.

L'éditeur In-Context est désactivé par défaut.

L'éditeur In-Context peut être explicitement activé ou désactivé. Cela affecte l'inclusion du snippet JavaScript (lors de l'utilisation du helper de vue) et le rendu des noms de clés décorés dans les vues :

PhraseApp::InContextEditor.enabled = true|false

Exemple de liaison de l'indicateur à une variable d'environnement :

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

Réanalyse complète

Activez fullReparse si vous utilisez l'éditeur In-Context avec un framework JavaScript utilisant un DOM virtuel tel que React. Cela permet une réanalyse correcte lorsque des modifications du DOM sont détectées :

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Masquage d'éléments de l'éditeur In-Context

Les classes listées dans l'option hidingClasses sont traitées comme masquées et exclues par le scanner de l'éditeur In-Context. Pour rendre les éléments dotés d'une classe donnée analysables, supprimez ce nom de classe du tableau hidingClasses plutôt que de l'ajouter. L'ajout d'un nom de classe au tableau exclut les éléments correspondants et masque le bouton d'édition ; la suppression d'un nom de classe du tableau inclut les éléments correspondants et affiche le bouton d'édition.

L'option hidingClasses effectue une vérification statique de la présence de la classe sur un élément et ses ancêtres. Elle n'évalue pas la visibilité calculée ou réactive. Un élément qui utilise une classe utilitaire réactive correspondant à une entrée dans hidingClasses (par exemple, une classe nommée « hidden » combinée à une classe de visibilité spécifique au point de rupture) est exclu de l'analyse, qu'il soit réellement visible ou non dans la fenêtre d'affichage actuelle. Évitez d'utiliser les noms de classe listés dans hidingClasses uniquement pour le style réactif sur les éléments qui doivent être analysés.

Assainir la sortie vers la page Web

L'éditeur In-Context peut être configuré pour échapper ou modifier les traductions avant qu'elles ne soient insérées dans la page Web en fournissant une fonction à la propriété sanitize.

La fonction accepte la chaîne de traduction comme premier argument et doit renvoyer une chaîne :

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Authentification unique

Si vous utilisez l'authentification unique et souhaitez initialiser l'éditeur In-Context avec le SSO activé, ajoutez la valeur de configuration suivante avant l'extrait JavaScript :

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Pour exiger que les utilisateurs se connectent via SSO, définissez le paramètre enforced :

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Pagination des clés et état de la traduction

Pour les pages comportant un grand nombre de clés traduisibles, l'éditeur In-Context charge les clés par pages de 100. Seules les clés de la première page voient leurs marqueurs d'édition activés au chargement. Les clés restantes apparaissent comme non traduites jusqu'à ce que la page soit davantage défilée ou qu'une clé soit recherchée directement, car une recherche directe contourne la pagination. Il n'existe aucune option de configuration pour augmenter la taille de la page, car la pagination s'effectue côté serveur plutôt que via la bibliothèque client.

Pour vérifier l'état de la traduction de toutes les clés sans avoir à faire défiler la page, cliquez sur l'icône de recherche dans l'éditeur In-Context pour ouvrir la liste des clés. La liste des clés affiche le nombre total de clés déjà intégrées par rapport aux clés manquantes dans le projet, et peut être basculée pour afficher toutes les clés du projet plutôt que seulement les clés détectées sur la page actuelle. Alternativement, vérifiez l'exhaustivité de la traduction pour le travail concerné directement dans l'éditeur de traduction Strings, qui ne présente pas cette limite de rendu par page.

Ancien éditeur In-Context : Configuration

Installations de frameworks Web

Angular 2 (ngx-translate)

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installer avec NPM :
```
npm install ngx-translate-phraseapp
```

Configurer

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

L'ID de projet d'un projet se trouve dans les paramètres du projet.

Par défaut, l'analyseur de document de l'éditeur convertit toutes les clés en minuscules. Si vous rencontrez des problèmes avec ce comportement et souhaitez utiliser des clés sensibles à la casse dans l'éditeur, désactivez la fonctionnalité de mise en minuscules automatique :
```
let config = {
  {
  autoLowercase: false
}
```

Ajoutez ces extraits à l'application 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: {
        Renseignez les informations suivantes : TranslateLoader,
        useFactory : HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Renseignez les informations suivantes : TranslateCompiler,
        useClass : PhraseAppCompiler
      }
    {
  {
  providers: [],
  bootstrap: [AppComponent]
{

Exemple de code

Cette application de démonstration présente une intégration de l'éditeur In-Context avec Angular et ngx-translate.

AngularJS (angular-translate)

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez angular-phrase via Bower (ou téléchargez manuellement) :
```
$ bower install angular-phrase
```
Ajoutez le module angular-phrase à une application AngularJS existante après avoir chargé le module angular-translate :
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Configurez le module :
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
L'ID de projet d'un projet se trouve dans les paramètres du projet. Ceci crée un fichier d'initialisation avec quelques options de configuration.
Ajoutez la directive phrase-javascript à l'application à l'intérieur de la balise <head> :
```
<phrase-javascript></phrase-javascript>
```
Ouvrez l'application dans n'importe quel navigateur web pour voir l'éditeur In-Context appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.

angular-phrase sur GitHub

Exemple de code

Cette démo d'application pour angular-phrase montre comment localiser AngularJS avec angular-translate.

Django

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez le paquet django-phrase avec pip :
```
$ pip install django-phrase
```
Ajoutez Phrase à la liste des applications installées :
```
INSTALLED_APPS = (

    'phrase',

{
```
Utilisez la balise de modèle phrase_i18n dans les modèles :
```
{% load phrase_i18n %}
```
Pour permettre à django-phrase de remplacer les méthodes de traduction, chargez phrase_i18n après i18n.
Ajoutez l'extrait JavaScript à la mise en page :
```
{% phrase_javascript %}
```

Configurez l'éditeur In-Context pour le projet avec ces options :

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

Ouvrez l'application dans n'importe quel navigateur web pour voir l'éditeur In-Context appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.

Code de l'adaptateur Django sur GitHub

Exemple de code

Cette démo d'application montre comment intégrer l'éditeur In-Context à une application Django.

React (intl)

Remarque

Cette bibliothèque peut ne pas fonctionner avec IE11 ou des navigateurs plus anciens. Ajoutez Babel au pipeline de build si la prise en charge des navigateurs plus anciens est requise.

Cette bibliothèque hérite des composants communs des paquets react-intl. Si Phrase est activé en appelant initializePhraseAppEditor, le comportement des composants changera.

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez le paquet via NPM :
```
npm install react-intl-phraseapp
```
ou compilez à partir de la source :
```
npm run dist
```
```
npm install
```

Configurer

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

L'ID de projet d'un projet se trouve dans les paramètres du projet.

Ajoutez l'extrait à l'application react :

import {initializePhraseAppEditor} from 'react-intl-phraseapp'

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

initializePhraseAppEditor(config);

Recherchez toutes les importations de FormattedMessage, et remplacez la source react-intl par react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Exécutez les tests unitaires en utilisant jest :
```
npm test
```

Exemple de code

Cette démo montre une intégration de l'éditeur In-Context de Phrase avec react-intl.

Ruby on Rails (i18n)

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Ajoutez la gem phraseapp-in-context-editor-ruby à l'environnement avec lequel vous souhaitez utiliser l'éditeur In-Context :
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
et installez-la en exécutant la commande bundle :
```
$ bundle install
```
Installez la gem phraseapp-in-context-editor-ruby en exécutant le générateur Rails :
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
Authentifiant d’accès

Créez et gérez des jetons d'accès dans les paramètres de profil ou via l'API d'autorisations.

identifiant du projet

L'ID de projet d'un projet se trouve dans les paramètres du projet. Ceci crée un fichier d'initialisation avec quelques options de configuration.
Ajoutez l'extrait JavaScript à la mise en page de votre application dans la balise <head> en utilisant le helper phraseapp_in_context_editor_js :
```
<head>
  {
  <%= phraseapp_in_context_editor_js %>
  {
</head>
```
Ouvrez l'application dans n'importe quel navigateur web pour voir l'éditeur In-Context appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.
Désactivez Turbolinks (si utilisé)

Turbolinks supprime tous les éléments de l'interface utilisateur de l'éditeur In-Context de la page à chaque récupération de page.

Ajoutez l'attribut data-no-turbolink à la balise <body> :
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Exemple de code

Cette démo montre une intégration de l'éditeur In-Context de Phrase avec react-i18next.

PRINTEMPS 2025

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Assurez-vous que le package com.phraseapp.incontexteditor est disponible dans l'application.
Définissez l'ID de projet correct et ajustez les autres paramètres dans PhraseAppConfiguration.class.

Pour rendre toutes les traductions via Phrase, ajoutez le bean à l'application :

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Fournissez le helper JavaScript requis dans les modèles en l'exposant sous forme de bean :

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Ajoutez la balise <script> à vos modèles dans la balise <head> de chaque page :

<head>

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

</head>

Redémarrez l'application et connectez-vous avec les identifiants utilisateur Phrase.

Code source de l'application exemple sur GitHub

Comment localiser des applications Spring comme un pro

Package de démarrage Spring Boot (fourni par ePages)

Symfony 2.x

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Créez un nouvel environnement dans lequel l'éditeur In-Context s'exécutera. Dans l'exemple, le nouvel environnement est nommé translation.

Créez un nouveau fichier de configuration :
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

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

Créez un contrôleur pour rendre l'environnement accessible via le navigateur :

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

Surchargez la méthode de traduction standard afin d'exposer les noms des clés à l'éditeur In-Context :

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Ajoutez l'extrait JavaScript à la mise en page :

# Acme/YourBundle/Resources/views/layout.html.twig

Ouvrez l'application dans n'importe quel navigateur web pour voir l'éditeur In-Context appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.

Documentation de traduction Symfony

Code de l'adaptateur Symfony 2.x sur GitHub

Symfony 3.x

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Créez un nouvel environnement dans lequel l'éditeur In-Context s'exécutera. Dans l'exemple, le nouvel environnement est nommé translation.

Créez un nouveau fichier de configuration :
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

Créez un contrôleur pour rendre l'environnement accessible via le navigateur :

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

Surchargez la méthode de traduction standard afin d'exposer les noms des clés à l'éditeur In-Context :

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

Assurez-vous que la classe est toujours surchargée lorsque le bundle est utilisé avec un compiler pass :

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

<?php

namespace AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

use Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   public function process(ContainerBuilder $container)

   {

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

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

   }

}

Si vous utilisez des compiler passes séparés, enregistrez-les dans la méthode build() de la classe du bundle :

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

       {

   }

}

Ajoutez l'extrait JavaScript à la mise en page :

# src/YourBundle/Resources/views/layout.html.twig

Ouvrez l'application dans n'importe quel navigateur web pour voir l'éditeur In-Context appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.

Documentation de traduction Symfony

Vue I18n

Remarque

Pour installer l'éditeur In-Context dans cet environnement, suivez ces étapes :

Installez le paquet avec votre gestionnaire de paquets préféré :

# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor

ou chargez avec un CDN (enregistrez manuellement 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 (exemple) :

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

Pour intégrer la bibliothèque :

Importez la bibliothèque Vue I18n Phrase In-Context Editor.
Créez une nouvelle instance de Vue I18n Phrase In-Context Editor, en passant l'instance Vue I18n comme premier argument et Phrase Config comme second.

Options de configuration et méthodes d'exemple.

Utilisation de l'ancien éditeur In-context

Mode Ajax

L'éditeur In-Context prend en charge Ajax et la manipulation du DOM (c'est-à-dire via JavaScript) à l'aide d'observateurs de mutation.

Le mode Ajax peut causer des problèmes dans certains cas et peut entraîner de graves problèmes de performance lors de l'utilisation de l'éditeur In-Context. Pour désactiver le mode Ajax, ajoutez la valeur de configuration suivante avant l'extrait JavaScript :

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Mode débogage

Pour activer le mode de débogage, ajoutez la valeur de configuration suivante avant l'extrait JavaScript :

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forcer une locale

Pour définir explicitement une locale spécifique lors du démarrage de l'éditeur In-Context, utilisez le paramètre forceLocale. Ceci est également utile pour pré-sélectionner la locale actuellement affichée dans votre application web dans l'éditeur In-Context :

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Clés ignorées

Ce paramètre n'est disponible que lors de l'utilisation de la gem phraseapp-in-context-editor-ruby.

Les clés peuvent être exclues du rendu avec l'éditeur In-Context. Lorsque vous travaillez avec Rails, les clés peuvent être ignorées pour des données telles que les messages d'erreur ou les clés de format de date et d'heure. Pour exclure des clés du traitement automatique par la gem phraseapp-in-context-editor-ruby, ajoutez un tableau de ces clés au fichier d'initialisation phraseapp_in_context_editor.rb. Des caractères génériques peuvent également être utilisés :

PhraseApp::InContextEditor.configure do |config|

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

end

Les clés correspondant à l'un de ces modèles ne seront pas rendues accessibles à l'éditeur In-Context et seront affichées normalement.