In-Context Editor (Strings)

Inhalte werden von Phrase Language AI maschinell aus dem Englischen übersetzt.

Verfügbar für

Team-, Professional-, Business- und Enterprise-Pläne

Kontaktiere den Vertrieb bei Fragen zur Lizenzierung.

Verfügbar für

Advanced- und Enterprise-Plan (Legacy)

Kontaktiere den Vertrieb bei Fragen zur Lizenzierung.

Der In-Context Editor ist dafür gedacht, Übersetzern zu helfen, effizienter zu arbeiten und eine Webseite direkt durch die Integration mit dem Strings Übersetzungseditor zu übersetzen.

Aktuell sind zwei Versionen verfügbar:

Der In-Context Editor:

Beinhaltet neue Funktionen (mehrsprachige Ansicht, Layout-Optionen, Batch-Aktionen, Kollaborationsfeatures usw.) und die Benutzeroberfläche vom Übersetzungseditor.
Der alte In-Context Editor.

Nach der Installation des In-Context Editors kann er an viele Technologien angepasst werden.

Installation des Strings In-Context Editors

Anforderungen

Um den In-Context Editor zu nutzen, benötigt die Anwendung:

Webbasierte Webseiten, Webanwendungen, mobile Seiten usw.
Übersetzer haben Zugriff auf den Webserver, auf dem der Editor läuft. Dies könnte bei Bedarf eine lokale Umgebung sein.
Eine Schlüssel-Wert-Lokalisierungsdateistruktur.

Webseiten mit extrahierten übersetzbaren Strings und einer Ansichtsschicht, die eine Schlüssel-Wert-Struktur zur Darstellung von Übersetzungen verwendet.
Schlüsselnamen, die der Ansichts- oder Vorlagenschicht zugänglich sind.
JavaScript-Snippet, das den Editor rendert.
Idealerweise eine dedizierte Umgebung für Übersetzungen. Dies kann ein Klon einer Staging-Umgebung sein und bietet, obwohl es anfangs mehr Arbeit erfordert, einen besseren Workflow und mehr Stabilität.

Wenn eine dedizierte Umgebung nicht möglich ist, kann eine bestehende Staging-Umgebung mit der Option genutzt werden, den In-Context Editor bei Bedarf zu aktivieren.

JavaScript-Snippet

Füge das JavaScript-Snippet in das Anwendungs-Layout ein.

Das Snippet enthält den Code, der benötigt wird, um:

Mit der Phrase Strings API zu kommunizieren.
Die Benutzeroberfläche zu rendern.
Login bereitzustellen.

Die Projekt-ID findest du in den Projekteinstellungen.

Die Konto-ID findest du in den Einstellungen der Strings-Organisation.

Beispiel:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Ändere diesen Namen nicht, damit die Konfiguration funktioniert
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Setze auf 'us' für das US-Datenzentrum
      prefix: '{{__', // Setze auf das Präfix für das Schlüsselformat in den Ansichtsvorlagen
      suffix: '__}}', // Setze auf das Suffix für das Schlüsselformat in den Ansichtsvorlagen
      disableShortcuts: false, // Setze auf auf true, um Tastenkombinationen zu deaktivieren
      autoLowercase: true, // Setze auf false, wenn Schlüssel Großbuchstaben enthalten
    };
  </script>
  <script type="module" async="" src="https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js"></script>

Web-Framework-Installationen

i18next

Hinweis

Der i18next Phrase In-Context Editor Post Processor unterstützt alle i18next-Versionen neuer als 19.5.1. Obwohl diese Bibliothek möglicherweise auch mit früheren Versionen funktioniert, werden diese nicht offiziell unterstützt und erhalten möglicherweise keine spezifischen Updates oder Fehlerbehebungen.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere die i18next-phrase-in-context-editor-post-processor Bibliothek mit dem bevorzugten Paketmanager:

# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor

Hinweis

Empfohlene Bibliotheksversionen sind 1.4.0 oder neuer.

oder lade sie über CDN:

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

Bootstrap (Beispiel):

import i18next from 'i18next';
import i18nextXHRBackend from 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // lade einige Übersetzungen aus dem i18next-gitbook-Repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // mach etwas bei der Initialisierung von i18next
    });

Um die Bibliothek zu integrieren:

Importiere PhraseInContextEditorPostProcessor aus der i18next-phrase-in-context-editor-post-processor Bibliothek.
Erstelle eine neue i18next Phrase In-Context Editor Post Processor Instanz und übergebe PhraseConfig als Argument.
Übergebe die neu erstellte i18next Phrase In-Context Editor Post Processor Instanz an die i18next use Methode.
Füge den phraseInContextEditor String zur postProcess Array-Eigenschaft hinzu (übergeben im Konfigurationsobjekt der i18next init Methode).

Füge das ICE JavaScript-Snippet zur i18next-Instanz im Setup hinzu.

Beispiel-Snippet:

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

Hinweis

accountId muss bereitgestellt werden, um ICE erfolgreich einzurichten. Die Account-ID findest du in den Einstellungen der Strings-Organisation.

Falls erforderlich, konfiguriere das useOldICE Attribut, um auf das alte ICE umzuschalten:

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

Starte den In-Context Editor.
Öffne die Anwendung in einem Webbrowser, um den In-Context Editor anzuzeigen. Melde dich mit einem beliebigen Phrase-Organisations-User an.

Konfigurationsoptionen und Beispielmethoden.

Vue I18n

Hinweis

Der Vue I18n Phrase In-Context Editor unterstützt alle Vue I18n Versionen 8.17.5 und neuer. Diese Bibliothek kann mit früheren Versionen funktionieren, aber sie werden nicht offiziell unterstützt und erhalten keine spezifischen Updates oder Bugfixes.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere das neueste Paket mit deinem bevorzugten Paketmanager:

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

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

oder lade es mit CDN (manuell registrieren 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 (Beispiel):

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

Um die Bibliothek zu integrieren:

Importiere die Vue I18n Phrase In-Context Editor-Bibliothek.
Erstelle eine neue Instanz des Vue I18n Phrase In-Context Editor, indem du die Vue I18n-Instanz als erstes Argument und die Phrase Config als zweites Argument übergibst.

Konfigurationsoptionen und Beispielmethoden.

React (intl)

Hinweis

Diese Bibliothek funktioniert möglicherweise nicht mit IE11 oder älteren Browsern. Füge Babel zur Build-Pipeline hinzu, wenn Unterstützung für ältere Browser erforderlich ist.

Diese Bibliothek erbt gemeinsame Komponenten der react-intl-Pakete. Wenn Phrase durch Aufruf von initializePhraseAppEditor aktiviert wird, ändert sich das Verhalten der Komponenten.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere das neueste Paket über NPM:
```
npm install react-intl-phraseapp
```
oder baue es aus dem Quellcode:
```
npm run dist
```
```
npm install
```

Konfigurieren:

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

Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Account-ID findest du in den Strings-Organisationseinstellungen.

Füge das Snippet zur React-App hinzu:

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

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

initializePhraseAppEditor(config);

Finde alle Importe von FormattedMessage und ändere die Quelle von react-intl zu react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Führe Unit-Tests mit Jest aus:
```
npm test
```

Codebeispiel

Dieses Demo zeigt eine Integration des Phrase In-Context-Editors mit react-intl.

Angular 2 (ngx-translate)

Voraussetzungen

Melde dich an für ein Phrase Strings-Konto.
Verwende das ngx-translate Modul für die Lokalisierung in Angular 2-Anwendungen.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installation mit NPM:
```
npm install ngx-translate-phraseapp
```

Konfigurieren:

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

let config: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Account-ID findest du in den Strings-Organisationseinstellungen.

Falls erforderlich, konfiguriere das useOldICE Attribut, um auf das alte ICE umzuschalten:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  useOldICE: true,
};

initializePhraseAppEditor(config);

Falls erforderlich, füge die US-spezifischen URLs hinzu, um über das US-Rechenzentrum zu arbeiten:

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

Standardmäßig konvertiert der Dokumentenparser des Editors alle Schlüssel in Kleinbuchstaben. Wenn du Probleme mit diesem Verhalten hast und im Editor groß- und kleinsensitiven Schlüssel verwenden möchtest, deaktiviere die automatische Kleinbuchstaben-Funktion:
```
let config = {
  // ...
  autoLowercase: false
}
```

Füge diese Snippets zur Angular-App hinzu:

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]
})

Codebeispiel

Diese Demo-App zeigt eine Integration des In-Context-Editors mit Angular und ngx-translate.

Ruby on Rails (i18n)

Hinweis

Diese Bibliothek funktioniert möglicherweise nicht direkt in älteren Browsern oder Microsoft IE11. Füge Babel zur Build-Pipeline hinzu, wenn diese Browser unterstützt werden müssen.

Voraussetzungen

Melde dich an für ein Phrase Strings-Konto.
Nutze das ausgezeichnete i18n gem, das auch von Rails verwendet wird.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Füge die phraseapp-in-context-editor-ruby Bibliothek zur gewünschten Umgebung hinzu, indem du eine der folgenden Methoden verwendest:
- Über Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Über Bundler
  
  Füge es der Gemfile hinzu:
```
gem 'phraseapp-in-context-editor-ruby
```
- Baue direkt aus dem Quellcode, um die neueste und beste Version zu erhalten:
```
bundle && gem build
```
Erstelle die Initialisierungsdatei, indem du den Rails Generator ausführst:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Account-ID findest du in den Strings-Organisationseinstellungen.
Füge das Ruby-Snippet zum Anwendungs-Layout app/views//layouts/application.html.erb hinzu:
```
<%= load_in_context_editor %>
```

Füge die folgende Konfiguration zum Initialisierer /config/initializers/phraseapp_in_context_editor.rb hinzu:

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

Falls erforderlich, setze das US-Datenzentrum, um mit US-Endpunkten zu arbeiten:

  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "us"

Öffne die Anwendung in einem beliebigen Webbrowser, um den In-Context Editor in der App zu sehen. Melde dich mit einem beliebigen Phrase-Organisations-User an.

Codebeispiel

Dieses Demo zeigt eine Integration des Phrase In-Context Editors mit react-i18next.

Django

Voraussetzungen

Melde dich an für ein Phrase Strings-Konto.
Nutze das Django Framework für Python.

Hinweis

Die alte Version des ICE ist seit Version 2.0.0 nicht mehr verfügbar.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere das django-phrase Paket mit pip:
```
$ pip install django-phrase
```
Füge Phrase zur Liste der installierten Apps hinzu:
```
INSTALLED_APPS = (

    'phrase',

)
```
Füge die folgenden Template-Snippets zur Layout-Datei templates/base_generic.html oder einer gleichwertigen hinzu:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Verwende das phrase_i18n Template-Tag in Templates (zum Beispiel, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Füge die folgende Konfiguration zu settings.py hinzu:

    # Phrase In-Context Editor Einstellungen
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Setze deine eigene Account-ID
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Setze deine eigene Projekt-ID
    PHRASE_DATACENTER = "eu"  # Wähle dein Datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Account-ID findest du in den Strings-Organisationseinstellungen.

Bei Problemen ist es möglich, das JavaScript-Snippet manuell zu integrieren.

Öffne die Anwendung in einem beliebigen Webbrowser, um den In-Context Editor in der App zu sehen. Melde dich mit einem beliebigen Phrase-Organisations-User an.

Django-Adapter-Code auf GitHub

Codebeispiel

Diese Demo-Anwendung zeigt, wie man den In-Context-Editor in eine Django-Anwendung integriert.

Flask

Voraussetzungen

Melde dich an für ein Phrase Strings-Konto.
Verwende das Flask-Framework für Python.

Hinweis

Die alte Version des ICE ist seit Version 2.0.0 nicht mehr verfügbar.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere das Flask-Phrase Paket mit pip:
```
pip install Flask-Phrase
```

Füge die folgende Konfiguration zur Flask-App hinzu (app.config oder config.py):

PHRASEAPP_ENABLED = True
PHRASEAPP_PREFIX = '{{__'
PHRASEAPP_SUFFIX = '__}}'

Der App-Code sollte ungefähr so aussehen:

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)

Füge das Phrase JavaScript snippet zur Basislayout-Datei mit dem folgenden Tag hinzu (es sollte im Bereich der Template-Datei sein):

<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://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Account-ID findest du in den Strings-Organisationseinstellungen.

Falls erforderlich, setze das US-Datenzentrum, um mit US-Endpunkten zu arbeiten:

window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "YOUR-ACCOUNT-ID",
    datacenter: "us",
};

Wenn PHRASEAPP_ENABLED = True gesetzt ist, ändert das Paket die zurückgegebenen Werte der Übersetzungsfunktionen, um ein Format zu präsentieren, das der ICE lesen kann. Wenn auf False gesetzt, wird auf die Standardfunktionen von Flask-Babel's gettext zurückgefallen.

Codebeispiel

Diese Demo-Anwendung zeigt, wie man den In-Context-Editor mit einer Flask-Anwendung integriert.

Symfony 5.x

Voraussetzungen

Melde dich an für ein Phrase Strings-Konto.
Verwende das Symfony-Framework für PHP.

Hinweis

Version 2.0.0 unterstützt Symfony 5 und höher. Wenn du Symfony 2, 3 oder 4 verwendest, schau dir die alte Version des ICE an.

Um den In-Context-Editor mit der Symfony-Anwendung zu integrieren, folge diesen Schritten:

Kopiere PhraseStringsInContextEditor und deren Inhalt in den /src/Service-Ordner des Repositories oder an den gewünschten Ort. Wenn du es woanders platzierst, passe den Namespace entsprechend an.

Passe config/services.yaml an, um den translator-Service mit dem Adapter von Phrase zu dekorieren:

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

Füge das folgende JavaScript-Snippet zur Basis- oder Twig-Layout-Vorlage zwischen den {% block javascripts %} ein, damit der In-Context-Editor die Webseite lesen kann:

<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://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

Die Symfony-Anwendung ist jetzt mit dem In-Context-Editor verbunden.

Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Account-ID findest du in den Strings-Organisationseinstellungen.

Falls erforderlich, setze das US-Datenzentrum, um mit US-Endpunkten zu arbeiten:

window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "YOUR-ACCOUNT-ID",
    datacenter: "us",
};

Lade die Anwendung neu und melde dich mit deinen Phrase-Zugangsdaten an, um den Übersetzungsprozess direkt auf der Webseite zu starten.

Codebeispiel

Diese Demo-Anwendung zeigt, wie man den In-Context-Editor in eine Symfony-Anwendung integriert.

Einrichtung des In-Context-Editors

Schlüssel-Namen offenlegen

Normalerweise rendert eine View-Schicht Übersetzungen, indem sie den Namen eines übersetzbaren Strings (also den Schlüssel) an eine Art Übersetzungsmethode oder View-Helfer übergibt.

Beispiel-PHP-Code:

$translations = array(

  "page.headline" => "Einige Überschrift",

  "page.link.label" => "Ich bin ein Link",

  "page.link.hint" => "Klick mich"

)

function translate($keyName) {

  return $translations[$keyName];

}

Die Vorlage würde dann die Ausgabe der translate()-Methode anstelle des tatsächlich übersetzten Strings rendern:

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

Formatierung

Es muss in der Vorlage angegeben werden, für welche Schlüssel Übersetzungen gerendert werden sollen.

Verwende dieses Format, um Schlüssel-Namen anstelle von Übersetzungen offenzulegen:

{{__phrase_NameOfYourKey__}}

Beispiel:

Wenn der Schlüssel page.headline in der Vorlage ist, rendere den String {{__phrase_page.headline__}}.

Modifiziere die translate()-Helfermethode so, dass die Schlüssel-Namen im erforderlichen Format offengelegt werden:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Je nach Framework können Übersetzungshelfer im Code überschrieben oder eine ummantelte Version erstellt werden, die in Vorlagen verwendet wird.

Beispiel:

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

Schlüssel-Namen und Sonderzeichen escapen

Stelle sicher, dass Schlüssel-Namen in ein erkennbares Format umgewandelt werden.

Zeichen in der folgenden Liste müssen escapt werden, wenn sie dem In-Context-Editor ausgesetzt werden:

Zeichen	Escape-Sequenz	Beispiel
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} wird zu {{__phrase__key[[[[[[html_open]]]]]]__}}
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} wird zu {{__phrase__[[[[[[html_close]]]]]]key__}}

Automatische Groß-/Kleinschreibungskonvertierung

Standardmäßig konvertiert der Dokumentparser des In-Context-Editors alle Schlüssel in Kleinbuchstaben. Wenn du Probleme mit diesem Verhalten hast und groß-/kleinsensitiven Schlüssel im In-Context-Editor verwenden möchtest, deaktiviere die automatische Kleinbuchstabenfunktion:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Anpassen der Schlüssel-Dekoratoren

Wenn du den In-Context-Editor verwendest, werden Schlüsselnamen typischerweise mit Dekoratoren (standardmäßig geschweifte Klammern) umschlossen, um eindeutige Identifikationsschlüssel im Kontext eines Dokuments zu erzeugen:

{{__phrase_YOUR.KEY__}}

Wenn dies Konflikte mit anderen Bibliotheken (z.B. clientseitige Template-Engines wie AngularJS und Ember.js) verursacht, die eine ähnliche Syntax verwenden, ändere das Dekorator-Präfix und -Suffix des In-Context-Editors in der Einrichtung. Um dem In-Context-Editor mitzuteilen, nach welchen Dekoratoren der Parser suchen soll, füge vor dem JavaScript-Snippet folgende Konfigurationswerte hinzu:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Dies sagt dem Editor, nach Tags zu suchen, die mit [[__ beginnen und mit __]] enden:

[[__phrase_YOUR.KEY__]]

Wenn du das phraseapp-in-context-editor-ruby gem verwendest, um die Funktionalität des In-Context-Editors bereitzustellen, stelle sicher, dass die Dekoratoren konfiguriert sind:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Wenn du das Gem nicht verwendest, stelle sicher, dass das Muster zur Schlüsselname-Exposition im benutzerdefinierten Code angepasst ist.

Aktivieren und Deaktivieren des In-Context-Editors

Diese Einstellung ist nur verfügbar, wenn du das phraseapp-in-context-editor-ruby gem verwendest.

Der In-Context-Editor ist standardmäßig deaktiviert.

Der In-Context-Editor kann explizit aktiviert oder deaktiviert werden. Dies beeinflusst die Einbindung des JavaScript-Snippets (bei Verwendung des View-Helpers) und die Darstellung der dekorierten Schlüsselnamen in Ansichten:

PhraseApp::InContextEditor.enabled = true|false

Beispiel für das Binden des Flags an eine Umgebungsvariable:

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

Vollständiges Reparsing

Aktiviere fullReparse, wenn du den In-Context-Editor mit einem JavaScript-Framework wie React nutzt, das Virtual DOM verwendet. Dies ermöglicht ein korrektes Reparsing, wenn DOM-Änderungen erkannt werden:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Ausgabe für Webseite bereinigen

Der In-Context-Editor kann so konfiguriert werden, dass Übersetzungen vor dem Einfügen in die Webseite geändert oder bereinigt werden, indem eine Funktion zur sanitize-Eigenschaft bereitgestellt wird.

Die Funktion akzeptiert die Übersetzungszeichenkette als erstes Argument und sollte eine Zeichenkette zurückgeben:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Single Sign-On

Wenn du Single Sign-On verwendest und den In-Context-Editor mit aktiviertem SSO initialisieren möchtest, füge den folgenden Konfigurationswert vor dem JavaScript-Snippet hinzu:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Um zu verlangen, dass User sich mit SSO anmelden, setze den enforced-Parameter:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Alter In-Context-Editor: Einrichtung

Web-Framework-Installationen

Angular 2 (ngx-translate)

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installation mit NPM:
```
npm install ngx-translate-phraseapp
```

Konfigurieren:

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

Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Standardmäßig konvertiert der Dokumentenparser des Editors alle Schlüssel in Kleinbuchstaben. Wenn du Probleme mit diesem Verhalten hast und im Editor groß- und kleinsensitiven Schlüssel verwenden möchtest, deaktiviere die automatische Kleinbuchstaben-Funktion:
```
let config = {
  // ...
  autoLowercase: false
}
```

Füge diese Snippets zur Angular-App hinzu:

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]
})

Codebeispiel

Diese Demo-App zeigt eine Integration des In-Context-Editors mit Angular und ngx-translate.

AngularJS (angular-translate)

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere angular-phrase über Bower (oder lade es manuell herunter):
```
$ bower install angular-phrase
```
Füge das angular-phrase Modul zur bestehenden AngularJS-Anwendung hinzu, nachdem das angular-translate Modul geladen wurde:
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Konfiguriere das Modul:
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
Projekt-ID eines Projekts findest du in den Projekteinstellungen. Dies erstellt eine Initialisierungsdatei mit einigen Konfigurationsoptionen.
Füge die phrase-javascript Direktive in die Anwendung innerhalb des <head> Tags ein:
```
<phrase-javascript></phrase-javascript>
```
Öffne die Anwendung in einem beliebigen Webbrowser, um den In-Context Editor in der App zu sehen. Melde dich mit einem beliebigen Phrase-Organisations-User an.

angular-phrase auf GitHub

Codebeispiel

Diese Demo-Anwendung für angular-phrase zeigt, wie man AngularJS mit angular-translate lokalisiert.

Django

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere das django-phrase Paket mit pip:
```
$ pip install django-phrase
```
Füge Phrase zur Liste der installierten Apps hinzu:
```
INSTALLED_APPS = (

    'phrase',

)
```
Verwende das phrase_i18n-Template-Tag in Templates:
```
{% load phrase_i18n %}
```
Um django-phrase zu erlauben, Übersetzungsmethoden zu überschreiben, lade phrase_i18n nach i18n.
Füge das JavaScript-Snippet zum Layout hinzu:
```
{% phrase_javascript %}
```

Konfiguriere den In-Context-Editor für das Projekt mit diesen Optionen:

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

Öffne die Anwendung in einem beliebigen Webbrowser, um den In-Context Editor in der App zu sehen. Melde dich mit einem beliebigen Phrase-Organisations-User an.

Django-Adapter-Code auf GitHub

Codebeispiel

Diese Demo-Anwendung zeigt, wie man den In-Context-Editor in eine Django-Anwendung integriert.

React (intl)

Hinweis

Diese Bibliothek funktioniert möglicherweise nicht mit IE11 oder älteren Browsern. Füge Babel zur Build-Pipeline hinzu, wenn Unterstützung für ältere Browser erforderlich ist.

Diese Bibliothek erbt gemeinsame Komponenten der react-intl-Pakete. Wenn Phrase durch Aufruf von initializePhraseAppEditor aktiviert wird, ändert sich das Verhalten der Komponenten.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere das Paket über NPM:
```
npm install react-intl-phraseapp
```
oder baue es aus dem Quellcode:
```
npm run dist
```
```
npm install
```

Konfigurieren:

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

Projekt-ID eines Projekts findest du in den Projekteinstellungen.

Füge das Snippet zur React-App hinzu:

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

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

initializePhraseAppEditor(config);

Finde alle Importe von FormattedMessage und ändere die Quelle von react-intl zu react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Führe Unit-Tests mit Jest aus:
```
npm test
```

Codebeispiel

Dieses Demo zeigt eine Integration des Phrase In-Context-Editors mit react-intl.

Ruby on Rails (i18n)

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Füge das phraseapp-in-context-editor-ruby gem zu der Umgebung hinzu, in der du den In-Context Editor verwenden möchtest:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
und installiere es, indem du den Bundle-Befehl ausführst:
```
$ bundle install
```
Installiere das phraseapp-in-context-editor-ruby gem, indem du den Rails-Generator ausführst:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

Erstelle und verwalte Zugriffstokens in den Profileinstellungen oder über die Authorizations API.

--project-id

Projekt-ID eines Projekts findest du in den Projekteinstellungen. Dies erstellt eine Initialisierungsdatei mit einigen Konfigurationsoptionen.
Füge das JavaScript-Snippet in dein Anwendungs-Layout innerhalb des <head> Tags hinzu, indem du den phraseapp_in_context_editor_js Helfer verwendest:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Öffne die Anwendung in einem beliebigen Webbrowser, um den In-Context Editor in der App zu sehen. Melde dich mit einem beliebigen Phrase-Organisations-User an.
Deaktiviere Turbolinks (falls verwendet)

Turbolinks entfernt alle In-Context Editor UI-Elemente von der Seite bei jedem Seitenaufruf.

Füge das Attribut data-no-turbolink zum <body>-Tag hinzu:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Codebeispiel

Dieses Demo zeigt eine Integration des Phrase In-Context Editors mit react-i18next.

Spring

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Stelle sicher, dass das Package com.phraseapp.incontexteditor in der App verfügbar ist.
Setze die korrekte Projekt-ID und passe die anderen Parameter in PhraseAppConfiguration.class an.

Um alle Übersetzungen über Phrase darzustellen, füge den Bean zur Anwendung hinzu:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Stelle den benötigten JavaScript-Helper in den Templates bereit, indem du den Helper als Bean bereitstellst:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Füge das <script>-Tag in deine Templates innerhalb des <head>-Tags jeder Seite ein:

<head>

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

</head>

Starte die Anwendung neu und melde dich mit den Phrase-User-Anmeldedaten an.

Beispielanwendungs-Quellcode auf GitHub

Wie man Spring-Anwendungen wie ein Profi lokalisiert

Spring Boot Starter-Package (bereitgestellt von ePages)

Symfony 2.x

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Erstelle eine neue Umgebung, in der der In-Context Editor laufen wird. Im Beispiel wird die neue Umgebung translation genannt.

Erstelle eine neue Konfigurationsdatei:
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

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

Erstelle einen Controller, um den Umgebungsbrowser zugänglich zu machen:

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

Überschreibe die Standardübersetzungsmethode, um die Schlüssel im In-Context-Editor sichtbar zu machen:

# 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') {

            // Übersetzte Werte für 'routes'-Domain zurückgeben

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

        } else {

            // PhraseApp-Übersetzungsschlüssel für alle anderen Domains zurückgeben

            return $prefix.$id.$suffix;

        }

    }

}

Füge das JavaScript-Snippet zum Layout hinzu:

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

Öffne die Anwendung in einem beliebigen Webbrowser, um den In-Context Editor in der App zu sehen. Melde dich mit einem beliebigen Phrase-Organisations-User an.

Symfony Translation Documentation

Symfony 2.x Adapter-Code auf GitHub

Symfony 3.x

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Erstelle eine neue Umgebung, in der der In-Context Editor laufen wird. Im Beispiel wird die neue Umgebung translation genannt.

Erstelle eine neue Konfigurationsdatei:
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

Erstelle einen Controller, um den Umgebungsbrowser zugänglich zu machen:

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

Überschreibe die Standardübersetzungsmethode, um die Schlüssel im In-Context-Editor sichtbar zu machen:

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

       }

       // Rückgabe der ID des Übersetzungsschlüssels mit Vor- und Nachsatz für PhraseApp

       return $prefix.$id.$suffix;

   }

}

Stelle sicher, dass die Klasse immer überschrieben wird, wenn das Bundle mit einem Compiler-Pass verwendet wird:

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

   }

}

Wenn du separate Compiler-Passes verwendest, registriere sie in der build()-Methode der Bundle-Klasse:

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

       };

   }

}

Füge das JavaScript-Snippet zum Layout hinzu:

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

Öffne die Anwendung in einem beliebigen Webbrowser, um den In-Context Editor in der App zu sehen. Melde dich mit einem beliebigen Phrase-Organisations-User an.

Symfony Translation Documentation

Vue I18n

Hinweis

Der Vue I18n Phrase In-Context Editor unterstützt alle Vue I18n Versionen 8.17.5 und neuer. Diese Bibliothek könnte mit früheren Versionen funktionieren, aber sie werden nicht offiziell unterstützt und erhalten keine spezifischen Updates oder Bugfixes.

Um den In-Context-Editor in dieser Umgebung zu installieren, folge diesen Schritten:

Installiere das Paket mit deinem bevorzugten Paketmanager:

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

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

oder lade es mit CDN (manuell registrieren 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 (Beispiel):

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

Um die Bibliothek zu integrieren:

Importiere die Vue I18n Phrase In-Context Editor-Bibliothek.
Erstelle eine neue Instanz des Vue I18n Phrase In-Context Editor, indem du die Vue I18n-Instanz als erstes Argument und die Phrase Config als zweites Argument übergibst.

Konfigurationsoptionen und Beispielmethoden.

Den alten In-Context Editor verwenden

Ajax-Modus

Der In-Context Editor unterstützt Ajax und DOM-Manipulation (z.B. über JavaScript) mithilfe von Mutationsbeobachtern.

Der Ajax-Modus kann in einigen Fällen Probleme verursachen und zu erheblichen Leistungsproblemen führen, wenn der In-Context Editor verwendet wird. Um den Ajax-Modus zu deaktivieren, füge den folgenden Konfigurationswert vor dem JavaScript-Snippet hinzu:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Debug-Modus

Um den Debug-Modus zu aktivieren, füge den folgenden Konfigurationswert vor dem JavaScript-Snippet hinzu:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Eine Sprache erzwingen

Um beim Starten des In-Context-Editors explizit eine bestimmte Sprache festzulegen, verwende die forceLocale-Einstellung. Das ist nützlich, um die Sprache, die aktuell in deiner Webanwendung angezeigt wird, auch im In-Context-Editor vorab auszuwählen:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Ignorierte Keys

Diese Einstellung ist nur verfügbar, wenn du das phraseapp-in-context-editor-ruby gem verwendest.

Keys können davon ausgeschlossen werden, im In-Context-Editor gerendert zu werden. Beim Arbeiten mit Rails können Keys für Daten wie Fehlermeldungen oder Datums- und Zeitformat-Keys ignoriert werden. Um Keys davon auszuschließen, automatisch vom phraseapp-in-context-editor-ruby gem verarbeitet zu werden, füge ein Array der Keys zur phraseapp_in_context_editor.rb-Initialisierungsdatei hinzu. Platzhalter können ebenfalls verwendet werden:

PhraseApp::InContextEditor.configure do |config|

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

end

Keys, die mit einem dieser Muster übereinstimmen, werden dem In-Context-Editor nicht zugänglich gemacht und normal gerendert.