In-context Editor (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'In-context Editor è progettato per fornire Guida ai traduttori per completare il lavoro in modo più efficiente e tradurre una pagina web tramite l'integrazione diretta con l'editor di traduzione Strings.

Attualmente sono disponibili due versioni:

L'In-context Editor:

Include nuove funzionalità (vista multilingue, opzioni di layout, azioni batch, funzionalità di collaborazione, ecc.) e l'interfaccia utente dall'editor di traduzione.
Il vecchio In-context Editor.

Dopo aver installato l'In-context Editor, può essere personalizzato per lavorare con molte tecnologie.

Installazione dell'In-context Editor di Strings

Requisiti

Per usare l'In-context Editor, l'applicazione richiede:

Siti web basati sul web, applicazioni web, siti per dispositivi mobili, 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 Strings traducibili estratti e un livello di visualizzazione che usa una struttura chiave-valore per eseguire il rendering delle traduzioni.
Nomi di chiave esposti al livello di visualizzazione o modello.
Snippet JavaScript che esegue il rendering dell'editor.
Idealmente, un ambiente dedicato per le traduzioni. Può trattarsi di 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 usare un ambiente di staging esistente con l'opzione di abilitare l'In-context Editor secondo necessità.

Snippet JavaScript

Includere lo snippet JavaScript nel layout dell'applicazione.

Lo snippet include il codice necessario per:

Comunicare con la API Phrase Strings.
Eseguire il rendering dell'interfaccia utente.
Fornire l'accesso.

L'ID progetto si trova nelle impostazioni del progetto.

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

Esempio:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Set to 'us' for US data center
      prefix: '{{__', // Set to the prefix for the key format in the view templates
      suffix: '__}}', // Set to the suffix for the key format in the view templates
      disableShortcuts: false, // Set to true to disable keyboard shortcuts
      autoLowercase: true, // Set to false if keys contain capital letters
    };
  </script>
  <script type=\"module\" async=\"\" src=\"https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js\"></script>

Installazioni framework web

i18next

Nota

Il post-processor dell'In-context Editor di Phrase per i18next 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'In-context Editor 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:

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

Aggiungere 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, configurare l'attributo useOldICE per passare al old ICE:

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

Avviare l'In-context Editor.
Aprire l'applicazione in un browser web per visualizzare l'In-context Editor. Accedere con 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'In-context Editor in questo ambiente, seguire questi passaggi:

Installare il newest package 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 caricare con CDN (registrare 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:

importare la libreria Vue I18n Phrase In-context Editor.
Creare una nuova istanza Vue I18n Phrase In-context Editor, passando l'istanza Vue I18n come primo argomento e Phrase Config come secondo.

Opzioni di configurazione e metodi di esempio.

React (intl)

Nota

Questa libreria potrebbe non lavoro con IE11 o browser più vecchi. Aggiungere 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 modificare.

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Installare il pacchetto più recente tramite NPM:
```
npm install react-intl-phraseapp
```
o compilare dall'origine:
```
npm run dist
```
```
npm install
```

Configurare:

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.

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

Trovare tutte le importazioni di FormattedMessage e modificare l'origine da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Eseguire i test unitari utilizzando jest:
```
npm test
```

Esempio di codice

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

Angular 2 (ngx-translate)

Prerequisiti

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

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

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

Configurare:

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, configurare l'attributo useOldICE per passare al old ICE:

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

initializePhraseAppEditor(config);

Se necessario, aggiungere gli URL specifici per gli Stati Uniti per Abilita il lavoro tramite il data center statunitense:

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 del documento dell'editor converte tutte le chiavi in minuscolo. In caso di problemi con questo comportamento e se si desidera usare chiavi con distinzione tra maiuscole e minuscole all'interno dell'editor, disabilitare la funzione di minuscolo automatico:
```
let config = {
  // ...
  autoLowercase: false
}
```

Aggiungere 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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Esempio di codice

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

Ruby on Rails (i18n)

Nota

Questa libreria potrebbe non funzionare immediatamente per i browser meno recenti o Microsoft IE11. Aggiungere Babel alla pipeline di build se è necessario supportare tali browser.

Prerequisiti

Registrarsi per un account Phrase Strings.
Usare l'eccellente gemma i18n utilizzata anche da Rails.

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Aggiungere la libreria phraseapp-in-context-editor-ruby all'ambiente desiderato utilizzando uno dei seguenti metodi:
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Via Bundler
  
  Aggiungerla al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Effettuare la build direttamente dall'origine per ottenere la versione più recente e migliore:
```
bundle && gem build
```
Creare il file di inizializzazione eseguendo il generatore Rails:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
L'ID progetto di un progetto si trova nelle impostazioni del progetto.

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

Aggiungere 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 richiesto, impostare il data center US per Abilita il lavoro con gli endpoint US:

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

Aprire l'applicazione in un qualsiasi browser web per vedere l'In-context Editor applicato all'app. Accedere con qualsiasi utente dell'organizzazione Phrase.

Esempio di codice

Questa demo mostra un'integrazione dell'In-context Editor di Phrase con react-i18next.

Django

Prerequisiti

Registrarsi per un account Phrase Strings.
Usare il framework Django per Python.

Nota

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

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

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

    'phrase',

)
```
Aggiungere i seguenti frammenti di modello al file di layout templates/base_generic.html o equivalente:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Usare il tag modello phrase_i18n nei modelli (ad esempio, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Aggiungere 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 progetto di un 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 JavaScript snippet.

Aprire l'applicazione in un qualsiasi browser web per vedere l'In-context Editor applicato all'app. Accedere con qualsiasi utente dell'organizzazione Phrase.

Codice dell'adattatore Django su GitHub

Esempio di codice

Questa demo applicazione dimostra come integrare l'In-context Editor con un'applicazione Django.

Flask

Prerequisiti

Registrarsi per un account Phrase Strings.
Usare il framework Flask per Python.

Nota

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

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

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

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

Aggiungere lo snippet JavaScript di Phrase al file di layout base con il seguente tag (dovrebbe andare all'interno della sezione del file modello):

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

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

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

Se richiesto, impostare il data center US per Abilita il lavoro con gli endpoint US:

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'In-context Editor può leggere. Quando impostato su False, tornerà alle funzioni gettext standard di Flask-Babel.

Esempio di codice

Questa demo di applicazione dimostra come integrare l'In-context Editor con un'applicazione Flask.

Symfony 5.x

Prerequisiti

Registrarsi per un account Phrase Strings.
Usare il framework Symfony per PHP.

Nota

La versione 2.0.0 supporta Symfony 5 e versioni successive. Se si usa Symfony 2, 3 o 4, consultare la vecchia versione dell'In-context Editor.

Per integrare l'In-context Editor con l'applicazione Symfony, seguire questi passaggi:

Copiare PhraseStringsInContextEditor e il suo contenuto nella cartella /src/Service dell'archivio o nella posizione desiderata. Se posizionato altrove, regolare lo spazio dei nomi di conseguenza.

Regolare config/services.yaml per decorare il servizio traduttore con l'adattatore di Phrase:

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

Aggiungere il seguente snippet JavaScript al modello di layout base o 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 progetto di un progetto si trova nelle impostazioni del progetto.

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

Se richiesto, impostare il data center US per Abilita il lavoro con gli endpoint US:

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

Ricaricare l'applicazione e accedere con le credenziali Phrase per avviare il processo di traduzione direttamente sulla pagina web.

Esempio di codice

Questa demo di applicazione dimostra come integrare l'In-context Editor con un'applicazione Symfony.

Configurazione dell'In-context Editor

Esposizione dei nomi delle chiave

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 modello 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 modello per quali chiave eseguire il rendering delle traduzioni.

Usare questo formato per esporre i nomi delle chiave invece delle traduzioni:

{{__phrase_NameOfYourKey__}}

Esempio:

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

Modificare il metodo helper translate() in modo da esporre i nomi delle chiave 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 usare nei modelli.

Esempio:

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

Escape dei nomi delle chiave e caratteri speciali

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

I caratteri nel seguente elenco devono essere sottoposti a escape quando esposti nell'In-context Editor:

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 del documento dell'In-context Editor converte tutte le chiave in minuscolo. Se si riscontrano problemi con questo comportamento e si desidera usare chiave sensibili alle maiuscole/minuscole all'interno dell'In-context Editor, disabilitare la funzionalità di minuscolo automatico:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizzare i decoratori della chiave

Quando si usa l'In-context Editor, i nomi delle chiave sono 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 modello lato cliente, inclusi AngularJS ed Ember.js) che usano una sintassi simile, modificare il prefisso e il suffisso del decoratore dell'In-context Editor nella configurazione. Per indicare all'In-context Editor 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 tag che iniziano con [[__ e terminano con __]]:

[[__phrase_YOUR.KEY__]]

Se si usa la phraseapp-in-context-editor-ruby gem per fornire la funzionalità dell'In-context Editor, assicurarsi che i decoratori siano configurati:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Se non si usa la gem, assicurarsi che il pattern di esposizione del nome della chiave sia regolato nel codice Personalizzato.

Abilitazione e disabilitazione dell'In-context Editor

Questa impostazione è disponibile solo quando si usa la phraseapp-in-context-editor-ruby gem.

L'In-context Editor è disabilitato per impostazione predefinita.

L'In-context Editor può essere esplicitamente abilitato o disabilitato. Ciò influisce sull'inclusione dello snippet JavaScript (quando si usa l'helper di vista) e sul rendering dei nomi delle chiave 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

Abilitare fullReparse se si usa l'In-context Editor 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

}

Sanificare output nella pagina web

L'In-context Editor può essere configurato per eseguire l'escape o alterare 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 si usa single sign-on e si desidera inizializzare l'In-context Editor con SSO abilitato, aggiungere 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 usando SSO, impostare il parametro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Vecchio In-context Editor: configurazione

Installazioni framework web

Angular 2 (ngx-translate)

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

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

Configurazione:

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

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

Per impostazione predefinita, il parser del documento dell'editor converte tutte le chiavi in minuscolo. In caso di problemi con questo comportamento e se si desidera usare chiavi con distinzione tra maiuscole e minuscole all'interno dell'editor, disabilitare la funzione di minuscolo automatico:
```
let config = {
  // ...
  autoLowercase: false
}
```

Aggiungere 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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Esempio di codice

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

AngularJS (angular-translate)

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Installare angular-phrase tramite Bower (o download manualmente):
```
$ bower install angular-phrase
```
Aggiungere il modulo angular-phrase all'applicazione AngularJS esistente dopo aver caricato il modulo angular-translate:
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Configurare 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.
Aggiungere la direttiva phrase-javascript all'applicazione all'interno del tag <head>:
```
<phrase-javascript></phrase-javascript>
```
Aprire l'applicazione in un qualsiasi browser web per vedere l'In-context Editor applicato all'app. Accedere con qualsiasi utente dell'organizzazione Phrase.

angular-phrase su GitHub

Esempio di codice

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

Django

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

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

    'phrase',

)
```
Usare il tag modello phrase_i18n nei modelli:
```
{% load phrase_i18n %}
```
Per consentire a django-phrase di sovrascrivere i metodi di traduzione, caricare phrase_i18n dopo i18n.
Aggiungere lo snippet JavaScript al layout:
```
{% phrase_javascript %}
```

Configurare l'In-context Editor per il progetto con queste opzioni:

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

Aprire l'applicazione in un qualsiasi browser web per vedere l'In-context Editor applicato all'app. Accedere con qualsiasi utente dell'organizzazione Phrase.

Codice adattatore Django su GitHub

Esempio di codice

Questa demo applicativa dimostra come integrare l'In-context Editor con un'applicazione Django.

React (intl)

Nota

Questa libreria potrebbe non funzionare con IE11 o browser più vecchi. Aggiungere 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 subirà una modifica.

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Installare il pacchetto tramite NPM:
```
npm install react-intl-phraseapp
```
o compilare dall'origine:
```
npm run dist
```
```
npm install
```

Configurazione:

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

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

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

Trovare tutte le importazioni di FormattedMessage e modificare l'origine da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Eseguire i test unitari usando jest:
```
npm test
```

Esempio di codice

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

Ruby on Rails (i18n)

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Aggiungere la gemma phraseapp-in-context-editor-ruby all'ambiente con cui si desidera usare l'In-context Editor:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e installarla eseguendo il comando bundle:
```
$ bundle install
```
Installare 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
```
--access-token

Creare e gestire i token di accesso nelle impostazioni del profilo o tramite l'API di autorizzazione.

--project-id

L'ID progetto di un progetto si trova nelle impostazioni del progetto. Questo crea un file di inizializzazione con alcune opzioni di configurazione.
Aggiungere lo snippet JavaScript al layout dell'applicazione all'interno del tag <head> usando l'helper phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Aprire l'applicazione in un qualsiasi browser web per vedere l'In-context Editor applicato all'app. Accedere con qualsiasi utente dell'organizzazione Phrase.
Disabilita Turbolinks (se usato)

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

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

Esempio di codice

Questa demo mostra un'integrazione dell'In-context Editor di Phrase con react-i18next.

Spring

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Assicurarsi che il package com.phraseapp.incontexteditor sia disponibile nell'app.
Impostare il corretto ID progetto e regolare gli altri parametri in PhraseAppConfiguration.class.

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

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

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

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

<head>

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

</head>

Riavviare l'applicazione e accedere 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'In-context Editor in questo ambiente, seguire questi passaggi:

Creare un nuovo ambiente in cui verrà eseguito l'In-context Editor. Nell'esempio, il nuovo ambiente è denominato translation.

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

imports:

    - { resource: config.yml }

parameters:

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

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

Sovrascrivere il metodo di traduzione standard per esporre i nomi delle chiave all'In-context Editor:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Aggiungere lo snippet JavaScript al layout:

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

Aprire l'applicazione in un qualsiasi browser web per vedere l'In-context Editor applicato all'app. Accedere con qualsiasi utente dell'organizzazione Phrase.

Documentazione sulla traduzione di Symfony

Codice adattatore Symfony 2.x su GitHub

Symfony 3.x

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Creare un nuovo ambiente in cui verrà eseguito l'In-context Editor. Nell'esempio, il nuovo ambiente è denominato translation.

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

imports:

   - { resource: config.yml }
```

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

Sovrascrivere il metodo di traduzione standard per esporre i nomi delle chiave all'In-context Editor:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

Assicurarsi 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 si utilizzano compiler pass separati, registrarli nel metodo build() della 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;

class AppBundle extends Bundle

{

   public function build(ContainerBuilder $container)

   {

       parent::build($container);

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

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

       };

   }

}

Aggiungere lo snippet JavaScript al layout:

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

Aprire l'applicazione in un qualsiasi browser web per vedere l'In-context Editor applicato all'app. Accedere con qualsiasi utente dell'organizzazione Phrase.

Documentazione sulla traduzione di Symfony

Vue I18n

Nota

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

Per installare l'In-context Editor in questo ambiente, seguire questi passaggi:

Installare 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 caricare con CDN (registrare 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:

importare la libreria Vue I18n Phrase In-context Editor.
creare 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 In-context Editor

Modalità Ajax

L'In-context Editor supporta Ajax e la manipolazione del DOM (ad esempio, tramite JavaScript) utilizzando mutation observer.

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modalità debug

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forzatura di un impostazioni locali

Per impostare un impostazioni locali specifico in modo esplicito all'avvio dell'In-context Editor, usare l'impostazione forceLocale. Questo è utile per preselezionare l'impostazioni locali attualmente visualizzato nella tua applicazione web anche nell'In-context Editor:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chiavi ignorate

Questa impostazione è disponibile solo quando si usa il phraseapp-in-context-editor-ruby gem.

Le chiavi possono essere Escludi dalla visualizzazione con l'In-context Editor. 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 Escludi le chiavi dalla gestione automatica da parte del phraseapp-in-context-editor-ruby gem, aggiungere una matrice delle chiavi al file di inizializzazione phraseapp_in_context_editor.rb. È possibile usare 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'In-context Editor e verranno visualizzate normalmente.