Éditeur en contexte (Strings)

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

Disponible pour

Forfaits Team, Professional, Business et Enterprise

Contactez le service commercial pour toute question relative aux licences.

Disponible pour

Forfait Advanced and Enterprise (ancien)

Contactez le service commercial pour toute question relative aux licences.

L'Éditeur en contexte est conçu pour Aide les traducteurs à faire les choses plus efficacement et à traduire une page de site Web par intégration directe avec l'éditeur de traduction Strings.

Actuellement, deux versions sont disponibles :

L'Éditeur en contexte :

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

Après avoir installé l'Éditeur en contexte, il peut être personnalisé pour travail avec de nombreuses technologies.

Installation de l'Éditeur en contexte Strings

Exigences

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

Les sites web, les applications web, les sites mobiles, etc.
Les traducteurs peuvent accéder au serveur Web exécutant l'éditeur. Il peut s'agir d'un environnement local si nécessaire.
Une structure de fichiers de localisation de valeur clé.

Les sites Web avec Strings traduisibles extraites et une couche de vue qui utilise une structure de valeur clé pour effectuer les traductions.
Noms clés exposés à la couche vue ou modèle.
Extrait de JavaScript qui restitue l'éditeur.
Idéalement, un environnement dédié aux traductions. Cela peut être un clone d'un environnement de mise en scène et bien que plus de travail à configurer initialement, offre un meilleur flux de travaux et plus de stabilité.

Si aucun environnement dédié n’est possible, un environnement de mise en scène existant peut être utilisé avec la possibilité d’activer l’Éditeur en contexte si nécessaire.

Extrait de JavaScript

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

L'extrait de code comprend le code requis pour :

Communique avec l'API Phrase Strings
Rendre l'interface utilisateur.
Fournis une connexion.

L'Identifiant projet se trouve dans les paramètres projet.

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

Exemple :

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Ne pas modifier ce nom pour que la configuration travail
      accountId: 'ACCOUNT_ID',
      projectId : 'PROJECT_ID',
      centre de données : « eu », // Définir comme « nous » pour centre de données américain
      préfixe : '{{___', // Définir le préfixe pour le format de clé dans les modèles de vue
      suffixe : '_}}', // Définir le suffixe pour le format de clé dans les modèles de vue
      disableRaccourcis : faux, // Définir sur vrai pour désactiver les raccourcis clavier
      autoMinuscule : vrai, // Défini sur faux si les clés contiennent des lettres majuscules
    };
  </script>
  <script type="module" async="" src="https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js"></script>

Installations Web Framework

i18next

Note

Le post-processeur i18next Phrase Éditeur en contexte prend en charge toutes les versions i18next plus récentes que 19.5.1. Bien que cette bibliothèque puisse également travail avec les versions précédentes, elles ne sont pas officiellement prises en charge et peuvent ne pas obtenir de mises à jour spécifiques ou de correction de bugs.

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer la bibliothèque i18next Phrase-éditeur en contexte-post-processeur avec le gestionnaire de paquets préféré :

# fil
fil Ajouter i18la Phrase suivante-en contexte-éditeur-post-processeur

# npm
npm installer le post-processeur i18next-Phrase-éditeur en contexte

Note

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

ou la charger via CDN :

<script src="https://unpkg.com/i18next-phrase-in-context-editor-post-processor"></script>

Bootstrap (exemple) :

importer i18next depuis 'i18next';
importer i18nextXHRBackend depuis 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'fr',
        débogage : vrai,
        ns : ['spécial', 'commun'],
        defaultNS: 'spécial',
        backend : {
            // charger certaines traductions du 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 sur l'initialisation de i18next
    });

Pour intégrer la bibliothèque :

Importer PhraseInContextEditorPostProcessor depuis i18la prochaine Phrase-en-contexte-éditeur-post-processeur bibliothèque.
Créer nouvelle instance i18next Phrase Éditeur en contexte Post Processor, en passant PhraseConfig comme argument.
Passer l'instance de post-processeur Phrase en contexte nouvellement créée à la méthode utiliser i18next.
Ajouter chaîne phraseInContextEditor à la propriété du tableau postProcess (passée dans l'objet de configuration de la méthode d'initialisation i18next).

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

Extrait d’échantillon :

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseActivé : vrai,
      projectId : '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
    }))

Note

L'identifiant de compte doit être fourni pour la configuration réussie d'ICE. L'Identifiant du compte se trouve dans les paramètres Strings organisation.

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

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseActivé : vrai,
      projectId : '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
      useOldICE: vrai,
    }))

Démarrez l'Éditeur en contexte.
Ouvrez l’application dans un navigateur Web pour afficher l’Éditeur en contexte. Se connecter avec tout utilisateur Phrase organisation.

Options de configuration et exemples de méthodes.

Vue I18n

Note

Vue I18n Phrase Éditeur en contexte prend en charge toutes les versions 8.17.5 et suivantes de Vue I18n. Cette bibliothèque peut travail avec les versions précédentes mais elles ne sont pas supportées officiellement et n'obtiendront aucune mise à jour spécifique ni correction de bugs.

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer le plus récent paquet avec le gestionnaire de paquets préféré :

# fil
Ajouter vue-i18n-Phrase-en-contexte-éditeur

# npm
npm installer l'éditeur vue-i18n-Phrase-en-contexte

ou charger avec CDN (enregistrer manuellement window['vue-i18n-Phrase-in-context-éditeur'] ) :

<script src="https://unpkg.com/vue-i18n-Phrase-in-context-éditeur/dist/vue-i18n-Phrase-in-context-éditeur.umd.min.js"></script>

Bootstrap (exemple) :

importer Vue depuis 'vue';
importer VueI18n depuis 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  Paramètres régionaux : process.env.VUE_APP_I18N_PARAmètres régionaux || 'fr',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'fr',
  messages : {
      bonjour : Bonjour le monde !
  }
});

nouvelle Vue({
  i18n,
  rendu : h => h(App)
}).$mount('#app');

Pour intégrer la bibliothèque :

Importez la bibliothèque Vue I18n Phrase Éditeur en contexte.
Créer nouvelle instance Éditeur en contexte Phrase, en passant l’instance Vue I18n comme premier argument et Phrase Config comme deuxième.

Options de configuration et exemples de méthodes.

Réagir (intl)

Note

Cette bibliothèque ne travail peut-être pas avec IE11 ou des navigateurs plus anciens. Ajoutez Babel au pipeline de compilation si un ancien support du navigateur 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 sera modifié.

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer le dernier paquet via NPM :
```
npm install react-intl-phraseapp
```
ou construire à partir des sources :
```
npm run dist
```
```
npm install
```

Configurer :

let config = {
  projectId: '<VOTRE_ID_PROJET>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseActivé : vrai,
  préfixe : « [[__",
  suffix: "__]]",
  fullReparse: true
};

Identifiant projet d'un projet se trouve dans les paramètres projet.

Identifiant compte se trouve dans Strings organisation paramètres.

Ajouter l’extrait à l’application réagir :

importer {initializePhraseAppEditor} depuis 'react-intl-phraseapp'

let config = {
  projectId: '<VOTRE_ID_PROJET>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseActivé : vrai,
  préfixe : « [[__",
  suffix: "__]]",
  fullReparse: true
};

initializePhraseAppEditor(config);

Trouve toutes les importations de FormattedMessage, et modifie la source de react-intl à react-intl-phraseapp.
```
importer {MessageFormaté} depuis 'react-intl-phraseapp'
```
Lancer des tests unitaires en plaisantant :
```
npm test
```

Échantillon de code

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

Angulaire 2 (ngx-translate)

Prérequis

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

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

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

Configurer :

importer { initializePhraseAppEditor, PhraseConfig } depuis 'ngx-translate-phraseapp';

let config : PhraseConfig = {
  projectId: '<VOTRE_ID_PROJET>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseActivé : vrai,
};

Identifiant projet d'un projet se trouve dans les paramètres projet.

Identifiant compte se trouve dans Strings organisation paramètres.

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

let config = {
  projectId: '<VOTRE_ID_PROJET>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseActivé : vrai,
  useOldICE: vrai,
};

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, l'analyseur de documents de l'éditeur convertit toutes les clés en minuscules. Si vous rencontrez des problèmes avec ce comportement et que vous souhaitez utiliser des clés sensibles à la casse au sein de l'éditeur, désactivez la fonction minuscule automatique :
```
let config = {
  // ...
  autoMinuscule : faux
}
```

Ajoutez ces extraits à l’application Angular :

app.component.ts

importer { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} depuis 'ngx-translate-phraseapp'

let config : PhraseConfig = {
  projectId: '<VOTRE_ID_PROJET>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseActivé : vrai,
};

initializePhraseAppEditor(config);

app.module.ts

importer { TranslateModule, TranslateLoader, TranslateCompiler } depuis '@ngx-translate/core';
importer { HttpClientModule, HttpClient } depuis '@angular/common/http';
importer { PhraseAppCompiler } depuis 'ngx-translate-phraseapp'
importer { AppComponent } depuis './app.component';


exporter fonction HttpLoaderFactory(http: HttpClient) {
  renvoyer le nouveau TranslateHttpLoader(http);
}

@NgModule({
  déclarations : [
    AppComponent
  ],
  importations : [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      chargeur : {
        fournir : TranslateLoader,
        useFactory : HttpLoaderFactory,
        deps: [HttpClient]
      },
      compilateur : {
        fournir : TranslateCompiler,
        useClass : PhraseAppCompiler
      }
    }),
  ],
  fournisseurs : [],
  bootstrap: [AppComponent]
})

Échantillon de code

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

Ruby on Rails (i18n)

Note

Cette bibliothèque peut ne pas travail prête à l'Box pour les anciens navigateurs ou Microsoft IE11. Ajoutez Babel au pipeline de compilation si ces navigateurs doivent être pris en charge.

Prérequis

S’inscrire pour un compte Phrase Strings
Utilise l'excellente gemme en 18n aussi utilisée par Rails.

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Ajoutez la bibliothèque phraseapp-éditeur en contexte-Ruby à l’environnement souhaité en utilisant l’une des méthodes suivantes :
- Via Gem
```
gem installer phraseapp-en-contexte-éditeur-Ruby
```
- Via Bundler
  
  Ajoutez-le au fichier gemme :
```
gem 'phraseapp-en-contexte-éditeur-Ruby
```
- Créez directement à partir des sources pour obtenir les dernières et les plus grandes :
```
bundle && gem build
```
Créer le fichier initialisateur en exécutant le générateur Rails :
```
rails génèrent une phraseapp_in_context_editor:install --account_Identifiant=<YOUR_account_Identifiant> --project-Identifiant=<YOUR_PROJET_Identifiant>
```
Identifiant projet d'un projet se trouve dans les paramètres projet.

Identifiant compte se trouve dans Strings organisation paramètres.
Ajouter l’extrait Ruby à l’application de mise en page de l’application :
```
<%= load_in_context_editor %>
```

Ajoutez la configuration suivante à l’initialiseur /config/initializers/phraseapp_in_context_editor.rb :

  config.enabled = true
  config.project_id = "VOTRE_ID_PROJECT"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "eu"

Si nécessaire, configurez le centre de données américain pour activer le travail avec des points de terminaison américains :

  config.enabled = true
  config.project_id = "VOTRE_ID_PROJECT"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = « nous »

Ouvrez l’application dans n’importe quel navigateur Web pour voir l’Éditeur en contexte appliqué à l’application. Se connecter avec tout utilisateur Phrase organisation.

Échantillon 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
Utilise le framework Django pour Python

Note

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

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer le paquet django-Phrase avec pip :
```
$ pip installer Phrase django
```
Ajouter 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 l’équivalent :
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Utilisez la balise modèle Phrase_i18n dans les modèles (par exemple, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Ajoutez aux paramètres.py la configuration suivante :

    # Paramètres Phrase Éditeur en contexte
    PHRASE_ENABLED = True
    Identifiant PHRASE_COMPTE = "Identifiant_VOTRE_COMPTE" # Définir ton propre Identifiant compte
    Identifiant_PROJET_PHRASE = "Identifiant_VOTRE_PROJET" # Définir ton propre Identifiant projet
    PHRASE_DATACENTER = "eu" # Choisissez votre centre de données 'eu' | 'us'
    PHRASE_PREFIX = "{{____"
    PHRASE_SUFFIX = "__}}"

Identifiant projet d'un projet se trouve dans les paramètres projet.

Identifiant compte se trouve dans Strings organisation paramètres.

En cas de problème, il est possible d'intégrer manuellement l'extrait de code JavaScript SnippetJavaScript.

Ouvrez l’application dans n’importe quel navigateur Web pour voir l’Éditeur en contexte appliqué à l’application. Se connecter avec tout utilisateur Phrase organisation.

Code adaptateur Django sur GitHub

Échantillon de code

Cette application de démonstration montre comment intégrer l'Éditeur en contexte à une application Django.

Flacon

Prérequis

S’inscrire pour un compte Phrase Strings
Utilise le framework Flask pour Python

Note

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

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer le paquet Flask-Phrase avec pip :
```
pip install 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 :

à partir de flacon importer Flacon, [...]
à partir de flask_babel importer Babel
à partir de flask_phrase importer Phrase, gettext, ngettext
app = Flask(__name__)
babel = Babel(application)
Phrase = Phrase(application)

Ajouter l' PhraseJavaScriptL'extrait de code JavaScript au fichier de mise en page de base avec la balise suivante (il doit entrer dans la section du fichier modèle) :

<script>
    window.PHRASEAPP_CONFIG = {
        projectId : "IDENTIFIANT DE VOTRE PROJET",
        accountId: "VOTRE IDENTIFIANT DE COMPTE",
        centre de données : "eu",
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

Identifiant projet d'un projet se trouve dans les paramètres projet.

Identifiant compte se trouve dans Strings organisation paramètres.

Si nécessaire, configurez le centre de données américain pour activer le travail avec des points de terminaison américains :

window.PHRASEAPP_CONFIG = {
    projectId : "IDENTIFIANT DE VOTRE PROJET",
    accountId: "VOTRE IDENTIFIANT DE COMPTE",
    centre de données : « nous »,
};

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

Échantillon de code

Cette application de démonstration montre comment intégrer l'Éditeur en contexte à une application Flask.

Symfony 5.x

Prérequis

S’inscrire pour un compte Phrase Strings
Utiliser PHP comme framework Symfony.

Note

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

Pour intégrer l'Éditeur en contexte à l'application Symfony, procédez comme suit :

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

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

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

Ajoutez l’extrait JavaScript suivant au modèle de mise en page de base ou de brindille entre les {% javascripts bloc %} afin que l’Éditeur en contexte puisse lire la page Web :

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId : '00000000000000004158e0858d2fa45c',
        centre de données : « eu »,
        origine: 'Phrase',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

L'application Symfony est désormais connectée à l'Éditeur en contexte.

Identifiant projet d'un projet se trouve dans les paramètres projet.

Identifiant compte se trouve dans Strings organisation paramètres.

Si nécessaire, configurez le centre de données américain pour activer le travail avec des points de terminaison américains :

window.PHRASEAPP_CONFIG = {
    projectId : "IDENTIFIANT DE VOTRE PROJET",
    accountId: "VOTRE IDENTIFIANT DE COMPTE",
    centre de données : « nous »,
};

Rechargez l’application et connectez-vous avec les informations d’identification Phrase pour lancer le processus de traduction directement sur la page Web.

Échantillon de code

Cette application de démonstration montre comment intégrer l'Éditeur en contexte à une application Symfony.

Configuration de l'Éditeur en contexte

Exposer les noms clés

Typiquement, une couche de vue restitue les traductions en passant le nom d'une chaîne traduisible (c'est-à-dire la clé) à une triée de méthode de traduction ou d'assistant de vue.

Exemple de code PHP :

$traductions = tableau(

  "page.headline" => "Some Headline",

  "page.link.label" => "Je suis un lien",

  "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 proprement dite :

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

Mise en forme

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

Utilisez cette mise en forme pour exposer des noms clés en lieu et place des traductions :

{{__phrase_NameOfYourKey__}}

Exemple :

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

Modifier la méthode de l'aide translate() afin d'exposer les noms de clé au format requis :

function translate($keyName) {

  if ($phraseModeEnabled) {

    retour « » ;

  } 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 pour utiliser dans les modèles.

Exemple :

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

Échapper aux noms clés et aux 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 du boîtier

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

window.PHRASEAPP_CONFIG = {

  autoMinuscule : faux

}

Personnaliser les décorateurs clés

Lorsque tu utilises 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, les moteurs de modèles côté client, y compris AngularJS et Ember.js) qui utilisent une syntaxe similaire, modifiez le préfixe et le suffixe du décorateur de l’Éditeur en contexte dans la configuration. Pour indiquer à l'Éditeur en contexte les décorateurs que l'analyseur doit rechercher, Ajoutez les valeurs de configuration suivantes avant l'extrait de JavaScript :

window.PHRASEAPP_CONFIG = {

  préfixe : '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

Si vous utilisez la gemme Phraseapp-éditeur en contexte-Ruby pour fournir la fonctionnalité Éditeur en contexte, 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 clé est ajusté dans le code personnalisé.

Activation et désactivation de l'Éditeur en contexte

Ce paramètre n'est disponible que si vous utilisez la joie Phraseapp-éditeur en contexte-Ruby.

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 de l'extrait de code 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 signal à une variable d'environnement :

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

Réparation complète

Activer fullReparse si tu utilises l'Éditeur en contexte avec un framework JavaScript qui utilise un DOM virtuel tel que React. Cela permet une analyse correcte lorsque des modifications de DOM sont détectées :

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Assainir les sorties de 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é assainir.

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

Importer échapper à «lodash/escape»;

window.PHRASEAPP_CONFIG = {  

    assainir : échapper

}

Authentification unique

Si vous utilisez l'authentification unique et que vous souhaitez initialiser l'Éditeur en contexte avec SSO activé, Ajoutez la valeur de configuration suivante avant l'extrait de code JavaScript :

window.PHRASEAPP_CONFIG = {

  sso: {

    activé : vrai,
    
    fournisseur : 'saml',

    identifier: [insert_company_identifier]

  }

}

Pour obliger les utilisateurs à se connecter en utilisant SSO, définissez le paramètre appliqué :

window.PHRASEAPP_CONFIG = {

  sso: {

    appliqué : vrai

  }

}

Ancien Éditeur en contexte : Configuration

Installations Web Framework

Angulaire 2 (ngx-translate)

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

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

Configurer :

let config = {
  projectId: '<VOTRE_ID_PROJET>',
  phraseActivé : vrai,
  préfixe : « {{_____ »,
  suffixe : « _}} »,
  fullReparse: true
};

Identifiant projet d'un projet se trouve dans les paramètres projet.

Par défaut, l'analyseur de documents de l'éditeur convertit toutes les clés en minuscules. Si vous rencontrez des problèmes avec ce comportement et que vous souhaitez utiliser des clés sensibles à la casse au sein de l'éditeur, désactivez la fonction minuscule automatique :
```
let config = {
  // ...
  autoMinuscule : faux
}
```

Ajoutez ces extraits à l’application Angular :

app.component.ts

importer { initializePhraseAppEditor, PhraseAppCompiler} depuis 'ngx-translate-phraseapp'

let config = {
  projectId: '<VOTRE_ID_PROJET>',
  phraseActivé : vrai,
  préfixe : « {{_____ »,
  suffixe : « _}} »,
  fullReparse: true
};

initializePhraseAppEditor(config);

app.module.ts

importer { TranslateModule, TranslateLoader, TranslateCompiler } depuis '@ngx-translate/core';
importer { HttpClientModule, HttpClient } depuis '@angular/common/http';
importer { PhraseAppCompiler } depuis 'ngx-translate-phraseapp'

exporter fonction HttpLoaderFactory(http: HttpClient) {
  renvoyer le nouveau TranslateHttpLoader(http);
}

@NgModule({
  déclarations : [
    AppComponent
  ],
  importations : [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      chargeur : {
        fournir : TranslateLoader,
        useFactory : HttpLoaderFactory,
        deps: [HttpClient]
      },
      compilateur : {
        fournir : TranslateCompiler,
        useClass : PhraseAppCompiler
      }
    }),
  ],
  fournisseurs : [],
  bootstrap: [AppComponent]
})

Échantillon 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, procédez comme suit :

Installer angular-Phrase via Bower (ou télécharger manuellement) :
```
$ bower installer la Phrase angulaire
```
Ajouter le module Phrase angulaire à l’application AngularJS existante après avoir chargé le module Traduire angulairement :
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Configurer le module :
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
Identifiant projet d'un projet se trouve dans les paramètres projet. Cela 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>
```
Ouvrez l’application dans n’importe quel navigateur Web pour voir l’Éditeur en contexte appliqué à l’application. Se connecter avec tout utilisateur Phrase organisation.

Phrase angulaire sur GitHub

Échantillon de code

Cette application de démonstration pour Phrase angulaire montre comment localiser AngularJS avec traduction angulaire.

Django

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer le paquet django-Phrase avec pip :
```
$ pip installer Phrase django
```
Ajouter Phrase à la liste des applications installées :
```
INSTALLED_APPS = (

    « Phrase »,

)
```
Utiliser la balise modèle Phrase_i18n dans les modèles :
```
{% load phrase_i18n %}
```
Pour permettre à django-Phrase de remplacer les méthodes de traduction, charge Phrase_i18n après i18n.
Ajouter l’extrait de JavaScript à la mise en page :
```
{% phrase_javascript %}
```

Configurez l'Éditeur en contexte pour le projet avec les options suivantes :

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. Se connecter avec tout utilisateur Phrase organisation.

Code adaptateur Django sur GitHub

Échantillon de code

Cette application de démonstration montre comment intégrer l'Éditeur en contexte à une application Django.

Réagir (intl)

Note

Cette bibliothèque ne travail peut-être pas avec IE11 ou des navigateurs plus anciens. Ajoutez Babel au pipeline de compilation si un ancien support du navigateur 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 sera modifié.

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer le paquet via NPM :
```
npm install react-intl-phraseapp
```
ou construire à partir des sources :
```
npm run dist
```
```
npm install
```

Configurer :

let config = {
  projectId: '<VOTRE_ID_PROJET>',
  phraseActivé : vrai,
  préfixe : « [[__",
  suffix: "__]]",
  fullReparse: true
};

Identifiant projet d'un projet se trouve dans les paramètres projet.

Ajouter l’extrait à l’application réagir :

importer {initializePhraseAppEditor} depuis 'react-intl-phraseapp'

let config = {
  projectId: '<VOTRE_ID_PROJET>',
  phraseActivé : vrai,
  préfixe : « [[__",
  suffix: "__]]",
  fullReparse: true
};

initializePhraseAppEditor(config);

Trouve toutes les importations de FormattedMessage, et modifie la source de react-intl à react-intl-phraseapp.
```
importer {MessageFormaté} depuis 'react-intl-phraseapp'
```
Lancer des tests unitaires en plaisantant :
```
npm test
```

Échantillon de code

Cette démo 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, procédez comme suit :

Ajoutez la gemme phraseapp-éditeur en contexte-ruby à l’environnement avec lequel vous souhaitez utiliser l’Éditeur en contexte :
```
group :development do
  gem 'phraseapp-en-contexte-éditeur-Ruby'
 fin
```
et l'installer en exécutant la commande bundle :
```
$ bundle install
```
Installer la gemme phraseapp-éditeur en contexte-Ruby en exécutant le générateur Rails :
```
$ bundle exec Rails generate phraseapp_in_context_editor:install --accéder-authentifiant=VOTRE_ACCÉDER_AU_JETON --Identifiant du projet=VOTRE_Identifiant_PROJET
```
--access-token

Créez et gérez des authentifiants accéder dans paramètres profil ou via l'API Autorisations.

--project-id

Identifiant projet d'un projet se trouve dans les paramètres projet. Cela crée un fichier d’initialisation avec quelques options de configuration.
Ajoutez l’extrait JavaScript à la disposition de votre application dans la balise <head> en utilisant l’aide phraseapp_in_context_editor_js :
```
<tête>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Ouvrez l’application dans n’importe quel navigateur Web pour voir l’Éditeur en contexte appliqué à l’application. Se connecter avec tout utilisateur Phrase organisation.
Désactiver Turbolinks (si utilisé)

Turbolinks supprime tous les éléments d'interface utilisateur Éditeur en contexte 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" : "" %>>
```

Échantillon de code

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

Printemps

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

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

Pour effectuer toutes les traductions via Phrase, Ajoutez le haricot à l’application :

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Fournis l'aide JavaScript requise dans les modèles en exposant l'aide comme un haricot :

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

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

<tête>

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

</head>

Redémarrez l’application et se connecter avec informations d’identification utilisateur Phrase.

Exemple de code source application sur GitHub

Comment localiser des applications Spring comme un pro

Forfait Spring Boot Starter (fourni par ePages)

Symfony 2.x

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Créez un nouvel environnement dans lequel s’exécutera l’Éditeur en contexte. Dans l'exemple, le nouvel environnement est nommé traduction.

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

importations :

    - { ressource: config.yml }

paramètres :

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

Créer un contrôleur pour rendre accessible le navigateur d'environnement :

# web/app_translation.php

<?php

require_once __DIR__.'/../app/bootstrap.php.cache';

require_once __DIR__.'/../app/AppKernel.php';

utiliser Symfony\Component\HttpFoundation\Request;

$kernel = new AppKernel('traduction', faux);

$kernel->handle(Request::createFromGlobals())->send();

Remplacer la méthode de traduction standard sur commande d’exposer les noms de clé à l’Éditeur en contexte :

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

utiliser Symfony\Bundle\FrameworkBundle\Translation\Translator comme BaseTranslator ;

classe PhraseTranslator étend BaseTranslator

{

    fonction publique 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') {

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

            retourne strtr($this->catalogues[$locale]->get((string) $id, $domain), $paramètres) ;

        } else {

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

            retourner $prefix.$id.$suffix;

        }

    }

}

Ajouter l’extrait de 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. Se connecter avec tout utilisateur Phrase organisation.

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, procédez comme suit :

Créez un nouvel environnement dans lequel s’exécutera l’Éditeur en contexte. Dans l'exemple, le nouvel environnement est nommé traduction.

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

importations :

   - { ressource: config.yml }
```

Créer un contrôleur pour rendre accessible le navigateur d'environnement :

# web/app_translation.php

<?php

utiliser Symfony\Component\HttpFoundation\Request;

$loader = require __DIR__.'/../app/autoload.php';

$kernel = new AppKernel('traduction', vrai);

$kernel->loadClassCache();

$request = Request::createFromGlobals();

$response = $kernel->handle($request);

$response->send();

$kernel->terminate($request, $response);

Remplacer la méthode de traduction standard sur commande d’exposer les noms de clé à l’Éditeur en contexte :

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Traduction;

utiliser Symfony\Bundle\FrameworkBundle\Translation\Translator comme BaseTranslator ;

classe PhraseTranslator étend BaseTranslator

{

   fonction publique trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

   {

       $prefix = « » ;

       if (null === $domain) {

           $domaine = 'messages';

       }

       // Identifiant de retour de la clé de traduction avec pré- et suffixe pour PhraseApp

       retourner $prefix.$id.$suffix;

   }

}

Assure-toi que la classe est toujours remplacée lorsque le paquet est utilisé avec un passe 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

{

   processus de fonction publique(ContainerBuilder $container)

   {

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

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

   }

}

Si vous utilisez des passes de compilateur séparées, 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;

classe AppBundle étend Bundle

{

   build de fonction publique(ContainerBuilder $container)

   {

       parent::build($container);

       if($container->getParameter("kernel.environment") == 'translation') {

           $container->addCompilerPass(new OverrideServiceCompilerPass());

       };

   }

}

Ajouter l’extrait de 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. Se connecter avec tout utilisateur Phrase organisation.

Documentation de traduction Symfony

Vue I18n

Note

Vue I18n Phrase Éditeur en contexte prend en charge toutes les versions 8.17.5 et suivantes de Vue I18n. Cette bibliothèque peut travail avec les versions précédentes mais elles ne sont pas officiellement supportées et n'obtiendront aucune mise à jour spécifique ni correction de bugs.

Pour installer l'Éditeur en contexte dans cet environnement, procédez comme suit :

Installer le paquet avec le gestionnaire de paquets préféré :

# fil
Ajouter vue-i18n-Phrase-en-contexte-éditeur

# npm
npm installer l'éditeur vue-i18n-Phrase-en-contexte

ou charger avec CDN (enregistrer manuellement window['vue-i18n-Phrase-in-context-éditeur'] ) :

<script src="https://unpkg.com/vue-i18n-Phrase-in-context-éditeur/dist/vue-i18n-Phrase-in-context-éditeur.umd.min.js"></script>

Bootstrap (exemple) :

importer Vue depuis 'vue';
importer VueI18n depuis 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  Paramètres régionaux : process.env.VUE_APP_I18N_PARAmètres régionaux || 'fr',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'fr',
  messages : {
      bonjour : Bonjour le monde !
  }
});

nouvelle Vue({
  i18n,
  rendu : h => h(App)
}).$mount('#app');

Pour intégrer la bibliothèque :

Importez la bibliothèque Vue I18n Phrase Éditeur en contexte.
Créer nouvelle instance Éditeur en contexte Phrase, en passant l’instance Vue I18n comme premier argument et Phrase Config comme deuxième.

Options de configuration et exemples de méthodes.

Utilisation de l'ancien Éditeur en contexte

Mode Ajax

L'Éditeur en contexte prend en charge la manipulation d'Ajax et de DOM (via JavaScript) à l'aide d'observateurs de mutation.

Le mode Ajax peut poser des problèmes dans certains cas, et entraîner de graves problèmes de performances lors de l'utilisation de l'Éditeur en contexte. Pour désactiver le mode Ajax, Ajoutez la valeur de configuration suivante avant l'extrait de code JavaScript :

window.PHRASEAPP_CONFIG = {

  ajaxObservateur : faux

}

Mode de débogage

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forcer les paramètres régionaux

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 les paramètres régionaux actuellement affichés 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 si vous utilisez la joie Phraseapp-éditeur en contexte-Ruby.

Le rendu des clés avec l'Éditeur en contexte peut être exclu. Lorsque tu travailles avec Rails, les clés peuvent être ignorées pour des données telles que des messages d'erreur ou des clés format date et heure. Pour exclure que les clés soient gérées automatiquement par la gemme Phraseapp-éditeur en contexte-Ruby, Ajoutez un tableau des clés au fichier d'initialisation phraseapp_in_context_éditeur.rb . Les 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 modèles ne seront pas rendues accessibles à l'Éditeur en contexte et seront rendues normalement.