Éditeur In-Context (Strings)

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

Disponible pour

Plans Équipe, Professionnel, Business, Enterprise et UI/UX Logiciel

Contactez le service commercial pour toute question relative aux licences.

Disponible pour

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

Comprend 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 l'installation de l'éditeur In-Context, il peut être personnalisé pour fonctionner avec de nombreuses technologies.

Installation de l'Éditeur In-Context Strings

Exigences

Pour utiliser l'éditeur In-Context, l'application nécessite :

Sites web basés sur le web, applications web, sites mobiles, etc.
Les traducteurs ont accès au serveur web exécutant l'éditeur. Cela pourrait être 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 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é pour les traductions. Cela peut être un clone d'un environnement de staging et bien que cela demande plus de travail pour être configuré initialement, cela offre un meilleur flux de travail et plus de stabilité.

Si un environnement dédié n'est pas possible, un environnement de staging existant peut être utilisé avec l'option d'activer l'In-Context Editor si nécessaire.

JavaScript Snippet

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

L'extrait inclut le code nécessaire pour :

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

Project ID se trouve dans les paramètres du projet.

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

Exemple:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Ne changez pas ce nom pour que la configuration fonctionne
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Réglez sur 'us' pour le centre de données américain
      prefix: '{{__', // Réglez sur le préfixe pour le format de clé dans les modèles de vue
      suffix: '__}}', // Réglez sur le suffixe pour le format de clé dans les modèles de vue
      disableShortcuts: false, // Réglez sur true pour désactiver les raccourcis clavier
      autoLowercase: true, // Définir sur false si les clés contiennent des lettres majuscules
    };
  </script>
  <script type="module" async="" src="https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js"></script>

Installations de Framework Web

i18next

Note

Le processeur post-édition i18next Phrase In-Context prend en charge toutes les versions d'i18next supérieures à 19.5.1. Bien que cette bibliothèque puisse également fonctionner avec des versions antérieures, elles ne sont pas officiellement prises en charge et pourraient ne pas recevoir de mises à jour ou de corrections de bogues spécifiques.

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

Installez la bibliothèque i18next-phrase-in-context-editor-post-processor avec le gestionnaire de paquets de votre choix :
```
# 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: {
            // charger quelques traductions depuis le dépôt i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // faire quelque chose lors de l'initialisation d'i18next
    });

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.
Passer la nouvelle instance 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 le snippet JavaScript ICE à l'instance d'i18next dans la configuration.

Extrait d'exemple :

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

Remarque

accountId doit être fourni pour configurer ICE avec succès. L'identifiant 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 méthodes d'exemple.

Vue I18n

Remarque

L'éditeur In-Context de Vue I18n Phrase prend en charge toutes les versions de Vue I18n 8.17.5 et plus récentes. 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 ou correction de bogues spécifique.

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

Installez le dernier package 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 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 méthodes d'exemple.

React (intl)

Remarque

Cette bibliothèque peut ne pas fonctionner avec IE11 ou des navigateurs plus anciens. Ajoutez Babel au pipeline de construction si un support pour les anciens navigateurs est requis.

Cette bibliothèque hérite des composants communs des packages 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 dernier 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>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

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

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

Ajoutez le snippet à 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)

Conditions préalables

S'inscrire 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 :

Installez 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 du projet d'un projet se trouve dans les paramètres du projet.

L'ID du 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 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, le parseur de documents 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 fonction de conversion automatique en minuscules :
```
let config = {
  // ...
  autoLowercase: false
}
```

Ajoutez ces extraits au projet 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 immédiatement avec les anciens navigateurs ou Microsoft IE11. Ajoutez Babel au pipeline de construction si ces navigateurs doivent être pris en charge.

Prérequis

S'inscrire pour un compte Phrase Strings.
Utilisez l'excellente i18n gem également utilisée par Rails.

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

Ajoutez la phraseapp-in-context-editor-ruby bibliothèque à l'environnement souhaité en utilisant l'une des méthodes suivantes :
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Via Bundler
  
  Ajoutez-le au Gemfile :
```
gem 'phraseapp-in-context-editor-ruby
```
- Construisez directement à partir de la source pour obtenir la 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 du projet d'un projet se trouve dans les paramètres du projet.

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

Ajoutez la configuration suivante au fichier d'initialisation /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 activer 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émo montre une intégration de l'éditeur In-Context de Phrase avec react-i18next.

Django

Prérequis

S'inscrire 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 :

    # Paramètres de l'éditeur In-Context de Phrase
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Définissez votre propre identifiant de compte
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Définissez votre propre identifiant de projet
    PHRASE_DATACENTER = "eu"  # Choisissez votre datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

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

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

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.

Django adapter code on GitHub

Exemple de code

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

Flask

Prérequis

S'inscrire 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 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 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 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'ID du projet d'un projet se trouve dans les paramètres du projet.

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

Si nécessaire, définissez le centre de données américain pour activer le travail 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 retournées par les fonctions de traduction pour présenter un format que l'ICE peut lire. Lorsqu'il est réglé sur False, il reviendra aux fonctions gettext standard de Flask-Babel.

Exemple de code

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

Symfony 5.x

Prérequis

S'inscrire pour un compte Phrase Strings.
Utilisez le framework Symfony pour PHP.

Remarque

La version 2.0.0 prend en charge Symfony 5 et supérieur. Si vous utilisez Symfony 2, 3 ou 4, consultez la ancienne 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é. Si placé ailleurs, ajustez l'espace de noms en conséquence.

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

services :
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        décore : traducteur

Ajoutez le snippet JavaScript suivant au modèle de base ou de mise en page Twig entre le {% block javascripts %} afin que l'In-Context Editor 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'In-Context Editor.

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

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

Si nécessaire, définissez le centre de données américain pour activer le travail 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 de Phrase pour commencer le processus de traduction directement sur la page web.

Exemple de code

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

Configuration de l'In-context Editor

Exposition des noms de clé

Typiquement, une couche de vue rend les traductions en passant 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" => "Cliquez sur moi" ,

)

function translate($keyName) {

  return $translations[$keyName];

}

Le modèle rendrait 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 quelles clés rendre pour les traductions.

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

{{__phrase_NameOfYourKey__}}

Exemple :

Si la clé page.headline est dans le modèle, rendez la chaîne {{__phrase_page.headline__}}.

Modifiez la méthode d'aide 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 cadre, les aides à la traduction dans le code peuvent être remplacées ou une version enveloppée peut être créée à utiliser dans les modèles.

Exemple :

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

Échapper aux noms de clés et aux 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, le parseur de document 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 fonctionnalité de conversion automatique en minuscules :

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personnaliser les décorateurs de clé

Lors de l'utilisation de l'éditeur In-Context, les noms de clés sont généralement entourés de décorateurs (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 cause des conflits avec d'autres bibliothèques (par exemple, des moteurs de templates côté client, y compris 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 le parseur doit rechercher, ajoutez les valeurs de configuration suivantes avant le snippet JavaScript :

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Cela indique à l'éditeur de rechercher des tags commençant par [[__ et se terminant par __]] :

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

fin

Si vous n'utilisez pas la gemme, assurez-vous que le modèle d'exposition du nom de la 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 phraseapp-in-context-editor-ruby gem.

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 du snippet JavaScript (lors de l'utilisation de l'assistant de vue) et le rendu des noms de clés décorés dans les vues :

PhraseApp::InContextEditor.enabled = true|false

Exemple de liaison du drapeau à une variable d'environnement :

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

Reparsing complet

Activez fullReparse si vous utilisez l'In-Context editor avec un framework JavaScript qui utilise le Virtual DOM tel que React. Cela permet un reparsing correct lorsque des modifications du DOM sont détectées :

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitiser 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 retourner 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 SSO activé, ajoutez la valeur de configuration suivante avant le snippet JavaScript :

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Ancien éditeur In-Context : Configuration

Installations de framework 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 du projet d'un projet se trouve dans les paramètres du projet.

Par défaut, le parseur 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 fonction de conversion automatique en minuscules :
```
let config = {
  // ...
  autoLowercase: false
}
```

Ajoutez ces extraits au projet 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 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 à l'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 du projet d'un projet se trouve dans les paramètres du projet. Cela 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 un utilisateur de l'organisation Phrase.

angular-phrase sur GitHub

Exemple de code

Cette application démo 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 le snippet 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 un utilisateur de l'organisation Phrase.

Django adapter code on GitHub

Exemple de code

Cette application de démonstration 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 un support pour les anciens navigateurs est requis.

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 construisez à partir de la source :
```
npm run dist
```
```
npm install
```

Configurer :

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

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

Ajoutez le snippet à l'application react :

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

let config = {
  projectId: '<YOUR_PROJECT_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 des 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 gemme phraseapp-in-context-editor-ruby à l'environnement que vous souhaitez utiliser avec l'éditeur In-Context :
```
groupe :développement do
  gem 'phraseapp-in-context-editor-ruby'
 fin
```
et installez-la en exécutant la commande bundle :
```
$ bundle install
```
Installez la gemme 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 de profil ou via l'API des autorisations.

--project-id

L'ID du projet d'un projet se trouve dans les paramètres du projet. Cela crée un fichier d'initialisation avec quelques options de configuration.
Ajoutez le snippet 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 un utilisateur de l'organisation Phrase.
Désactiver Turbolinks (si utilisé)

Turbolinks supprime tous les éléments de l'interface utilisateur de l'éditeur In-Context de la page à chaque chargement 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

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 l'assistant JavaScript requis dans les modèles en exposant l'assistant comme un bean :

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

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

<head>

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

</head>

Redémarrez l'application et connectez-vous avec les informations d'identification de l'utilisateur Phrase.

Exemple de code source d'application sur GitHub

Comment localiser les 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 fonctionnera. Dans l'exemple, le nouvel environnement est nommé traduction.

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

imports :

    - { resource : config.yml }

paramètres :

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

Créer un contrôleur pour rendre l'environnement accessible au 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 de 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') {

            // Retourner les valeurs traduites pour le domaine 'routes'

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

        } else {

            // Retourner les clés de traduction PhraseApp pour tous les autres domaines

            return $prefix.$id.$suffix;

        }

    }

}

Ajoutez le snippet 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 un utilisateur de l'organisation Phrase.

Documentation de la 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 fonctionnera. Dans l'exemple, le nouvel environnement est nommé traduction.

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

imports :

   - { resource : config.yml }
```

Créer un contrôleur pour rendre l'environnement accessible au 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 de 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';

       }

       // Retourner l'ID de la clé de traduction avec préfixe et suffixe pour PhraseApp

       return $prefix.$id.$suffix;

   }

}

Assurez-vous que la classe est toujours remplacée lorsque le bundle est utilisé avec un passage de compilateur :

# 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 passages de compilateur séparés, enregistrez-les dans la méthode build() de la classe 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 le snippet 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 un utilisateur de l'organisation Phrase.

Documentation de la traduction Symfony

Vue I18n

Remarque

L'éditeur de phrases en contexte Vue I18n prend en charge toutes les versions de Vue I18n à partir de 8.17.5. Cette bibliothèque peut fonctionner avec des versions antérieures, mais elles ne sont pas officiellement prises en charge et ne recevront pas de mises à jour spécifiques ni de corrections de bogues.

Pour installer l'éditeur en contexte dans cet environnement, suivez ces étapes :

Installez le paquet 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 CDN (enregistrement manuel 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: 'Bonjour le monde!'
  }
});

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) 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'éditeur In-Context. Pour désactiver le mode Ajax, ajoutez la valeur de configuration suivante avant le snippet JavaScript :

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Mode Débogage

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forcer un paramètre linguistique

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Clés ignorées

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

Les clés peuvent être exclues de l'affichage avec l'éditeur In-Context. Lors de l'utilisation de Rails, certaines 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 les clés d'un traitement automatique par la gemme phraseapp-in-context-editor-ruby, ajoutez un tableau des clés au fichier d'initialisation phraseapp_in_context_editor.rb. Des jokers peuvent également être utilisés :

PhraseApp::InContextEditor.configure do |config|

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

fin

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