Editor contestuale di Strings (Strings)

Contenuti tradotti automaticamente dall'inglese con Phrase Language AI.

Disponibile per

Piani Team, Professional, Business, Enterprise e Software UI/UX

Mettiti in contatto con il reparto vendite per dubbi relativi alle licenze.

Disponibile per

Piano Advanced ed Enterprise (legacy)

Mettiti in contatto con il reparto vendite per dubbi relativi alle licenze.

L'editor contestuale di Strings è progettato per aiutare i traduttori a svolgere il lavoro in modo più efficiente e a tradurre una pagina web attraverso l'integrazione diretta con l'editor di traduzione.

Attualmente sono disponibili due versioni:

L'editor contestuale di Strings:

Include nuove funzionalità (vista multilingue, opzioni di layout, azioni in blocco, funzionalità di collaborazione, ecc.) e l'interfaccia utente dell'editor di traduzione.
Il vecchio editor contestuale di Strings.

Dopo aver installato l'editor contestuale di Strings, è possibile personalizzarlo per lavorare con molte tecnologie.

Installazione dell'editor contestuale di Strings

Requisiti

Per utilizzare l'editor contestuale di Strings, l'applicazione richiede:

Siti web basati sul web, applicazioni web, siti mobile, ecc.
I traduttori hanno accesso al server web che esegue l'editor. Se necessario, può trattarsi di un ambiente locale.
Una struttura di file di localizzazione chiave-valore.

Siti web con stringhe traducibili estratte e un livello di visualizzazione che utilizza una struttura chiave-valore per visualizzare le traduzioni.
Nomi delle chiavi esposti al livello di visualizzazione o di template.
Snippet JavaScript che esegue il rendering dell'editor.
Idealmente, un ambiente dedicato per le traduzioni. Questo può essere un clone di un ambiente di staging e, sebbene richieda più lavoro per la configurazione iniziale, offre un flusso di lavoro migliore e maggiore stabilità.

Se un ambiente dedicato non è possibile, è possibile utilizzare un ambiente di staging esistente con l'opzione di abilitare l'editor contestuale di Strings secondo necessità.

Snippet JavaScript

Includere lo snippet JavaScript nel layout dell'applicazione.

Lo snippet include il codice necessario per:

Comunicare con la Phrase Strings API.
Visualizza l'interfaccia utente.
Fornire l'accesso.

Project ID si trova nelle impostazioni del progetto.

Account ID si trova nelle impostazioni dell'organizzazione Strings.

Campione:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId: ID ACCOUNT
      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>

Installazioni di framework web

i18next

Nota

Il post-processore i18next Phrase In-Context Editor supporta tutte le versioni di i18next successive alla 19.5.1. Sebbene questa libreria possa funzionare anche con versioni precedenti, queste non sono ufficialmente supportate e potrebbero non ricevere aggiornamenti specifici o correzioni di bug.

Per installare l'editor In-Context in questo ambiente, seguire questi passaggi:

Installare la libreria i18next-phrase-in-context-editor-post-processor con il gestore di pacchetti preferito:

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

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

Nota

Le versioni della libreria consigliate sono 1.4.0 o successive.

o caricarla tramite CDN:

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

Bootstrap (esempio):

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

Per integrare la libreria:

Importa PhraseInContextEditorPostProcessor dalla libreria i18next-phrase-in-context-editor-post-processor.
Crea una nuova istanza di i18next Phrase In-Context Editor Post Processor, passando PhraseConfig come argomento.
Passa l'istanza di i18next Phrase In-Context Editor Post Processor appena creata al metodo use di i18next.
Aggiungi la stringa phraseInContextEditor alla proprietà dell'array postProcess (passata all'interno dell'oggetto di configurazione del metodo init di i18next).

Aggiungi lo snippet JavaScript ICE all'istanza i18next nella configurazione.

Snippet di esempio:

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

Nota

accountId deve essere fornito per configurare correttamente ICE. L'ID account si trova nelle impostazioni dell'organizzazione Strings.

Se necessario, configura l'attributo useOldICE per passare al vecchio ICE:

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

Avvia l'editor contestuale di Strings.
Apri l'applicazione in un browser web per visualizzare l'editor contestuale di Strings. Accedi con un qualsiasi utente dell'organizzazione Phrase.

Opzioni di configurazione e metodi di esempio.

Vue I18n

Nota

Vue I18n Phrase In-Context Editor supporta tutte le versioni di Vue I18n 8.17.5 e successive. Questa libreria potrebbe funzionare con versioni precedenti, ma non sono ufficialmente supportate e non riceveranno aggiornamenti specifici o correzioni di bug.

Per installare l'editor In-Context in questo ambiente, seguire questi passaggi:

Installa il pacchetto più recente con il gestore di pacchetti preferito:

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

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

o carica tramite CDN (registra manualmente 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 (esempio):

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

Per integrare la libreria:

Importa la libreria Vue I18n Phrase In-Context Editor.
Crea una nuova istanza di Vue I18n Phrase In-Context Editor, passando l'istanza di Vue I18n come primo argomento e Phrase Config come secondo.

Opzioni di configurazione e metodi di esempio.

React (intl)

Nota

Questa libreria potrebbe non funzionare con IE11 o browser più vecchi. Aggiungi Babel alla pipeline di compilazione se è richiesto il supporto per browser più vecchi.

Questa libreria eredita componenti comuni dei pacchetti react-intl. Se Phrase è abilitato chiamando initializePhraseAppEditor, il comportamento dei componenti cambierà.

Per installare l'editor contestuale di Strings in questo ambiente, seguire questi passaggi:

Installa il pacchetto più recente tramite NPM:
```
npm install react-intl-phraseapp
```
o compila dal codice sorgente:
```
npm run dist
```
```
npm install
```

Configura

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

L'ID progetto di un progetto si trova nelle impostazioni del progetto.

L'ID account si trova nelle impostazioni dell'organizzazione Strings.

Aggiungi lo snippet all'app 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);

Trova tutte le importazioni di FormattedMessage e cambia la sorgente da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Esegui i test unitari utilizzando jest:
```
npm test
```

Campione di codice

Questa demo mostra un'integrazione dell'editor contestuale di Strings con react-intl.

Angular 2 (ngx-translate)

Prerequisiti

Registrati per un account Phrase Strings.
Utilizza il modulo ngx-translate per la localizzazione nelle applicazioni Angular 2.

Per installare l'editor contestuale di Strings in questo ambiente, seguire questi passaggi:

Installa con NPM:
```
npm install ngx-translate-phraseapp
```

Configura

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

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

L'ID progetto di un progetto si trova nelle impostazioni del progetto.

L'ID account si trova nelle impostazioni dell'organizzazione Strings.

Se necessario, configura l'attributo useOldICE per passare al vecchio ICE:

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


initializePhraseAppEditor(config);

Se necessario, aggiungi gli URL specifici per gli Stati Uniti per consentire il funzionamento tramite il data center degli Stati Uniti:

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

Per impostazione predefinita, il parser di documenti dell'editor converte tutte le chiavi in minuscolo. Se riscontri problemi con questo comportamento e desideri utilizzare chiavi sensibili alle maiuscole all'interno dell'editor, disabilita la funzione di minuscolo automatico:
```
let config = {
  
  autoLowercase: false
}
```

Aggiungi questi snippet all'app 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: {
        Indica: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Indica: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    
  ],
  providers: [],
  bootstrap: [AppComponent]

Campione di codice

Questa demo app mostra un'integrazione dell'editor In-Context con Angular e ngx-translate.

Ruby on Rails (i18n)

Nota

Questa libreria potrebbe non funzionare immediatamente per i browser più datati o per Microsoft IE11. Aggiungi Babel alla pipeline di build se tali browser devono essere supportati.

Prerequisiti

Registrati per un account Phrase Strings.
Usa l'eccellente gemma i18n utilizzata anche da Rails.

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Aggiungi la libreria phraseapp-in-context-editor-ruby all'ambiente desiderato utilizzando uno dei seguenti metodi:
- Tramite Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Tramite Bundler
  
  Aggiungila al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Esegui la build direttamente dal sorgente per ottenere la versione più recente e avanzata:
```
bundle && gem build
```
Crea il file di inizializzazione eseguendo il generatore di Rails:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
L'ID del progetto si trova nelle impostazioni del progetto.

L'ID account si trova nelle impostazioni dell'organizzazione Strings.
Aggiungi lo snippet Ruby al layout dell'applicazione app/views/layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Aggiungi la seguente configurazione all'inizializzatore /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"

Se necessario, imposta il data center statunitense per abilitare il lavoro con gli endpoint statunitensi:

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

Apri l'applicazione in un qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con un qualsiasi utente dell'organizzazione Phrase.

Campione di codice

Questa demo mostra un'integrazione dell'editor In-Context di Phrase con react-i18next.

Django

Prerequisiti

Registrati per un account Phrase Strings.
Usa il framework Django per Python.

Nota

La vecchia versione dell'ICE non è disponibile a partire dalla versione 2.0.0.

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Installa il pacchetto django-phrase con pip:
```
$ pip install django-phrase
```
Aggiungi Phrase all'elenco delle app installate:
```
INSTALLED_APPS = (

    'phrase',
```
Aggiungi i seguenti snippet di template al file di layout templates/base_generic.html o equivalente:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Utilizza il tag template phrase_i18n nei template (ad esempio, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Aggiungi la seguente configurazione a settings.py:

    # Phrase In-Context Editor settings
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Set your own account id
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Set your own project id
    PHRASE_DATACENTER = "eu"  # Choose your datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

L'ID del progetto si trova nelle impostazioni del progetto.

L'ID account si trova nelle impostazioni dell'organizzazione Strings.

In caso di problemi, è possibile integrare manualmente lo snippet JavaScript.

Apri l'applicazione in un qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con un qualsiasi utente dell'organizzazione Phrase.

Codice dell'adattatore Django su GitHub

Campione di codice

Questa applicazione demo dimostra come integrare l'editor In-Context con un'applicazione Django.

Flask

Prerequisiti

Registrati per un account Phrase Strings.
Usa il framework Flask per Python.

Nota

La vecchia versione dell'ICE non è disponibile a partire dalla versione 2.0.0.

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Installa il pacchetto Flask-Phrase con pip:
```
pip install Flask-Phrase
```

Aggiungi la seguente configurazione all'app Flask (app.config o config.py):

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

Il codice dell'app dovrebbe essere simile a questo:

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)

Aggiungi lo snippet JavaScript di Phrase al file di layout di base con il seguente tag (dovrebbe essere inserito all'interno della sezione del file template):

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "IL-TUO-ID-PROGETTO",
        accountId: "IL-TUO-ID-ACCOUNT",
        datacenter: "eu",
    
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    
</script>

L'ID del progetto si trova nelle impostazioni del progetto.

L'ID account si trova nelle impostazioni dell'organizzazione Strings.

Se necessario, imposta il data center statunitense per abilitare il lavoro con gli endpoint statunitensi:

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

Quando PHRASEAPP_ENABLED = True, il pacchetto modifica i valori restituiti dalle funzioni di traduzione per presentare un formato che l'ICE può leggere. Quando impostato su False, tornerà alle funzioni gettext standard di Flask-Babel.

Campione di codice

Questa applicazione demo dimostra come integrare l'editor In-Context con un'applicazione Flask.

Symfony 5.x

Prerequisiti

Registrati per un account Phrase Strings.
Utilizza il framework Symfony per PHP.

Nota

La versione 2.0.0 supporta Symfony 5 e versioni successive. Se utilizzi Symfony 2, 3 o 4, consulta la old version dell'ICE.

Per integrare l'In-Context Editor con l'applicazione Symfony, segui questi passaggi:

Copia PhraseStringsInContextEditor e il suo contenuto nella cartella /src/Service del repository o nella posizione desiderata. Se posizionato altrove, regola il namespace di conseguenza.

Regola config/services.yaml per decorare il servizio translator con l'adapter di Phrase:

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

Aggiungi il seguente snippet JavaScript al template di base o di layout Twig tra {% block javascripts %} in modo che l'In-Context Editor possa leggere la pagina 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'applicazione Symfony è ora connessa all'In-Context Editor.

L'ID del progetto si trova nelle impostazioni del progetto.

L'ID account si trova nelle impostazioni dell'organizzazione Strings.

Se necessario, imposta il data center statunitense per abilitare il lavoro con gli endpoint statunitensi:

window.PHRASEAPP_CONFIG = {
    projectId: "IL-TUO-ID-PROGETTO",
    accountId: "IL-TUO-ID-ACCOUNT",
    datacenter: "us",

Ricarica l'applicazione ed effettua l'accesso con le credenziali di Phrase per avviare il processo di traduzione direttamente sulla pagina web.

Campione di codice

Questa applicazione demo mostra come integrare l'In-Context Editor con un'applicazione Symfony.

Configurazione dell'In-Context Editor

Esposizione dei nomi delle chiavi

In genere, un livello di visualizzazione esegue il rendering delle traduzioni passando il nome di una stringa traducibile (ovvero la chiave) a un qualche tipo di metodo di traduzione o helper di visualizzazione.

Codice PHP di esempio:

$translations = array(

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

  "page.link.label" => "I am a link",

  "page.link.hint" => "Click me"



function translate($keyName) {

  return $translations[$keyName];

}

Il template eseguirebbe quindi il rendering dell'output del metodo translate() invece della stringa tradotta effettiva:

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

Formattazione

Deve essere indicato nel template per quali chiavi eseguire il rendering delle traduzioni.

Utilizza questa formattazione per esporre i nomi delle chiavi invece delle traduzioni:

{{__phrase_NameOfYourKey__}}

Esempio:

Se la chiave page.headline è nel template, esegui il rendering della stringa {{__phrase_page.headline__}}.

Modifica il metodo helper translate() in modo da esporre i nomi delle chiavi nel formato richiesto:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

A seconda del framework, gli helper di traduzione nel codice possono essere sovrascritti oppure è possibile creare una versione incapsulata da utilizzare nei template.

Esempio:

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

Escape delle sequenze di nomi delle chiavi e dei caratteri speciali

Assicurarsi che i nomi delle chiavi siano convertiti in un formato riconoscibile.

I caratteri nel seguente elenco devono essere sottoposti a escape quando esposti all'editor In-Context:

Carattere	Sequenza di escape	Esempio:
	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} diventa {{__phrase__key[[[[[[html_open]]]]]]__}}
	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} diventa {{__phrase__[[[[[[html_close]]]]]]key__}}

Conversione automatica delle maiuscole/minuscole

Per impostazione predefinita, il parser di documenti dell'editor In-Context converte tutte le chiavi in minuscolo. Se si riscontrano problemi con questo comportamento e si desidera utilizzare chiavi con distinzione tra maiuscole e minuscole all'interno dell'editor In-Context, disabilitare la funzione di minuscolo automatico:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizzazione dei decoratori di chiave

Quando si utilizza l'editor In-Context, i nomi delle chiavi vengono solitamente racchiusi tra decoratori (parentesi graffe, per impostazione predefinita) per generare chiavi di identificazione univoche all'interno del contesto di un documento:

{{__phrase_YOUR.KEY__}}

Se ciò causa conflitti con altre librerie (ad esempio, motori di template lato client, inclusi AngularJS ed Ember.js) che utilizzano una sintassi simile, modificare il prefisso e il suffisso del decoratore dell'editor In-Context nella configurazione. Per indicare all'editor In-Context quali decoratori il parser deve cercare, aggiungere i seguenti valori di configurazione prima dello snippet JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Questo indica all'editor di cercare i tag che iniziano con [[__ e terminano con __]]:

[[__phrase_YOUR.KEY__]]

Se utilizzi la gemma phraseapp-in-context-editor-ruby per fornire la funzionalità dell'editor In-Context, assicurati che i decorator siano configurati:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Se non utilizzi la gemma, assicurati che il pattern di esposizione del nome della chiave sia regolato nel codice personalizzato.

Abilitazione e disabilitazione dell'editor In-Context

Questa impostazione è disponibile solo quando si utilizza la gemma phraseapp-in-context-editor-ruby.

L'editor In-Context è disabilitato per impostazione predefinita.

L'editor In-Context può essere abilitato o disabilitato esplicitamente. Ciò influisce sull'inclusione dello snippet JavaScript (quando si utilizza l'helper di vista) e sul rendering dei nomi delle chiavi decorate nelle viste:

PhraseApp::InContextEditor.enabled = true|false

Esempio di associazione del flag a una variabile d'ambiente:

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

Rianalisi completa

Abilita fullReparse se utilizzi l'editor In-Context con un framework JavaScript che usa il Virtual DOM, come React. Ciò consente una corretta rianalisi quando vengono rilevate modifiche al DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Nascondere elementi dall'editor In-Context

Le classi elencate nell'opzione hidingClasses vengono trattate come nascoste ed escluse dallo scanner dell'editor In-Context. Per rendere scansionabili gli elementi con una determinata classe, rimuovi quel nome di classe dall'array hidingClasses invece di aggiungerlo. L'aggiunta di un nome di classe all'array esclude gli elementi corrispondenti e nasconde il pulsante di modifica; la rimozione di un nome di classe dall'array include gli elementi corrispondenti e visualizza il pulsante di modifica.

L'opzione hidingClasses esegue un controllo statico della presenza della classe su un elemento e sui suoi antenati. Non valuta la visibilità calcolata o reattiva. Un elemento che utilizza una classe di utilità reattiva corrispondente a una voce in hidingClasses (ad esempio, una classe denominata "hidden" combinata con una classe di visibilità specifica per il breakpoint) viene escluso dalla scansione indipendentemente dal fatto che sia effettivamente visibile nella viewport corrente. Evita di utilizzare nomi di classe elencati in hidingClasses puramente per lo stile reattivo su elementi che devono essere scansionati.

Sanificazione dell'output sulla pagina web

L'editor In-Context può essere configurato per eseguire l'escape o modificare le traduzioni prima che vengano inserite nella pagina web fornendo una funzione alla proprietà sanitize.

La funzione accetta la stringa di traduzione come primo argomento e dovrebbe restituire una stringa:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Single sign-on

Se utilizzi single sign-on e desideri inizializzare l'editor In-Context con SSO abilitato, aggiungi il seguente valore di configurazione prima dello snippet JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Per richiedere agli utenti di accedere utilizzando SSO, imposta il parametro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Paginazione delle chiavi e stato della traduzione

Per le pagine con un gran numero di chiavi traducibili, l'editor In-Context carica le chiavi in pagine da 100. Solo le chiavi nella prima pagina hanno i loro indicatori di modifica collegati al caricamento. Le chiavi rimanenti appaiono non tradotte finché la pagina non viene fatta scorrere ulteriormente o una chiave non viene cercata direttamente, poiché una ricerca diretta aggira la paginazione. Non esiste un'opzione di configurazione per aumentare la dimensione della pagina, poiché la paginazione avviene sul lato server anziché tramite la libreria client.

Per verificare lo stato della traduzione di tutte le chiavi senza fare affidamento sullo scorrimento, fai clic sull'icona di ricerca nell'editor In-Context per aprire l'elenco delle chiavi. L'elenco delle chiavi mostra il conteggio totale delle chiavi già integrate rispetto a quelle mancanti dal progetto e può essere attivato per mostrare tutte le chiavi nel progetto anziché solo quelle rilevate nella pagina corrente. In alternativa, controlla la completezza della traduzione per il lavoro pertinente direttamente nell'editor di traduzione delle stringhe, che non ha questo limite di rendering basato sulla pagina.

Vecchio editor In-Context: Impostazione

Installazioni del framework web

Angular 2 (ngx-translate)

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Installa con NPM:
```
npm install ngx-translate-phraseapp
```

Configura

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

L'ID del progetto si trova nelle impostazioni del progetto.

Per impostazione predefinita, il parser di documenti dell'editor converte tutte le chiavi in minuscolo. Se riscontri problemi con questo comportamento e desideri utilizzare chiavi sensibili alle maiuscole all'interno dell'editor, disabilita la funzione di minuscolo automatico:
```
let config = {
  
  autoLowercase: false
}
```

Aggiungi questi snippet all'app 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: {
        Indica: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Indica: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    
  ],
  providers: [],
  bootstrap: [AppComponent]

Campione di codice

Questa demo app mostra un'integrazione dell'editor In-Context con Angular e ngx-translate.

AngularJS (angular-translate)

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Installa angular-phrase tramite Bower (o scarica manualmente):
```
$ bower install angular-phrase
```
Aggiungi il modulo angular-phrase all'applicazione AngularJS esistente dopo aver caricato il modulo angular-translate:
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Configura il modulo:
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
L'ID progetto di un progetto si trova nelle impostazioni del progetto. Questo crea un file di inizializzazione con alcune opzioni di configurazione.
Aggiungi la direttiva phrase-javascript all'applicazione all'interno del tag <head>:
```
<phrase-javascript></phrase-javascript>
```
Apri l'applicazione in un qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con un qualsiasi utente dell'organizzazione Phrase.

angular-phrase su GitHub

Campione di codice

Questa demo applicazione per angular-phrase mostra come localizzare AngularJS con angular-translate.

Django

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Installa il pacchetto django-phrase con pip:
```
$ pip install django-phrase
```
Aggiungi Phrase all'elenco delle app installate:
```
INSTALLED_APPS = (

    'phrase',
```
Usa il tag template phrase_i18n nei template:
```
{% load phrase_i18n %}
```
Per consentire a django-phrase di sovrascrivere i metodi di traduzione, carica phrase_i18n dopo i18n.
Aggiungi lo snippet JavaScript al layout:
```
{% phrase_javascript %}
```

Configura l'editor In-Context per il progetto con queste opzioni:

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

Apri l'applicazione in un qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con un qualsiasi utente dell'organizzazione Phrase.

Codice dell'adattatore Django su GitHub

Campione di codice

Questa demo applicazione mostra come integrare l'editor In-Context con un'applicazione Django.

React (intl)

Nota

Questa libreria potrebbe non funzionare con IE11 o browser più vecchi. Aggiungi Babel alla pipeline di build se è richiesto il supporto per browser più vecchi.

Questa libreria eredita componenti comuni dei pacchetti react-intl. Se Phrase è abilitato chiamando initializePhraseAppEditor, il comportamento dei componenti cambierà.

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Installa il pacchetto tramite NPM:
```
npm install react-intl-phraseapp
```
o compila dal sorgente:
```
npm run dist
```
```
npm install
```

Configura

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

L'ID progetto di un progetto si trova nelle impostazioni del progetto.

Aggiungi lo snippet all'app React:

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

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


initializePhraseAppEditor(config);

Trova tutte le importazioni di FormattedMessage e cambia la sorgente da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Esegui i test unitari utilizzando jest:
```
npm test
```

Campione di codice

Questa demo mostra un'integrazione dell'In-Context Editor di Phrase con react-intl.

Ruby on Rails (i18n)

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Aggiungi la gemma phraseapp-in-context-editor-ruby all'ambiente con cui desideri utilizzare l'In-Context Editor:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e installala eseguendo il comando bundle:
```
$ bundle install
```
Installa la gemma phraseapp-in-context-editor-ruby eseguendo il generatore Rails:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
Token di accesso

Crea e gestisci i token di accesso nelle impostazioni del profilo o tramite l'API delle autorizzazioni.

PROJECT_ID

L'ID del progetto si trova nelle impostazioni del progetto. Questo crea un file di inizializzazione con alcune opzioni di configurazione.
Aggiungi lo snippet JavaScript al layout della tua applicazione all'interno del tag <head> utilizzando l'helper phraseapp_in_context_editor_js:
```
<head>
  
  <%= phraseapp_in_context_editor_js %>
  
</head>
```
Apri l'applicazione in un qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.
Disabilita Turbolinks (se utilizzato)

Turbolinks rimuove tutti gli elementi dell'interfaccia utente dell'In-Context Editor dalla pagina a ogni caricamento della pagina.

Aggiungi l'attributo data-no-turbolink al tag <body>:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Campione di codice

Questa demo mostra un'integrazione dell'editor In-Context di Phrase con react-i18next.

Spring

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Assicurati che il package com.phraseapp.incontexteditor sia disponibile nell'app.
Imposta l'ID progetto corretto e regola gli altri parametri in PhraseAppConfiguration.class.

Per eseguire il rendering di tutte le traduzioni tramite Phrase, aggiungi il bean all'applicazione:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Fornisci l'helper JavaScript richiesto nei template esponendo l'helper come bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Aggiungi il tag <script> ai tuoi template all'interno del tag <head> di ogni pagina:

<head>

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

</head>

Riavvia l'applicazione e accedi con le credenziali utente Phrase.

Codice sorgente dell'applicazione di esempio su GitHub

Come localizzare le applicazioni Spring come un professionista.

Pacchetto starter Spring Boot (fornito da ePages)

Symfony 2.x

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Crea un nuovo ambiente in cui verrà eseguito l'editor In-Context. Nell'esempio, il nuovo ambiente è denominato translation.

Crea un nuovo file di configurazione:
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

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

Crea un controller per rendere l'ambiente accessibile dal browser:

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

Sovrascrivi il metodo di traduzione standard per esporre i nomi delle chiavi all'editor In-Context:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

    public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

        if (!isset($this->catalogues[$locale])) {

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

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

        }

    }

}

Aggiungi lo snippet JavaScript al layout:

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

Apri l'applicazione in un qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Documentazione sulla traduzione di Symfony

Codice dell'adattatore Symfony 2.x su GitHub

Symfony 3.x

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Crea un nuovo ambiente in cui verrà eseguito l'editor In-Context. Nell'esempio, il nuovo ambiente è denominato translation.

Crea un nuovo file di configurazione:
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

Crea un controller per rendere l'ambiente accessibile dal browser:

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

Sovrascrivi il metodo di traduzione standard per esporre i nomi delle chiavi all'editor In-Context:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

   public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

       // Return ID of translation key with pre- and suffix for PhraseApp

       return $prefix.$id.$suffix;

   }

}

Assicurati che la classe venga sempre sovrascritta quando il bundle viene utilizzato con 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');

   }

}

Se utilizzi compiler pass separati, registrali nel metodo build() della classe del 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());

       

   }

}

Aggiungi lo snippet JavaScript al layout:

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

Apri l'applicazione in un qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Documentazione sulla traduzione di Symfony

Vue I18n

Nota

L'editor In-Context di Phrase per Vue I18n supporta tutte le versioni di Vue I18n 8.17.5 e successive. Questa libreria potrebbe funzionare con versioni precedenti, ma non sono ufficialmente supportate e non riceveranno aggiornamenti specifici o correzioni di bug.

Per installare l'editor In-Context in questo ambiente, segui questi passaggi:

Installa il pacchetto con il gestore di pacchetti preferito:

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

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

o carica con CDN (registra manualmente 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 (esempio):

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

Per integrare la libreria:

Importa la libreria Vue I18n Phrase In-Context Editor.
Crea una nuova istanza di Vue I18n Phrase In-Context Editor, passando l'istanza di Vue I18n come primo argomento e Phrase Config come secondo.

Opzioni di configurazione e metodi di esempio.

Utilizzo del vecchio editor In-Context

Modalità Ajax

L'editor In-Context supporta Ajax e la manipolazione del DOM (ovvero, tramite JavaScript) utilizzando gli osservatori di mutazione.

La modalità Ajax può causare problemi in alcuni casi e può comportare gravi problemi di prestazioni quando si utilizza l'editor In-Context. Per disabilitare la modalità Ajax, aggiungi il seguente valore di configurazione prima dello snippet JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modalità di debug

Per abilitare la modalità di debug, aggiungi il seguente valore di configurazione prima dello snippet JavaScript:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forzare un locale

Per impostare esplicitamente una lingua specifica all'avvio dell'editor In-Context, utilizza l'impostazione forceLocale. Questo è utile anche per preselezionare la lingua attualmente visualizzata nella tua applicazione web nell'editor In-Context:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chiavi ignorate

Questa impostazione è disponibile solo quando si utilizza la gemma phraseapp-in-context-editor-ruby.

Le chiavi possono essere escluse dal rendering con l'editor In-Context. Quando si lavora con Rails, le chiavi possono essere ignorate per dati come messaggi di errore o chiavi di formato di data e ora. Per escludere le chiavi dalla gestione automatica da parte della gemma phraseapp-in-context-editor-ruby, aggiungi un array di chiavi al file di inizializzazione phraseapp_in_context_editor.rb. È possibile utilizzare anche i caratteri jolly:

PhraseApp::InContextEditor.configure do |config|

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

end

Le chiavi che corrispondono a uno qualsiasi di questi modelli non saranno rese accessibili all'editor In-Context e verranno visualizzate normalmente.