In-Context Editor (Strings)

Contenuti tradotti automaticamente dall'inglese con Phrase Language AI.

Disponibile per

Team, Professionale, Business, Enterprise e piani UI/UX Software

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 completare le attività in modo più efficiente e tradurre una pagina web attraverso l'integrazione diretta con l'editor di traduzione Strings.

Attualmente, sono disponibili due versioni:

L'editor In-Context:

Include nuove funzionalità (visualizzazione multilingue, opzioni di layout, azioni batch, funzionalità di collaborazione, ecc.) e UI dall'editor di traduzione.
L'vecchio editor In-Context.

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

Installazione dell'editor In-Context Strings

Requisiti

Per utilizzare l'editor In-Context, l'applicazione richiede:

Siti web basati su web, applicazioni web, siti 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 uno strato di visualizzazione che utilizza una struttura chiave-valore per rendere le traduzioni.
Nomi delle chiavi esposti allo strato di visualizzazione o modello.
Snippet JavaScript che rende l'editor.
Idealmente, un ambiente dedicato per le traduzioni. Questo può essere un clone di un ambiente di staging e, sebbene richieda più lavoro per essere configurato inizialmente, fornisce 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 In-Context secondo necessità.

Snippet JavaScript

Includi lo snippet JavaScript nel layout dell'applicazione.

Lo snippet include il codice necessario per:

Comunicare con il API di Phrase Strings.
Renderizzare l'interfaccia utente.
Fornire accesso.

Il Project ID si trova nelle impostazioni del progetto.

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 del Framework Web

i18next

Nota

Il Post Processor In-Context Editor di i18next supporta tutte le versioni di i18next più recenti di 19.5.1. Sebbene questa libreria possa funzionare anche con versioni precedenti, non sono ufficialmente supportate e potrebbero non ricevere aggiornamenti specifici o correzioni di bug.

Per installare l'editor In-Context 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 consigliate della libreria sono 1.4.0 o più recenti.

o caricalo 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 la nuova istanza di i18next Phrase In-Context Editor Post Processor al metodo i18next use.
Aggiungi la stringa phraseInContextEditor all'array di proprietà postProcess (passato all'interno dell'oggetto di configurazione del metodo i18next init).

Aggiungi il frammento JavaScript ICE all'istanza di i18next nella configurazione.

Frammento di esempio:

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

Nota

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

Se necessario, configura l'attributo useOldICE per passare a old ICE:

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

Avvia l'editor In-Context.
Apri l'applicazione in un browser web per visualizzare l'editor In-Context. Accedi con qualsiasi utente dell'organizzazione Phrase.

Opzioni di configurazione e metodi di esempio.

Vue I18n

Nota

L'editor In-Context di 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 o correzioni di bug specifici.

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

o carica con CDN (registrati 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: 'Ciao, mondo!'
  }
});

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 Vue I18n Phrase In-Context Editor, passando l'istanza Vue I18n come primo argomento e Config di Phrase 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 build se è necessaria la compatibilità con 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 più recente tramite NPM:
```
npm install react-intl-phraseapp
```
o costruisci da 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 del progetto di un progetto si trova nelle impostazioni del progetto.

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

Aggiungi il frammento 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 la sorgente da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Esegui test unitari utilizzando jest:
```
npm test
```

Campione di codice

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

Angular 2 (ngx-translate)

Prerequisiti

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

Per installare l'editor In-Context in questo ambiente, segui 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 del progetto di un progetto si trova nelle impostazioni del progetto.

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

Se necessario, configura l'attributo useOldICE per passare a old 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 abilitare il funzionamento attraverso 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 del documento dell'editor converte tutte le chiavi in minuscolo. Se riscontri problemi con questo comportamento e desideri utilizzare chiavi sensibili al maiuscolo all'interno dell'editor, disabilita la funzione automatica di minuscolo:
```
let config = {
  // ...
  autoLowercase: false
}
```

Aggiungi questi frammenti 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 con browser più vecchi o Microsoft IE11. Aggiungi Babel alla pipeline di build se quei browser devono essere supportati.

Prerequisites

Registrati per un account Phrase Strings.
Usa l'ottima 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:
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Via Bundler
  
  Aggiungila al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Compila direttamente dal sorgente per ottenere l'ultima versione:
```
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 del progetto di un progetto si trova nelle impostazioni del progetto.

L'ID dell'account si trova nelle impostazioni dell'organizzazione Strings.
Aggiungi il frammento 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, impostare il data center degli Stati Uniti 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 qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Campione di codice

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

Django

Prerequisites

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'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 frammenti di template al file di layout templates/base_generic.html o equivalente:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Usa 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 di un progetto si trova nelle impostazioni del progetto.

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

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

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

Django adapter code on GitHub

Campione di codice

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

Flask

Prerequisites

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'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 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 il frammento JavaScript snippet di Phrase al file di layout di base con il seguente tag (dovrebbe andare all'interno della sezione del file template):

<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 del progetto di un progetto si trova nelle impostazioni del progetto.

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

Se necessario, impostare il data center degli Stati Uniti 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 demo applicazione dimostra come integrare l'editor In-Context con un'applicazione Flask.

Symfony 5.x

Prerequisites

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

Nota

La versione 2.0.0 supporta Symfony 5 e versioni superiori. Se utilizzi Symfony 2, 3 o 4, controlla la vecchia versione dell'ICE.

Per integrare l'editor In-Context 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 di conseguenza lo spazio dei nomi.

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

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

Aggiungi il seguente frammento JavaScript al modello di layout base o Twig tra il {% 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 di un progetto si trova nelle impostazioni del progetto.

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

Se necessario, impostare il data center degli Stati Uniti 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 di Phrase per avviare il processo di traduzione direttamente sulla pagina web.

Campione di codice

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

Impostare l'In-context Editor

Esponendo i nomi delle chiavi

Tipicamente, uno strato di visualizzazione rende le traduzioni passando il nome di una stringa traducibile (cioè, la chiave) a qualche tipo di metodo di traduzione o helper di visualizzazione.

Esempio di codice PHP:

$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 quali chiavi rendere per le traduzioni.

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

{{__phrase_NameOfYourKey__}}

Esempio:

Se la chiave page.headline è nel modello, rendi la 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, i helper di traduzione nel codice possono essere sovrascritti o può essere creata una versione avvolta da utilizzare nei modelli.

Esempio:

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

Escape dei Nomi delle Chiavi e Caratteri Speciali

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

I caratteri nell'elenco seguente devono essere eseguiti in 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 dei Casi

Per impostazione predefinita, il parser del documento dell'editor In-Context converte tutte le chiavi in minuscolo. Se riscontri problemi con questo comportamento e desideri utilizzare chiavi sensibili al maiuscolo all'interno dell'In-Context Editor, disabilita la funzione automatica di minuscolo:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizza i Decoratori delle Chiavi

Quando si utilizza l'editor In-Context, i nomi delle chiavi sono tipicamente racchiusi da decoratori (parentesi graffe, per impostazione predefinita) per generare chiavi di identificazione uniche all'interno del 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 utilizzano una sintassi simile, modifica il prefisso e il suffisso del decoratore dell'editor In-Context nella configurazione. Per indicare all'editor In-Context quali decoratori il parser dovrebbe cercare, aggiungi i seguenti valori di configurazione prima del frammento JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Questo dice all'editor di cercare i tags che iniziano con [[__ e finiscono con __]]:

[[__phrase_YOUR.KEY__]]

Se si utilizza il phraseapp-in-context-editor-ruby gem per fornire funzionalità di editor in contesto, assicurarsi che i decoratori siano configurati:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Se non si utilizza il gem, assicurarsi che il modello di esposizione del nome della chiave sia regolato nel codice personalizzato.

Abilitare e disabilitare l'editor in contesto

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

L'editor in contesto è disabilitato per impostazione predefinita.

L'editor in contesto può essere esplicitamente abilitato o disabilitato. Questo influisce sull'inclusione del frammento JavaScript (quando si utilizza l'aiuto alla visualizzazione) e sul rendering dei nomi delle chiavi decorate nelle visualizzazioni:

PhraseApp::InContextEditor.enabled = true|false

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

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

Rielaborazione completa

Abilitare fullReparse se si utilizza l'editor in contesto con un framework JavaScript che utilizza il Virtual DOM come React. Questo consente una corretta rielaborazione quando vengono rilevati cambiamenti nel DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizzare l'output nella pagina web

L'editor in contesto 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 utilizza single sign-on e si desidera inizializzare l'editor in contesto con SSO abilitato, aggiungere il seguente valore di configurazione prima del frammento 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 editor in contesto: 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 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 utilizzare chiavi sensibili al maiuscolo all'interno dell'editor, disabilita la funzione automatica di conversione in minuscolo:
```
let config = {
  // ...
  autoLowercase: false
}
```

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

Campione di codice

Questa app demo 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 del 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 <head> tag:
```
<phrase-javascript></phrase-javascript>
```
Apri l'applicazione in qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

angular-phrase su GitHub

Campione di codice

Questa app demo 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 il frammento 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 qualsiasi browser web per vedere l'editor In-Context applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Codice adattatore Django su GitHub

Campione di codice

Questa demo applicazione dimostra 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 è necessaria la compatibilità con 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 costruisci dal sorgente:
```
npm run dist
```
```
npm install
```

Configura:

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

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

Aggiungi il frammento all'app react:

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

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

initializePhraseAppEditor(config);

Trova tutti gli import di FormattedMessage e cambia la sorgente da react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Esegui test unitari usando jest:
```
npm test
```

Campione di codice

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

Ruby on Rails (i18n)

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

Aggiungi la phraseapp-in-context-editor-ruby gem all'ambiente con cui vuoi usare l'editor In-Context:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e installala eseguendo il comando bundle:
```
$ bundle install
```
Installa la phraseapp-in-context-editor-ruby gem 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 token di accesso nelle impostazioni del profilo o tramite l'API delle autorizzazioni.

--project-id

L'ID del progetto di un progetto si trova nelle impostazioni del progetto. Questo crea un file di inizializzazione con alcune opzioni di configurazione.
Aggiungi il frammento JavaScript al layout della tua applicazione all'interno del tag <head> utilizzando l'aiuto phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Apri l'applicazione in 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 ad ogni richiesta di 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.

Primavera

Per installare l'editor In-Context 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 rendere tutte le traduzioni tramite Phrase, aggiungi il bean all'applicazione:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Fornisci l'aiuto JavaScript richiesto nei modelli esponendo l'aiuto come un bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Aggiungi il tag <script> ai tuoi modelli 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 di Phrase.

Esempio di codice sorgente dell'applicazione su GitHub

Come localizzare le applicazioni Spring come un professionista

Pacchetto starter di 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 l'In-Context editor verrà eseguito. Nell'esempio, il nuovo ambiente è chiamato traduzione.

Crea un nuovo file di configurazione:

# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

    traduttore.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 il frammento JavaScript al layout:

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

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

Documentazione di traduzione 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 l'In-Context editor verrà eseguito. Nell'esempio, il nuovo ambiente è chiamato traduzione.

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 passaggio del compilatore:

# 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 passaggi del compilatore 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 il frammento JavaScript al layout:

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

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

Documentazione di traduzione Symfony

Vue I18n

Nota

L'editor In-Context di Vue I18n Phrase 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 (registrati 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: 'Ciao, mondo!'
  }
});

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 Configurazione della frase come secondo.

Opzioni di configurazione e metodi di esempio.

Utilizzando il vecchio editor in contesto

Modalità Ajax

L'editor in contesto supporta Ajax e la manipolazione del DOM (cioè, tramite JavaScript) utilizzando 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 contesto. Per disabilitare la modalità Ajax, aggiungi il seguente valore di configurazione prima del frammento JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modalità Debug

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forzare una Locale

Per impostare esplicitamente una locale specifica all'avvio dell'editor in contesto, utilizza l'impostazione forceLocale. Questo è utile per preselezionare la locale attualmente visualizzata nella tua applicazione web nell'editor in contesto:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chiavi Ignorate

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

Le chiavi possono essere escluse dalla visualizzazione con l'editor in contesto. 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 del phraseapp-in-context-editor-ruby gem, aggiungi un array delle chiavi al file di inizializzazione phraseapp_in_context_editor.rb. Possono essere utilizzati anche caratteri jolly:

PhraseApp::InContextEditor.configure do |config|

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

end

Le chiavi che corrispondono a uno di questi modelli non saranno accessibili all'editor in contesto e verranno visualizzate normalmente.