In-context Editor (Strings)

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

Disponible pour

Plans Team, Professional, Business, Enterprise et 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'In-context Editor est conçu pour aider les traducteurs à accomplir leurs tâches plus efficacement et à traduire une page de site Web grâce à une intégration directe avec l'éditeur de traduction Strings.

Actuellement, deux versions sont disponibles :

L'In-context Editor :

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 In-context Editor.

Après l'installation de l'In-context Editor, il peut être personnalisé pour fonctionner avec de nombreuses technologies.

Installation de l'In-context Editor de Strings

Configuration requise

Pour utiliser l'In-context Editor, l'application nécessite :

Sites Web, applications Web, sites mobile, 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 Strings traduisibles extraites et une couche de vue qui utilise une structure clé-valeur pour rendre 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 à configurer initialement, cela offre un meilleur flux de travaux 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 selon les besoins.

JavaScript Snippet

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 de projet se trouve dans les paramètres du projet.

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

Exemple :

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId: '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 pas recevoir de mises à jour ou de corrections de bugs spécifiques.

Pour installer l'In-context Editor 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.
Passer l'instance nouvellement créée de i18next Phrase In-Context Editor Post Processor à la méthode utiliser 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 i18next dans la configuration.

Snippet d'exemple :

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

Remarque

accountId doit être fourni pour configurer l'In-context Editor 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émarrer l'In-context Editor.
Ouvrez l'application dans un navigateur web pour afficher l'In-context Editor. Se connecter avec n'importe quel utilisateur de l'organisation Phrase.

Options de configuration et méthodes d'exemple.

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 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'In-context Editor dans cet environnement, suivez ces étapes :

Installez le package le plus récent 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 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 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 la prise en charge des 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 va changer.

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

Installez le package le plus récent via NPM :
```
npm install react-intl-phraseapp
```
ou construisez à partir de la source :
```
npm run dist
```
```
npm install
```
Configurez :
```
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 l'extrait à l'application react :

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

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

initializePhraseAppEditor(config);

Trouvez toutes les importations de FormattedMessage, et 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 démo montre une intégration de l'In-context Editor de Phrase avec react-intl.

Angular 2 (ngx-translate)

Prérequis

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

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

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

Configurez :

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

let config: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: 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.

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, ajouter 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 document 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ésactiver la fonctionnalité de conversion automatique en minuscules :
```
let config = {
  // ...
  autoLowercase: false
}
```

Ajouter 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 demo app présente une intégration de l'In-context Editor 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. Ajouter Babel au pipeline de build si ces navigateurs doivent être pris en charge.

Prérequis

s’inscrire pour un compte Phrase Strings.
Utiliser l'excellente gem i18n également utilisée par Rails.

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

Ajouter 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
  
  Ajouter au Gemfile :
```
gem 'phraseapp-in-context-editor-ruby
```
- Construisez directement à partir de la source pour obtenir la toute dernière version :
```
bundle && gem build
```
Créer 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 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.
Ajouter l'extrait Ruby à la mise en page de l'application app/views//layouts/application.html.erb :
```
<%= load_in_context_editor %>
```

Ajouter 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'In-context Editor appliqué à l'application. Se connecter avec n'importe quel utilisateur de l'organisation Phrase.

Exemple de code

Cette demo montre une intégration de l'In-context Editor de Phrase avec react-i18next.

Django

Prérequis

s’inscrire pour un compte Phrase Strings.
Utiliser 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'In-context Editor dans cet environnement, suivez ces étapes :

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

    'phrase',

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

Ajouter 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 manuellement le JavaScript snippet.

Ouvrez l'application dans n'importe quel navigateur web pour voir l'In-context Editor appliqué à l'application. Se connecter avec n'importe quel utilisateur de l'organisation Phrase.

Django adapter code on GitHub

Exemple de code

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

Flask

Prérequis

s’inscrire pour un compte Phrase Strings.
Utiliser 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'In-context Editor dans cet environnement, suivez ces étapes :

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

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

Ajouter l' extrait JavaScript de Phrase 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 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 renvoyées par les fonctions de traduction pour présenter un format que l'In-context Editor peut lire. Lorsqu'il est défini sur False, il reviendra aux fonctions gettext standard de Flask-Babel.

Exemple de code

Cette démo d'application montre comment intégrer l'In-context Editor à une application Flask.

Symfony 5.x

Prérequis

s’inscrire pour un compte Phrase Strings.
Utiliser 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 l' ancienne version de l'In-context Editor.

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

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

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

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

Ajouter l'extrait JavaScript suivant au modèle de mise en page de base ou Twig entre {% 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'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 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 Phrase pour démarrer le processus de traduction directement sur la page web.

Exemple de code

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

Configuration de l'In-context Editor

Exposer les noms de clé

Généralement, une couche de vue affiche des traductions en passant le nom d'une chaîne traduisible (c.-à-d. 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 est 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 utiliser dans les modèles.

Exemple :

const t = (key: chaîne) => '{{__phrase_' + key + '__}}'

Échapper les noms de clé et les caractères spéciaux

S'assurer que les noms de clé sont convertis dans un format reconnaissable.

Les caractères dans 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 (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èle 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 le phraseapp-in-context-editor-ruby gem 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 le gem, assurez-vous que le modèle d'exposition du nom de clé est ajusté dans le code Personnalisé.

Activer et désactiver l'In-context Editor

Ce paramètre est uniquement disponible lors de l'utilisation du 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 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 de liaison du flag à 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 modifications du DOM sont détectées :

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Nettoyer la sortie vers la page Web

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

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

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Authentification unique

Si vous utilisez l'authentification unique et souhaitez initialiser l'In-context Editor avec le SSO activé, ajouter 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 en utilisant le SSO, définissez le paramètre enforced :

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Ancien In-context Editor : configuration

Installations de framework Web

Angular 2 (ngx-translate)

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

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

Configuration :

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'éditeur convertit toutes les clés en minuscules. Si vous rencontrez des problèmes avec ce comportement et souhaitez utiliser des clés sensibles à la casse dans l'éditeur, désactivez la fonctionnalité de conversion automatique en minuscules :
```
let config = {
  // ...
  autoLowercase: false
}
```

Ajouter 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 présente 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 :

Installer angular-phrase via Bower (ou téléchargement manuel) :
```
$ bower install angular-phrase
```
ajouter le module angular-phrase à l'application AngularJS existante après le chargement du module angular-translate :
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Configurer 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 quelques options de configuration.
ajouter la directive phrase-javascript à l'application à l'intérieur de la balise <head> :
```
<phrase-javascript></phrase-javascript>
```
Ouvrir l'application dans n'importe quel navigateur web pour voir l'In-context Editor appliqué à l'application. se connecter avec n'importe quel utilisateur d'organisation Phrase.

angular-phrase sur GitHub

Exemple de code

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

Django

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

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

    'phrase',

)
```
utiliser 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, charger phrase_i18n après i18n.
ajouter l'extrait JavaScript à la mise en page :
```
{% phrase_javascript %}
```

Configurer l'In-context Editor pour le projet avec ces options :

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

Ouvrir l'application dans n'importe quel navigateur web pour voir l'In-context Editor appliqué à l'application. se connecter avec n'importe quel utilisateur d'organisation Phrase.

Django adapter code on GitHub

Exemple de code

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

React (intl)

Remarque

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

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

Pour installer l'In-context Editor 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
```

Configuration :

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.

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

Trouvez toutes les importations de FormattedMessage, et modifier 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'In-context Editor de Phrase avec react-intl.

Ruby on Rails (i18n)

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

Ajouter la gem phraseapp-in-context-editor-ruby à l'environnement avec lequel vous souhaitez utiliser l'In-context Editor :
```
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éer et gérer des jetons d'accès dans les paramètres du profil ou via l'API Authorizations.

--project-id

L'Identifiant de projet d'un projet se trouve dans les paramètres du projet. Ceci crée un fichier d'initialisation avec quelques options de configuration.
Ajouter 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>
```
Ouvrir l'application dans n'importe quel navigateur web pour voir l'In-context Editor appliqué à l'application. se connecter avec n'importe quel utilisateur d'organisation Phrase.
Désactiver Turbolinks (si utilisé)

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

Ajouter 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'In-context Editor de Phrase avec react-i18next.

Spring

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

S'assurer que le package com.phraseapp.incontexteditor est disponible dans l'application.
Définir le bon Identifiant de projet et ajuster les autres paramètres dans PhraseAppConfiguration.class.

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Fournir l'assistant JavaScript requis dans les modèles en exposant l'assistant en tant que bean :

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

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

<head>

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

</head>

Redémarrer l'application et se connecter avec les informations d’identification utilisateur Phrase.

Code source de l'application exemple sur GitHub

Comment localiser des applications Spring comme un pro

Package Starter Spring Boot (fourni par ePages)

Symfony 2.x

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

Créer un nouvel environnement dans lequel l'In-context Editor s'exécutera. Dans l'exemple, le nouvel environnement est nommé translation.

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

imports:

    - { resource: config.yml }

parameters:

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

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

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

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

        }

    }

}

ajouter l'extrait JavaScript à la mise en page :

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

Ouvrir l'application dans n'importe quel navigateur web pour voir l'In-context Editor appliqué à l'application. se connecter 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'In-context Editor dans cet environnement, suivez ces étapes :

Créer un nouvel environnement dans lequel l'In-context Editor s'exécutera. Dans l'exemple, le nouvel environnement est nommé translation.

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 par 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 remplacé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());

       };

   }

}

ajouter l'extrait JavaScript à la mise en page :

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

Ouvrir l'application dans n'importe quel navigateur web pour voir l'In-context Editor appliqué à l'application. se connecter avec n'importe quel utilisateur d'organisation Phrase.

Documentation de traduction Symfony

Vue I18n

Remarque

Le Vue I18n Phrase In-context Editor prend en charge toutes les versions de Vue I18n 8.17.5 et ultérieures. Cette bibliothèque peut travail 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'In-context Editor dans cet environnement, suivez ces étapes :

Installez le package avec votre 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 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 :

importer la bibliothèque Vue I18n In-context Editor.
Créer une nouvelle instance de Vue I18n 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.

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, ajouter la valeur de configuration suivante avant l'extrait JavaScript :

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Mode débogage

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forcer un paramètre linguistique

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Clés ignorées

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

Les clés peuvent être Exclure d'être rendues 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 le phraseapp-in-context-editor-ruby gem, ajouter 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 affichées normalement.