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'Editor In-context è progettato per aiutare i traduttori a lavorare in modo più efficiente e a tradurre una pagina web tramite l'integrazione diretta con l'editor di traduzione di 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. Questo potrebbe essere un ambiente locale, se necessario.
Una struttura di file di localizzazione chiave-valore.

Siti web con stringhe traducibili estratte e un livello di visualizzazione che usa una struttura chiave-valore per visualizzare le 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. Questo può essere una copia 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

Includi lo snippet JavaScript nel layout dell'applicazione.

Lo snippet include il codice necessario per:

Comunica con l'API di Phrase Strings.
Visualizza l'interfaccia utente.
Fornisci l'accesso.

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

L'ID dell'account Account ID 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, segui questi passaggi:

Installa 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 caricala tramite CDN:

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

Bootstrap (sample):

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

Aggiungere lo snippet JavaScript dell'ICE all'istanza di i18next nella configurazione.

Snippet di esempio:

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

Nota

Fornisci il accountId per configurare correttamente ICE. L'ID dell'account Account ID 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'In-Context Editor.
Apri l'applicazione in un browser web per mostrare l'In-Context Editor. Accedi con qualsiasi utente dell'organizzazione Phrase.

Opzioni di configurazione e metodi di esempio.

Vue I18n

Nota

L'In-Context Editor 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'In-Context Editor in questo ambiente, segui 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

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

React (intl)

Nota

Questa libreria potrebbe non funzionare 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 cambierà.

Per installare l'In-Context Editor in questo ambiente, segui 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.

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 modifica l'origine da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Esegui 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

Iscriviti 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, segui 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 vecchio ICE:

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

initializePhraseAppEditor(config);

Se richiesto, aggiungi gli URL specifici per gli Stati Uniti per abilitare 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 desideri utilizzare chiavi che distinguono tra maiuscole e minuscole nell'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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Esempio 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 senza ulteriori configurazioni su browser meno recenti o su Microsoft IE11. Aggiungi Babel alla pipeline di build se è necessario supportare tali browser.

Prerequisiti

Iscriviti per un account Phrase Strings.
Usa l'eccellente gemma i18n usata anche da Rails.

Per installare l'In-Context editor 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
  
  Aggiungilo al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Compila direttamente dalla sorgente per ottenere le ultime novità:
```
bundle && gem build
```
Crea 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.
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 US:

  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'In-Context editor applicato all'app. Accedi con un qualsiasi utente dell'organizzazione Phrase.

Esempio di codice

Questa demo mostra un'integrazione del Phrase In-Context Editor 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 dalla versione 2.0.0.

Per installare l'In-Context editor 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 %}
```
Usa il tag 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 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.

Apri l'applicazione in un qualsiasi browser web per vedere l'In-Context editor applicato all'applicazione. Accedi con un 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

Registrati per un account Phrase Strings.
Usa 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, 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 assomigliare 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 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 necessario, imposta il data center su US 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'In-Context Editor può leggere. Quando impostato su False, tornerà alle funzioni gettext standard di Flask-Babel.

Esempio di codice

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

Symfony 5.x

Prerequisiti

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

Nota

La versione 2.0.0 supporta Symfony 5 e versioni successive. Se si utilizza Symfony 2, 3 o 4, consultare la vecchia versione dell'ICE.

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

Copia PhraseStringsInContextEditor e i suoi contenuti nella cartella /src/Service del repository o nella posizione desiderata. Se posizionato altrove, regola lo spazio dei nomi di conseguenza.

Modifica 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 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 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",
};

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

Esempio di codice

Questa demo applicazione dimostra 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 vista renderizza le traduzioni passando il nome di una stringa traducibile (ovvero, la chiave) a un qualche tipo di metodo di traduzione o helper di vista.

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 renderizzerebbe quindi l'output del metodo translate() invece della stringa tradotta effettiva:

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

Formattazione

Deve essere indicato nel modello per quali chiavi visualizzare le traduzioni.

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

{{__phrase_NameOfYourKey__}}

Esempio:

Se la chiave page.headline è nel modello, visualizza la stringa {{__phrase_page.headline__}}.

Modifica il metodo helper translate() in modo da esporre i nomi delle chiavi nella formattazione richiesta:

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 = (key: string) => '{{__phrase_' + key + '__}}'

Escape dei nomi delle chiavi e dei caratteri speciali

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

I caratteri nel seguente elenco devono essere preceduti da un carattere di escape quando esposti all'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 chiavi in minuscolo. Se hai problemi con questo comportamento e vuoi usare chiavi che distinguono tra maiuscole e minuscole nell'In-Context Editor, disattiva la funzione di conversione automatica in minuscolo:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizza i decoratori di chiave

Quando usi l'In-Context Editor, i nomi delle chiavi sono di solito racchiusi tra decoratori (parentesi graffe, per impostazione predefinita) per generare chiavi di identificazione univoche nel contesto di un documento:

{{__phrase_YOUR.KEY__}}

Se questo causa conflitti con altre librerie (ad esempio motori di template lato client, inclusi AngularJS ed Ember.js) che usano una sintassi simile, cambia il prefisso e il suffisso dei decoratori dell'In-Context Editor nella configurazione. Per indicare all'In-Context Editor quali decoratori il parser deve cercare, aggiungi 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 usi la gem phraseapp-in-context-editor-ruby per fornire la funzionalità dell'In-Context Editor, assicurati che i decoratori siano configurati:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Se non usi la gem, assicurati che il pattern di esposizione del nome della chiave sia adeguato nel codice personalizzato.

Abilitare e disabilitare l'In-Context Editor

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

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

L'In-Context Editor può essere abilitato o disabilitato esplicitamente. Questo influisce sull'inclusione dello snippet JavaScript (quando usi il view helper) e sul rendering dei nomi delle chiavi decorati 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 utilizza l'In-Context Editor con un framework JavaScript che utilizza il Virtual DOM come React. Ciò consente una corretta rianalisi quando vengono rilevate modifiche al DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Nascondere elementi dall'In-Context Editor

Le classi elencate nell'opzione hidingClasses vengono trattate come nascoste ed escluse dallo scanner dell'In-Context Editor. Per rendere scansionabili gli elementi con una determinata classe, rimuovere quel nome di classe dall'array hidingClasses invece di aggiungerlo. Aggiungere un nome di classe all'array esclude gli elementi corrispondenti e nasconde il pulsante di modifica; rimuovere 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 di una classe su un elemento e sui suoi antenati. Non valuta la visibilità calcolata o responsiva. Un elemento che utilizza una classe di utilità responsiva 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 nel viewport corrente. Evitare di utilizzare nomi di classe elencati in hidingClasses puramente per lo stile responsivo su elementi che devono essere scansionati.

Sanificazione dell'output nella pagina web

L'In-Context Editor 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 si utilizza il 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 utilizzando SSO, impostare il parametro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Vecchio In-context Editor: configurazione

Installazioni di 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
```

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.

Per impostazione predefinita, il parser del documento dell'editor converte tutte le chiavi in minuscolo. Se riscontri problemi con questo comportamento e desideri usare chiavi con distinzione tra maiuscole e minuscole all'interno dell'editor, disabilita la funzione di minuscole automatica:
```
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: {
        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, 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 del 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'In-context Editor applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

angular-phrase su GitHub

Esempio di codice

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

Django

Per installare l'In-Context editor 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 modelli:
```
{% 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'In-Context Editor 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 qualsiasi utente dell'organizzazione Phrase.

Codice adattatore Django su GitHub

Esempio di codice

Questa demo applicazione 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. 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'In-Context Editor in questo ambiente, segui questi passaggi:

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

Configura:

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

L'ID del 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 modifica l'origine da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Esegui 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, segui questi passaggi:

Aggiungi la gemma phraseapp-in-context-editor-ruby all'ambiente con cui vuoi usare 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
```
--access-token

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

--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.
Aggiungi 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>
```
Apri l'applicazione in un qualsiasi browser web per vedere l'In-Context Editor applicato all'app. Accedi 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 recupero della pagina.

Aggiungi 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, segui questi passaggi:

Assicurati che il package com.phraseapp.incontexteditor sia disponibile nell'app.
Imposta il corretto ID del progetto 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 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'In-context Editor in questo ambiente, segui questi passaggi:

Crea un nuovo ambiente in cui verrà eseguito l'In-Context Editor. 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
```

Rendi l'ambiente accessibile dal browser creando un controller:

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

        }

    }

}

Aggiungi lo snippet JavaScript al layout:

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

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

Documentazione di traduzione Symfony

Codice adattatore Symfony 2.x su GitHub

Symfony 3.x

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

Crea un nuovo ambiente in cui verrà eseguito l'In-Context Editor. 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 tramite 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'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;

   }

}

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 usi 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'In-Context Editor applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Documentazione di traduzione Symfony

Vue I18n

Nota

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

Per installare l'In-Context Editor 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

oppure 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 ed esempi di metodi.

Usare il vecchio In-Context Editor

Modalità Ajax

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

La modalità Ajax può causare problemi in alcuni casi e può comportare gravi problemi di prestazioni quando si usa 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à di debug

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forzare un locale

Per impostare esplicitamente un locale specifico all'avvio dell'In-Context Editor, usare l'impostazione forceLocale. Questo è utile anche per preselezionare nel In-Context Editor il locale attualmente visualizzato nella tua applicazione web:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chiavi ignorate

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

Le chiavi possono essere escluse dal rendering 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 escludere le chiavi dalla gestione automatica da parte della phraseapp-in-context-editor-ruby gem, aggiungere un array delle 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 pattern non saranno rese accessibili all'In-Context Editor e verranno renderizzate normalmente.