Editor in contesto (Stringhe)

Contenuti tradotti automaticamente dall'inglese con Phrase Language AI.

Disponibile per

Piani Team, Professionale, 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 contesto è 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 editor di traduzione.

Attualmente, sono disponibili due versioni:

L'editor in contesto:

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

Dopo aver installato l'editor in contesto, può essere personalizzato per lavorare con molte tecnologie.

Installazione dell'Editor in Contesto delle Stringhe

Requisiti

Per utilizzare l'editor in contesto, 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 un livello di visualizzazione che utilizza una struttura chiave-valore per rendere le traduzioni.
Nomi delle chiavi esposti al livello 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'In-Context Editor secondo necessità.

Snippet JavaScript

Includere lo snippet JavaScript nel layout dell'applicazione.

Lo snippet include il codice necessario per:

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

ID del Progetto si trova nelle impostazioni del progetto.

ID dell'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 del Framework Web

i18next

Nota

Il Post Processor In-Context Editor di i18next Phrase 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'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 consigliate della libreria sono 1.4.0 o più recenti.

o caricarla tramite CDN:

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

Bootstrap (esempio):

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

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // load some translations from i18next-gitbook repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // do something on i18next initialization
    });

Per integrare la libreria:

Importa PhraseInContextEditorPostProcessor dalla libreria i18next-phrase-in-context-editor-post-processor.
Crea una nuova istanza di i18next Phrase In-Context Editor Post Processor, passando PhraseConfig come argomento.
Passa la nuova istanza di i18next Phrase In-Context Editor Post Processor a i18next con il metodo 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 al vecchio 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 specifici o correzioni di bug.

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

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

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

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

o carica 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: 'Hello world!'
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

Per integrare la libreria:

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

Opzioni di configurazione e metodi di esempio.

React (intl)

Nota

Questa libreria potrebbe non funzionare con IE11 o browser più vecchi. Aggiungi Babel alla pipeline di 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 nuovo pacchetto tramite NPM:
```
npm install react-intl-phraseapp
```
o costruisci dal 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 tutti gli import 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
```

Esempio di codice

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

Angular 2 (ngx-translate)

Requisiti

Registrati per un account di 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 al vecchio ICE:

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

initializePhraseAppEditor(config);

Se necessario, aggiungi gli URL specifici per gli Stati Uniti per 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 usare 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: {
        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 immediatamente per i browser più vecchi o Microsoft IE11. Aggiungi Babel alla pipeline di build se quei browser devono essere supportati.

Prerequisiti

Registrati per un account di Phrase Strings.
Usa l'ottima i18n gem utilizzata anche da Rails.

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

Aggiungi la phraseapp-in-context-editor-ruby libreria all'ambiente desiderato utilizzando uno dei seguenti metodi:
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Via Bundler
  
  Aggiungilo al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Costruisci direttamente dalla sorgente per ottenere il meglio e il più recente:
```
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, imposta il data center statunitense per abilitare il lavoro con gli endpoint statunitensi:

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

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

Esempio di codice

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

Django

Prerequisiti

Registrati per un account di 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 frammento JavaScript.

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

Codice dell'adattatore Django su GitHub

Esempio di codice

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

Flask

Prerequisiti

Registrati per un account di 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 la frase JavaScript snippet al file di layout di base con il seguente tag (dovrebbe andare all'interno della sezione del file del 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 del progetto di un progetto si trova nelle impostazioni del progetto.

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

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

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

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

Esempio di codice

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

Symfony 5.x

Prerequisiti

Registrati per un account di 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 i suoi contenuti nella cartella /src/Service del repository o nella posizione desiderata. Se posizionato altrove, regola il namespace di conseguenza.

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

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

Aggiungi il seguente frammento JavaScript al modello di layout di 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, 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 di Phrase per avviare il processo di traduzione direttamente sulla pagina web.

Esempio 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, un livello 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.

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 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, gli helper di traduzione nel codice possono essere sovrascritti o può essere creata una versione avvolta da utilizzare nei modelli.

Esempio:

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

Evasione dei Nomi delle Chiavi e dei Caratteri Speciali

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

I caratteri nella seguente lista devono essere evasi 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 si riscontrano problemi con questo comportamento e si desidera utilizzare chiavi sensibili al maiuscolo all'interno dell'In-Context Editor, disabilitare la funzione automatica di minuscole:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizza Decoratori di Chiave

Quando si utilizza l'In-Context editor, i nomi delle chiavi sono tipicamente racchiusi con decoratori (parentesi graffe, per impostazione predefinita) per generare chiavi di identificazione uniche 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 utilizzano 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 dovrebbe cercare, aggiungere i seguenti valori di configurazione prima del frammento JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

Se si utilizza il phraseapp-in-context-editor-ruby gem per fornire funzionalità all'In-Context editor, 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'In-Context Editor

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

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

L'In-Context editor può essere esplicitamente abilitato o disabilitato. Questo influisce sull'inclusione del frammento JavaScript (quando si utilizza l'helper di 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'In-Context editor 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

}

Sanitizza l'output per la pagina web

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

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

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Single Sign-on

Se si utilizza single sign-on e si desidera inizializzare l'editor In-Context 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 Editor In-Context: Configurazione

Installazioni del Framework Web

Angular 2 (ngx-translate)

Per installare l'editor In-Context in questo ambiente, seguire 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 si riscontrano problemi con questo comportamento e si desidera utilizzare chiavi sensibili al maiuscolo all'interno dell'editor, disabilitare la funzione automatica di 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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Esempio 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, seguire 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

Esempio 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, seguire 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 dell'adattatore Django su GitHub

Esempio di codice

Questa applicazione demo 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, seguire 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 utilizzando jest:
```
npm test
```

Esempio 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, seguire questi passaggi:

Aggiungi la gem phraseapp-in-context-editor-ruby all'ambiente che desideri utilizzare con l'In-Context Editor:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e installala eseguendo il comando bundle:
```
$ bundle install
```
Installa la gem 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 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 caricamento 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'editor In-Context di Phrase con react-i18next.

Primavera

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

Assicurati che il package com.phraseapp.incontexteditor sia disponibile nell'app.
Imposta l'ID del progetto corretto 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, seguire questi passaggi:

Crea un nuovo ambiente in cui l'editor In-Context 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:

    translator.class: Acme\YourBundle\Translation\PhraseTranslator

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

# web/app_translation.php

<?php

require_once __DIR__.'/../app/bootstrap.php.cache';

require_once __DIR__.'/../app/AppKernel.php';

use Symfony\Component\HttpFoundation\Request;

$kernel = new AppKernel('translation', false);

$kernel->handle(Request::createFromGlobals())->send();

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

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Aggiungi 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 sulla traduzione di Symfony

Codice dell'adattatore Symfony 2.x su GitHub

Symfony 3.x

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

Crea un nuovo ambiente in cui l'editor In-Context 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 sulla traduzione di Symfony

Vue I18n

Nota

L'editor di frasi in contesto 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 specifici o correzioni di bug.

Per installare l'editor in contesto 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: '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 Config di 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 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à di Debug

Per abilitare la modalità di 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'In-Context editor, usa l'impostazione forceLocale. Questo è utile per preselezionare la locale attualmente visualizzata nella tua applicazione web anche nell'In-Context editor:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chiavi Ignorate

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

Le chiavi possono essere escluse 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 data e ora. Per escludere le chiavi dalla gestione automatica da parte del gem phraseapp-in-context-editor-ruby, aggiungi un array delle chiavi al file di inizializzazione phraseapp_in_context_editor.rb. I caratteri jolly possono essere utilizzati anche:

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 rese accessibili all'In-Context editor e verranno visualizzate normalmente.