In-Context Editor (Strings)

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

Disponible pour

Équipe, Professionnel, Entreprise, Entreprise et Plans UI/UX de logiciel

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 à accomplir les tâches plus efficacement et à traduire une page web grâce à une intégration directe avec l'éditeur de traduction éditeur de traduction.

Actuellement, deux versions sont disponibles :

L'éditeur en contexte :

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

Exigences

Pour utiliser l'éditeur en contexte, 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 mise en scène et bien que cela nécessite 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 mise en scène existant peut être utilisé avec l'option d'activer l'éditeur en contexte si nécessaire.

Extrait JavaScript

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

L'extrait comprend le code nécessaire pour :

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

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

l'ID 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 Framework Web

i18next

Note

Le processeur post-édition In-Context d'i18next Phrase 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 en contexte 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 recommandées de la bibliothèque 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 de 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 i18next use.
Ajouter la chaîne phraseInContextEditor à la propriété de tableau postProcess (passée dans l'objet de configuration de la méthode i18next init).

Ajouter le snippet JavaScript ICE à l'instance i18next dans la configuration.

Exemple de snippet :

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émarrer l'éditeur en contexte.
Ouvrez l'application dans un navigateur web pour afficher l'éditeur en contexte. Connectez-vous avec n'importe quel utilisateur de l'organisation Phrase.

Options de configuration et méthodes d'exemple.

Vue I18n

Remarque

L'éditeur en contexte de Vue I18n prend en charge toutes les versions de Vue I18n 8.17.5 et supé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 ou correction de bogues spécifique.

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

Installez le dernier package avec le gestionnaire de packages préféré :

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

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

ou chargez avec CDN (enregistré 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: {
      bonjour : 'Bonjour tout 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.

React (intl)

Remarque

Cette bibliothèque peut ne pas fonctionner avec IE11 ou des navigateurs plus anciens. Ajoutez Babel au pipeline de construction si le support des 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 en contexte 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 tous les imports de FormattedMessage, et modifiez la source de react-intl à react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Exécutez des tests unitaires avec jest :
```
npm test
```

Exemple de code

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

Angular 2 (ngx-translate)

Prérequis

S’inscrire pour un compte Phrase Strings.
Utilisez le module ngx-translate pour la localisation dans les applications Angular 2.

Pour installer l'éditeur en contexte 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 fonctionnement 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 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 automatique de conversion 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: {
        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 met en avant une intégration de l'éditeur en contexte avec Angular et ngx-translate.

Ruby on Rails (i18n)

Remarque

Cette bibliothèque peut 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 gemme i18n également utilisée par Rails.

Pour installer l'éditeur en contexte 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-le au Gemfile :
```
gem 'phraseapp-in-context-editor-ruby
```
- Construisez directement à partir de la source pour obtenir les dernières nouveautés :
```
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 à 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 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 en contexte 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 en contexte 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 en contexte 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 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 en contexte 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 démo d'application démontre comment intégrer l'éditeur en contexte 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 en contexte 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 : "VOTRE-ID-DE-COMPTE",
        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 : "VOTRE-ID-DE-COMPTE",
    datacenter: "us",
};

Lorsque PHRASEAPP_ENABLED = True, le package modifie les valeurs de retour des 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 .

Exemple de code

Cette démo application démontre comment intégrer l'éditeur en contexte 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 en contexte 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:
        decorates: translator

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

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 : "VOTRE-ID-DE-COMPTE",
    datacenter: "us",
};

Rechargez l'application et connectez-vous avec les informations d'identification 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 en contexte avec une application Symfony.

Configuration de l'éditeur en contexte

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" => "Click me"

)

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>

Mise en forme

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

Utilisez cette mise en forme pour exposer les noms de clé au lieu des traductions :

{{__phrase_NameOfYourKey__}}

Exemple :

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

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

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Selon le cadre, les assistants de traduction dans le code peuvent être remplacés ou une version enveloppée peut être créée à utiliser 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'Éditeur en contexte :

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 en contexte 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 en contexte, désactivez la fonction de conversion automatique en minuscules :

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personnaliser les décorateurs de clé

Lors de l'utilisation de l'Éditeur en contexte, les noms de clé 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 provoque des conflits avec d'autres bibliothèques (par exemple, des moteurs de template 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 en contexte dans la configuration. Pour indiquer à l'Éditeur en contexte 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 phraseapp-in-context-editor-ruby gem pour fournir la fonctionnalité d'éditeur en contexte, assurez-vous que les décorateurs sont configurés :

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Si vous n'utilisez pas le 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 en contexte

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

L'éditeur en contexte est désactivé par défaut.

L'éditeur en contexte 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'éditeur en contexte avec un framework JavaScript qui utilise le DOM virtuel tel que React. Cela permet un reparsing correct lorsque des changements de DOM sont détectés :

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Assainir la sortie vers la page Web

L'éditeur en contexte 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 single sign-on et souhaitez initialiser l'éditeur en contexte 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 en contexte : Configuration

Installations de framework Web

Angular 2 (ngx-translate)

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

Installez 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 automatique de conversion en minuscules :
```
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: {
        fournir : TranslateLoader,
        useFactory : HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        fournir : TranslateCompiler,
        useClass : PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Exemple de code

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

AngularJS (angular-translate)

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

Installez angular-phrase via Bower (ou télécharger 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 en contexte appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.

angular-phrase sur GitHub

Exemple de code

Cette application de démonstration pour angular-phrase montre comment localiser AngularJS avec angular-translate.

Django

Pour installer l'éditeur en contexte 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',

)
```
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 en contexte 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 en contexte appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.

Code d'adaptateur Django sur GitHub

Exemple de code

Cette application de démonstration montre comment intégrer l'éditeur en contexte 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 en contexte 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 application de démonstration montre une intégration de l'éditeur en contexte Phrase avec react-intl.

Ruby on Rails (i18n)

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

Ajoutez la phraseapp-in-context-editor-ruby gem à l'environnement avec lequel vous souhaitez utiliser l'éditeur en contexte :
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
et installez-la en exécutant la commande bundle :
```
$ bundle install
```
Installez la phraseapp-in-context-editor-ruby gem 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 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'aide 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 en contexte appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.
Désactiver Turbolinks (si utilisé)

Turbolinks supprime tous les éléments de l'interface utilisateur de l'Éditeur en contexte 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 en contexte de Phrase avec react-i18next.

Printemps

Pour installer l'éditeur en contexte 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'aide JavaScript requise dans les modèles en exposant l'aide comme un 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 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 en contexte dans cet environnement, suivez ces étapes :

Créez un nouvel environnement dans lequel l'éditeur en contexte fonctionnera. Dans l'exemple, le nouvel environnement est nommé traduction.

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

imports:

    - { resource: config.yml }

parameters:

    traducteur.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 de clés à l'éditeur en contexte :

# 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 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 en contexte 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 en contexte dans cet environnement, suivez ces étapes :

Créez un nouvel environnement dans lequel l'éditeur en contexte fonctionnera. Dans l'exemple, le nouvel environnement est nommé traduction.

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 de clés à l'éditeur en contexte :

# 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 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 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 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 en contexte appliqué à l'application. Connectez-vous avec n'importe quel utilisateur d'organisation Phrase.

Documentation de traduction Symfony

Vue I18n

Remarque

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

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

Installez le package avec le gestionnaire de packages préféré :

# 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: {
      bonjour : '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 en contexte

Mode Ajax

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Mode Debug

Pour activer le mode debug, ajoutez la valeur de configuration suivante avant le snippet JavaScript :

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forcer un paramètre régional

Pour définir explicitement un paramètre régional spécifique lors du démarrage de l'Éditeur en contexte, utilisez le paramètre forceLocale. Ceci est utile pour pré-sélectionner le paramètre régional actuellement affiché dans votre application web dans l'Éditeur en contexte également :

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Clés ignorées

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

Les clés peuvent être exclues de l'affichage avec l'Éditeur en contexte. Lors de l'utilisation de 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 les clés de la gestion automatique par le phraseapp-in-context-editor-ruby gem, 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 accessibles à l'Éditeur en contexte et sont affichées normalement.