Éditeur In-Context (Strings)

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

Disponible pour

Plans 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 In-Context 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 In-Context:

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

Après avoir installé l'éditeur In-Context, il peut être personnalisé pour fonctionner avec de nombreuses technologies.

Installation de l'éditeur In-Context Strings

Configuration requise

Pour utiliser l'éditeur In-Context, 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.

Sites Web avec des chaînes traduisibles extraites et une couche de vue qui utilise une structure clé-valeur pour afficher les traductions.
Noms de clé exposés à la couche de vue ou de modèle.
Extrait JavaScript qui rend l'éditeur.
Idéalement, un environnement dédié aux traductions. Cela peut être un clone d'un environnement de préproduction et, bien que cela demande plus de travail pour sa configuration initiale, il offre un meilleur flux de travail et une plus grande stabilité.

Si un environnement dédié n'est pas possible, un environnement de préproduction existant peut être utilisé avec l'option d'activer l'éditeur In-Context 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'Identifiant du projet se trouve dans les paramètres du projet.

L'Identifiant du 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: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Set to 'us' for US data center
      prefix: '{{__', // Set to the prefix for the key format in the view templates
      suffix: '__}}', // Set to the suffix for the key format in the view templates
      disableShortcuts: false, // Set to true to disable keyboard shortcuts
      autoLowercase: true, // Set to false if keys contain capital letters
    };
  </script>
  <script type=\"module\" async=\"\" src=\"https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js\"></script>

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 précédentes, elles 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-le 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 :

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

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

Snippet d'exemple :

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

Remarque

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

Si nécessaire, configurez l'attribut useOldICE pour passer à l'ancien In-context Editor :

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

Démarrer l'éditeur In-Context.
Ouvrez l'application dans un navigateur web pour afficher l'éditeur In-Context. Se connecter avec n'importe quel utilisateur d'organisation Phrase.

Options de configuration et exemples de méthodes.

Vue I18n

Remarque

L'éditeur In-Context de Phrase pour Vue I18n prend en charge toutes les versions de Vue I18n à partir de 8.17.5 et ultérieures. Cette bibliothèque peut fonctionner avec des versions précédentes, 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 package le plus récent 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 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 peut ne pas fonctionner avec IE11 ou des navigateurs plus anciens. Ajoutez Babel au pipeline de build si la prise en charge de navigateurs plus anciens est requise.

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

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

Installez le package le plus récent via NPM :
```
npm install react-intl-phraseapp
```
ou compilez à partir du code source :
```
npm run dist
```
```
npm install
```
Configurer :
```
let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};
```
L’identifiant de projet d’un projet se trouve dans les paramètres du projet.

L’identifiant de compte se trouve dans les paramètres de l’organisation Strings.

Ajoutez le code d’intégration à 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 instructions d’importation de FormattedMessage, et modifiez la source de react-intl vers react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Exécutez les tests unitaires avec Jest :
```
npm test
```

Exemple de code

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

Angular 2 (ngx-translate)

Prérequis

Inscrivez-vous à 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'identifiant du projet est disponible dans les paramètres du projet.

L'identifiant du compte est disponible dans les paramètres de l'organisation Strings.

Si nécessaire, configurez l'attribut useOldICE pour passer à l'ancien éditeur 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 activer le travail via le centre de données américain :

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 documents de l’éditeur convertit toutes les clés en minuscules. En cas de problème avec ce comportement et si vous souhaitez utiliser des clés sensibles à la casse dans l’éditeur, désactivez la fonctionnalité de conversion automatique en minuscules :
```
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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: 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 par défaut avec les navigateurs plus anciens ou Microsoft IE11. Ajouter Babel au pipeline de build si ces navigateurs doivent être pris en charge.

Prérequis

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

Pour installer l'In-context Editor 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
```
- Construisez directement à partir du code source pour obtenir la version la plus récente :
```
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'identifiant du projet se trouve dans les paramètres du projet.

L'identifiant du 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 afin de permettre le travail 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émonstration montre une intégration de l'éditeur In-Context de Phrase avec react-i18next.

Django

Prérequis

Inscrivez-vous à 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'Identifiant de projet d'un projet se trouve dans les paramètres du projet.

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

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

Ouvrez l'application dans n'importe quel navigateur web pour voir l'In-context Editor 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 de démo montre comment intégrer l’éditeur In-Context à une application Django.

Flask

Prérequis

Inscrivez-vous à 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 package 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 doit ressembler à ce qui suit :

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 la Phrase JavaScript snippet au fichier de mise en page de base avec la balise suivante (elle doit être placée dans la section du fichier 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'Identifiant de projet d'un projet se trouve dans les paramètres du projet.

L'Identifiant 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 pouvoir 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 package modifie les valeurs renvoyées par les fonctions de traduction pour présenter un format que l'éditeur In-Context peut lire. Lorsqu'il est défini sur False, il reviendra aux fonctions gettext standard de Flask-Babel.

Exemple de code

Cette application de démonstration démo illustre comment intégrer l’éditeur In-Context dans une application Flask.

Symfony 5.x

Prérequis

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

Remarque

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

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

Copiez PhraseStringsInContextEditor et son contenu dans le dossier /src/Service du référentiel 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'identifiant de projet d'un projet se trouve dans les paramètres du projet.

L'identifiant 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 informations d’identification Phrase pour démarrer le processus de traduction directement sur la page Web.

Exemple de code

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

Configuration de l'éditeur In-Context

Exposer les noms de clé

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 la sortie 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.

Utiliser ce format pour exposer les noms de clé au lieu des traductions :

{{__phrase_NameOfYourKey__}}

Exemple :

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

Modifier la méthode d'assistance translate() afin d'exposer les noms de clé 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é et des caractères spéciaux

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

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

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 document de l'In-Context Editor 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'In-Context Editor, désactivez la fonctionnalité de conversion automatique en minuscules :

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personnaliser les décorateurs de clé

Lors de l'utilisation de l'In-Context Editor, les noms de clé 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, y compris AngularJS et Ember.js) qui utilisent une syntaxe similaire, modifiez le préfixe et le suffixe de décorateur de l'In-Context Editor dans la configuration. Pour indiquer à l'In-Context Editor quels décorateurs l'analyseur doit rechercher, ajoutez les valeurs de configuration suivantes avant l'extrait JavaScript :

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Cela indique à l'éditeur de rechercher des 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é de l'In-Context Editor, 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'In-Context Editor

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

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

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

PhraseApp::InContextEditor.enabled = true|false

Exemple d'association de ce paramètre à une variable d'environnement :

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

Réanalyse complète

Activer fullReparse si vous utilisez l'In-Context Editor avec un framework JavaScript qui utilise le DOM virtuel tel que React. Cela permet une réanalyse correcte lorsque des changements DOM sont détectés :

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Masquer des éléments de l'In-Context Editor

Les classes listées dans l'option hidingClasses sont traitées comme masquées et exclues par le scanner de l'In-Context Editor. Pour rendre les éléments avec une classe donnée analysables, retirer ce nom de classe du tableau hidingClasses plutôt que de l'ajouter. Ajouter un nom de classe au tableau exclut les éléments correspondants et masque le bouton modifier ; retirer un nom de classe du tableau inclut les éléments correspondants et affiche le bouton modifier.

L'option hidingClasses effectue une vérification statique de la présence de 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 avec 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 appliquer un style réactif aux éléments devant être analysés.

Assainir la sortie affichée sur 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 de caractères :

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Authentification unique

Si vous utilisez l'authentification unique et souhaitez initialiser l'In-Context Editor 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

  }

}

Ancien In-Context Editor : 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'identifiant de projet d'un projet se trouve dans les paramètres du projet.

Par défaut, l'analyseur de document de l'In-Context Editor 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'In-Context Editor, 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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Exemple de code

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

AngularJS (angular-translate)

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

Installez angular-phrase via Bower (ou téléchargement manuel) :
```
$ bower install angular-phrase
```
Ajoutez le module angular-phrase à l'application AngularJS existante après le chargement du 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'Identifiant de projet d'un projet se trouve dans les paramètres du projet. Ceci crée un fichier d'initialisation avec certaines 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 demo 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 demo application démontre comment intégrer l'éditeur In-Context avec 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 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 sera modifié.

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

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

Configurer :

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

L’identifiant du 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 modifiez la source de react-intl vers react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Exécutez les tests unitaires en utilisant jest :
```
npm test
```

Exemple de code

Cette demo 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
```
--access-token

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

--project-id

L’identifiant du projet se trouve dans les paramètres du projet. Ceci crée un fichier d'initialisation avec certaines options de configuration.
Ajoutez l’extrait JavaScript à la mise en page de votre application dans la balise <head> en utilisant l’assistant 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 demo montre une intégration de l’éditeur In-Context de Phrase avec react-i18next.

Spring

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 le bon identifiant du projet 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 l’assistant JavaScript requis dans les modèles en exposant l’assistant en tant que 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 informations d’identification utilisateur Phrase.

Exemple de code source de l'application sur GitHub

Comment localiser des applications Spring comme un professionnel

Package starter 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 par 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();

Remplacez la méthode de traduction standard afin d'exposer les noms de clé à 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'In-Context editor appliqué à l'application. Connectez-vous avec n'importe quel utilisateur de l'organisation Phrase.

Documentation de traduction Symfony

Code de l'adaptateur Symfony 2.x sur GitHub

Symfony 3.x

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

Créez un nouvel environnement dans lequel l'In-Context editor 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éer un contrôleur pour rendre l'environnement accessible par 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);

Remplacer la méthode de traduction standard afin d'exposer les noms de clé à l'In-context Editor :

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

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é. Connectez-vous avec n'importe quel utilisateur de l'organisation Phrase.

Documentation de traduction Symfony

Vue I18n

Remarque

L'In-context Editor de Phrase pour Vue I18n prend en charge toutes les versions de Vue I18n 8.17.5 et ultérieures. Cette bibliothèque peut travailler avec des versions précédentes, 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 avec le 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 charger avec CDN (enregistrer 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');

Veuillez intégrer la bibliothèque :

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

Options de configuration et exemples de méthodes.

Utilisation de l'ancien In-Context Editor

Mode Ajax

L'In-Context Editor prend en charge Ajax et la manipulation du DOM (c'est-à-dire via JavaScript) en utilisant des 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'In-Context Editor. 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 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'In-Context Editor, utilisez le paramètre forceLocale. Ceci est utile pour présélectionner la locale actuellement affichée dans votre application web dans l'In-Context Editor également :

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'In-Context Editor. 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 de la gestion automatique par la gem phraseapp-in-context-editor-ruby, ajoutez un tableau des 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'In-Context Editor et seront rendues normalement.