In-context editor (Strings)

Contenuti tradotti automaticamente dall'inglese con Phrase Language AI.

Disponibile per

Piani Team, Professional, Business ed Enterprise

Mettiti in contatto con il reparto vendite per domande sulle licenze.

Disponibile per

Piano Advanced ed Enterprise (legacy)

Mettiti in contatto con il reparto vendite per domande sulle licenze.

L'In-context editor è progettato per fornire una Guida più efficiente ai traduttori e tradurre la pagina di un sito Web attraverso l'integrazione diretta con l'editor di traduzione Strings.

Attualmente sono disponibili due versioni:

L'In-context editor:

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

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

Installazione di Strings In-context editor

Requisiti

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

Siti web, applicazioni web, siti per dispositivi mobili, ecc.
I traduttori hanno accedere al server web che esegue l'editor Se necessario, potrebbe essere un ambiente locale.
Una struttura di file di localizzazione con valore chiave.

Siti Web con Strings traducibili estratte e un livello di visualizzazione che utilizza una struttura chiave-valore per eseguire il rendering delle traduzioni.
Nomi chiavi esposti alla visualizzazione o al livello modello.
Frammento JavaScript che esegue il rendering dell'editor.
Idealmente, un ambiente dedicato alle traduzioni. Questo può essere un clone di un ambiente di gestione temporanea e, sebbene ci sia più lavoro da configurare inizialmente, offre un flusso di lavoro migliore e più stabilità.

Se non è possibile creare un ambiente dedicato, è possibile utilizzare un ambiente di gestione temporanea esistente con la possibilità di abilitare In-context editor se necessario.

JavaScript Snippet

Includi il frammento JavaScript nel layout dell'applicazione.

Il frammento include il codice richiesto per:

Comunica con l'API Phrase Strings.
Esegui il rendering dell'interfaccia utente.
Fornisci il login.

ID progetto si trova nelle impostazioni progetto.

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

Esempio:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Non modificare questo nome perché la configurazione lavoro
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Imposta su 'us' per data center USA
      prefisso: '{___', // Impostato sul prefisso per il formato della chiave nei modelli di visualizzazione
      suffisso: "__}}", // Impostato sul suffisso per il formato della chiave nei modelli di visualizzazione
      disableShortcuts: false, // Imposta su true per disabilitare le combinazioni di tasti
      autoLowercase: true, // Imposta su false se le chiavi contengono lettere maiuscole
    };
  </script>
  <script type="module" async="" src="https://d2bgdl6xit7z.cloudfront.net/latest/ice/index.js"></script>

Installazioni di Web Framework

i18next

Nota

i18next Phrase In-context editor Post Processor supporta tutte le versioni di i18next più recenti della 19.5.1. Sebbene questa libreria possa lavoro anche con le versioni precedenti, non è supportata ufficialmente e potrebbe non ricevere aggiornamenti specifici o correzioni di bug.

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

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

# filato
Aggiungi 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 caricarlo tramite CDN:

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

Bootstrap (esempio):

importare i18next da 'i18next';
importare i18nextXHRBackend da 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: vero,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // caricare alcune traduzioni dall'archivio i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: vero
        }
    }, function(err, t) {
        // fai qualcosa sull'inizializzazione di i18next
    });

Per integrare la libreria:

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

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

Frammento di esempio:

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

Nota

è necessario fornire accountId per una corretta configurazione di ICE. L'ID account si trova nelle impostazioni dell'organizzazione Strings.

Se necessario, configurare l’attributo useOldICE per passare al Vecchio ICE:

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

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

Opzioni di configurazione e metodi di esempio.

Vue I18n

Nota

Vue I18n Phrase In-context editor supporta tutte le versioni di Vue I18n 8.17.5 e successive. Questa libreria può lavoro con le versioni precedenti, ma non è supportata ufficialmente e non otterrà 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:

# filato
aggiungere vue-i18n-phrase-in-context-editor

# npm
npm installa vue-i18n-Phrase-in-context-editor

o caricare con CDN (registrare manualmente la finestra['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):

importare Vue da 'vue';
importare VueI18n da 'vue-i18n';

Vue.use(VueI18n);

const i18n = nuovo VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messaggi: {
      hello: Ciao mondo!
  }
});

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

Per integrare la libreria:

Importare la libreria Vue I18n Phrase In-context editor.
Creare una nuova istanza Vue I18n Phrase In-context editor, passando l’istanza Vue I18n come primo argomento e Phrase Config come secondo.

Opzioni di configurazione e metodi di esempio.

React (intl)

Nota

Questa libreria potrebbe non lavoro con IE11 o browser meno recenti. Aggiungi Babel alla build pipeline se è richiesto il supporto per browser meno recente.

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

Per installare In-context editor in questo ambiente, segui questi passaggi:

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

Configura:

let config = {
  projectId: '<IL TUO_ID_PROGETTO>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: vero,
  prefisso: "[__",
  suffisso: "__]",
  fullReparse: vero
};

ID progetto di un progetto si trova nelle impostazioni progetto.

ID account si trova nelle impostazioni dell'organizzazione Strings.

Aggiungi il frammento all'app Reagisci:

importare {initializePhraseAppEditor} da 'react-intl-phraseapp'

let config = {
  projectId: '<IL TUO_ID_PROGETTO>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: vero,
  prefisso: "[__",
  suffisso: "__]",
  fullReparse: vero
};

initializePhraseAppEditor(config);

Trova tutte le importazioni di FormattedMessage e modifica l'origine da react-intl a react-intl-phraseapp.
```
importare {FormattedMessage} da 'react-intl-phraseapp'
```
Esegui unit test usando jest:
```
prova npm
```

Esempio di codice

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

Angolare 2 (ngx-translate)

Prerequisiti

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

Per installare In-context editor in questo ambiente, segui questi passaggi:

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

Configura:

importare { initializePhraseAppEditor, PhraseConfig } da 'ngx-translate-phraseapp';

lascia configurare: PhraseConfig = {
  projectId: '<IL TUO_ID_PROGETTO>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: vero,
};

ID progetto di un progetto si trova nelle impostazioni progetto.

ID account si trova nelle impostazioni dell'organizzazione Strings.

Se necessario, configurare l’attributo useOldICE per passare al Vecchio ICE:

let config = {
  projectId: '<IL TUO_ID_PROGETTO>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: vero,
  useOldICE: vero,
};

initializePhraseAppEditor(config);

Se necessario, Aggiungi gli URL specifici statunitensi per abilitare il lavoro attraverso 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/impostazioni/profilo",

Per impostazione predefinita, l’analizzatore di documenti dell’editor converte tutte le chiavi in minuscole. Se si verificano problemi con questo comportamento e si desidera usare chiavi maiuscole e minuscole all'interno dell'editor, disabilitare la funzione minuscole automatiche:
```
let config = {
  // ...
  autominuscolo: falso
}
```

Aggiungi questi frammenti all'app Angular:

app.component.ts

importare { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} da 'ngx-translate-phraseapp'

lascia configurare: PhraseConfig = {
  projectId: '<IL TUO_ID_PROGETTO>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: vero,
};

initializePhraseAppEditor(config);

app.module.ts

importare { TranslateModule, TranslateLoader, TranslateCompiler } da '@ngx-translate/core';
importare { HttpClientModule, HttpClient } da '@angular/common/http';
importare { PhraseAppCompiler } da 'ngx-translate-phraseapp'
importare { AppComponent } da './app.component';


esportare funzione HttpLoaderFactory(http: HttpClient) {
  restituire nuovo TranslateHttpLoader(http);
}

@NgModule({
  dichiarazioni: [
    AppComponent
  ],
  importazioni: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      caricatore: {
        fornire: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compilatore: {
        fornire: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  fornitori: [],
  bootstrap: [ComponenteApp]
})

Esempio di codice

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

Ruby on Rails (i18n)

Nota

Questa libreria potrebbe non lavoro Box per i browser meno recenti o Microsoft IE11. Aggiungi Babel alla pipeline di compilazione se quei browser devono essere supportati.

Prerequisiti

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

Per installare 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:
- Via Gemma
```
gemma installa phraseapp-in-context-editor-Ruby
```
- Via Bundler
  
  Aggiungilo al Gemfile:
```
gemma 'phraseapp-in-context-editor-Ruby
```
- Crea direttamente dall'origine per ottenere le ultime novità:
```
bundle && gem build
```
Creare il file di inizializzazione eseguendo il generatore Rails:
```
Rails genera phraseapp_in_context_editor:install --account_ID=<YOUR_ACCOUNT_ID> --project-ID=<YOUR_PROJECT_ID>
```
ID progetto di un progetto si trova nelle impostazioni progetto.

ID 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 = vero
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "eu"

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

  config.enabled = vero
  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'In-context editor applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Esempio di codice

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

Django

Prerequisiti

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

Nota

La vecchia versione di ICE non è disponibile dalla versione 2.0.0.

Per installare In-context editor in questo ambiente, segui questi passaggi:

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

    'phrase',

)
```
Aggiungi i seguenti frammenti di modello al file di layout templates/base_generic.html o equivalente:
```
{% carica Phrase_i18n %}
{% phrase_javascript %}
```
Usa il tag modello Phrase_i18n nei modelli (per esempio, demo/ice_demo/templates/index.html):
```
{% carica Phrase_i18n %}
```

Aggiungi la seguente configurazione a impostazioni.py:

    # impostazioni di Phrase In-context editor
    PHRASE_ENABLED = Vero
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID" # Imposta il tuo ID account
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID" # Imposta il tuo ID progetto
    PHRASE_DATACENTER = "eu" # Scegli il tuo datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{___"
    PHRASE_SUFFIX = "__}}"

ID progetto di un progetto si trova nelle impostazioni progetto.

ID account si trova nelle impostazioni dell'organizzazione Strings.

In caso di problemi, è possibile integrare manualmente il .

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

Codice adattatore Django su GitHub

Esempio di codice

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

Flask

Prerequisiti

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

Nota

La vecchia versione di ICE non è disponibile dalla versione 2.0.0.

Per installare In-context editor in questo ambiente, segui questi passaggi:

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

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

PHRASEAPP_ENABLED = Vero
PHRASEAPP_PREFIX = '{___'
PHRASEAPP_SUFFIX = '__}}'

Il codice dell'app dovrebbe essere simile a questo:

dal pallone importare [...]
da flask_babel importare Babel
da flask_Phrase importare Phrase, gettext, ngettext
app = Flask(__nome__)
babel = Babel (app)
Phrase = Phrase (app)

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

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

ID progetto di un progetto si trova nelle impostazioni progetto.

ID account si trova nelle impostazioni dell'organizzazione Strings.

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

window.PHRASEAPP_CONFIG = {
    projectId: "IL TUO ID PROGETTO",
    accountId: "IL TUO ID ACCOUNT",
    datacenter: "noi",
};

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

Esempio di codice

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

Symfony 5.x

Prerequisiti

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

Nota

La versione 2.0.0 supporta Symfony 5 e superiori. Se usi Symfony 2, 3 o 4, controlla il vecchia versione di ICE.

Per integrare l'In-context editor con l'applicazione Symfony, segui questi passaggi:

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

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

servizi:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decora: traduttore

Aggiungi il seguente frammento JavaScript al modello di layout di base o Twig tra i {% block javascript %} in modo che l'In-context editor possa leggere la pagina web:

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        centro dati: "eu",
        origine: 'Phrase-symfony',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'modulo';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/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.

ID progetto di un progetto si trova nelle impostazioni progetto.

ID account si trova nelle impostazioni dell'organizzazione Strings.

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

window.PHRASEAPP_CONFIG = {
    projectId: "IL TUO ID PROGETTO",
    accountId: "IL TUO ID ACCOUNT",
    datacenter: "noi",
};

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

Esempio di codice

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

Impostazione dell'In-context editor

Esporre nomi chiavi

In genere, un livello di visualizzazione esegue il rendering delle traduzioni passando il nome di una stringa traducibile (es. la chiave) a un metodo di traduzione o a un visualizzatore ordinato.

Esempio di codice PHP:

$translations = array(

  "page.headline" => "Qualche titolo",

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

  "page.link.hint" => "Clicca su di me"

)

funzione translate($keyName) {

  restituire $translations[$keyName];

}

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

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

Formattazione

Nel modello deve essere indicato per quali chiavi eseguire il rendering delle traduzioni.

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

{{__phrase_NameOfYourKey__}}

Esempio:

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

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

funzione translate($keyName) {

  if ($phraseModeEnabled) {

    restituire "";

  } else {

    restituire $translations[$keyName];

  }

}

A seconda del quadro, gli aiuti di traduzione nel codice possono essere sovrascritti o può essere creata una versione avvolta da usare nei modelli.

Esempio:

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

Sfuggita a nomi chiavi e caratteri speciali

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

I caratteri nel seguente elenco devono essere eliminati se esposti a 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 e minuscole

Per impostazione predefinita, l’analizzatore di documenti dell’In-context editor converte tutte le chiavi in minuscole. Se si verificano problemi con questo comportamento e si desidera usare chiavi maiuscole e minuscole all'interno dell'In-context editor, disabilitare la funzione minuscola automatica:

window.PHRASEAPP_CONFIG = {

  autominuscolo: falso

}

Personalizza i decoratori chiave

Quando si utilizza l'In-context editor, i nomi delle chiave sono in genere avvolti da decoratori (parentesi arricciate, per impostazione predefinita) per generare chiavi identificative univoche nel contesto di un documento:

{{__phrase_YOUR.KEY__}}

Se ciò causa conflitti con altre librerie (ad esempio motori modello lato cliente, tra cui AngularJS ed Ember.js) che usano una sintassi simile, modificare il prefisso decoratore dell’In-context editor e il suffisso nella configurazione. Per dire all'In-context editor quali decoratori dovrebbe cercare il parser, Aggiungi i seguenti valori di configurazione prima del frammento JavaScript:

window.PHRASEAPP_CONFIG = {

  prefisso: "[__",

  suffisso: "__]"

}

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

[[__phrase_YOUR.KEY__]]

Se si utilizza la gemma Phraseapp-in-context-editor-Ruby per fornire funzionalità In-context editor, assicurarsi che i decoratori siano configurati:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

fine

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

Abilitazione e disabilitazione dell'In-context editor

Questa impostazione è disponibile solo quando si usa 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. Ciò influisce sull'inclusione del frammento JavaScript (quando si utilizza l'aiuto visualizzazione) e sul rendering dei nomi delle chiavi decorate nelle visualizzazioni:

PhraseApp::InContextEditor.enabled = true|false

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

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

Riparazione completa

Abilita fullReparse se utilizzi l'In-context editor con un quadro JavaScript che utilizza DOM virtuale come React. Ciò consente una corretta preparazione quando si rilevano modifiche al DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: vero

}

Sanifica l'output nella pagina web

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:

importare escape da “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    disinfettare: scappare

}

Single sign-on

Se si utilizza il single sign-on e si desidera inizializzare l'In-context editor con SSO attivato, Aggiungi il seguente valore di configurazione prima del frammento JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    abilitato: true,
    
    fornitore: 'saml',

    identifier: [insert_company_identifier]

  }

}

Per richiedere agli utenti di accedere utilizzando SSO, impostare il parametro forzato:

window.PHRASEAPP_CONFIG = {

  sso: {

    forzato: vero

  }

}

Vecchio In-context editor: Configurazione

Istallazioni Web Framework

Angolare 2 (ngx-translate)

Per installare In-context editor in questo ambiente, segui questi passaggi:

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

Configura:

let config = {
  projectId: '<IL TUO_ID_PROGETTO>',
  phraseEnabled: vero,
  prefisso: "{____",
  suffisso: "__}}",
  fullReparse: vero
};

ID progetto di un progetto si trova nelle impostazioni progetto.

Per impostazione predefinita, l’analizzatore di documenti dell’editor converte tutte le chiavi in minuscole. Se si verificano problemi con questo comportamento e si desidera usare chiavi maiuscole e minuscole all'interno dell'editor, disabilitare la funzione minuscole automatiche:
```
let config = {
  // ...
  autominuscolo: falso
}
```

Aggiungi questi frammenti all'app Angular:

app.component.ts

importare { initializePhraseAppEditor, PhraseAppCompiler} da 'ngx-translate-phraseapp'

let config = {
  projectId: '<IL TUO_ID_PROGETTO>',
  phraseEnabled: vero,
  prefisso: "{____",
  suffisso: "__}}",
  fullReparse: vero
};

initializePhraseAppEditor(config);

app.module.ts

importare { TranslateModule, TranslateLoader, TranslateCompiler } da '@ngx-translate/core';
importare { HttpClientModule, HttpClient } da '@angular/common/http';
importare { PhraseAppCompiler } da 'ngx-translate-phraseapp'

esportare funzione HttpLoaderFactory(http: HttpClient) {
  restituire nuovo TranslateHttpLoader(http);
}

@NgModule({
  dichiarazioni: [
    AppComponent
  ],
  importazioni: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      caricatore: {
        fornire: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compilatore: {
        fornire: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  fornitori: [],
  bootstrap: [ComponenteApp]
})

Esempio di codice

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

AngularJS (angular-translate)

Per installare In-context editor in questo ambiente, segui questi passaggi:

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

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
ID progetto di un progetto si trova nelle impostazioni progetto. Viene creato 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 qualsiasi browser web per vedere l'In-context editor applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Phrase angolare su GitHub

Esempio di codice

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

Django

Per installare 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 modello Phrase_i18n nei modelli:
```
{% carica Phrase_i18n %}
```
Per consentire a django-Phrase di sostituire i metodi di traduzione, caricare Phrase_i18n dopo i18n.
Aggiungi il frammento JavaScript al layout:
```
{% phrase_javascript %}
```

Configurare l’In-context editor per il progetto con queste opzioni:

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

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

Codice adattatore Django su GitHub

Esempio di codice

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

Reagisci (intl)

Nota

Questa libreria potrebbe non lavoro con IE11 o browser meno recenti. Aggiungi Babel alla build pipeline se è richiesto il supporto per browser meno recente.

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

Per installare In-context editor in questo ambiente, segui questi passaggi:

Installa il pacchetto tramite NPM:
```
npm installa react-intl-phraseapp
```
o compila dall'origine:
```
npm run dist
```
```
npm install
```

Configura:

let config = {
  projectId: '<IL TUO_ID_PROGETTO>',
  phraseEnabled: vero,
  prefisso: "[__",
  suffisso: "__]",
  fullReparse: vero
};

ID progetto di un progetto si trova nelle impostazioni progetto.

Aggiungi il frammento all'app Reagisci:

importare {initializePhraseAppEditor} da 'react-intl-phraseapp'

let config = {
  projectId: '<IL TUO_ID_PROGETTO>',
  phraseEnabled: vero,
  prefisso: "[__",
  suffisso: "__]",
  fullReparse: vero
};

initializePhraseAppEditor(config);

Trova tutte le importazioni di FormattedMessage e modifica l'origine da react-intl a react-intl-phraseapp.
```
importare {FormattedMessage} da 'react-intl-phraseapp'
```
Esegui unit test usando jest:
```
prova npm
```

Esempio di codice

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

Ruby on Rails (i18n)

Per installare 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
  gemma 'phraseapp-in-context-editor-Ruby'
 fine
```
e installarlo eseguendo il comando bundle:
```
$ installazione bundle
```
Installa il gioiello phraseapp-in-context-editor-Ruby eseguendo il generatore Rails:
```
$ bundle exec Rails genera phraseapp_in_context_editor:install --access-token=YOUR_ACCEDERE_TOKEN --project-ID=YOUR_PROJECT_ID
```
--access-token

creare e gestisci i token di accedere nelle impostazioni del profilo o tramite API Autorizzazioni.

--project-id

ID progetto di un progetto si trova nelle impostazioni progetto. Viene creato 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'In-context editor applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.
disabilitare i Turbolink (se utilizzati)

Turbolinks rimuove tutti gli elementi dell'interfaccia utente In-context Editor dalla pagina in 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 di Phrase In-context editor con react-i18next.

Primavera

Per installare In-context editor in questo ambiente, segui questi passaggi:

Assicurati che il pacchetto com.phraseapp.incontexteditor sia disponibile nell'app.
Impostare l’ID progetto corretto e regolare 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() {

    restituire nuova PhraseAppMessageSource();

}

Fornisci l'helper JavaScript richiesto nei modelli esponendo l'helper come un fagiolo:

@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>

Riavviare l'applicazione e accedere con credenziali utente Phrase.

Esempio di codice origine applicazione su GitHub

Come localizzare le applicazioni Spring come un professionista

Pacchetto Spring Boot Starter (fornito da ePages)

Symfony 2.x

Per installare In-context editor in questo ambiente, segui questi passaggi:

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

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

importazioni:

    - { risorsa: config.yml }

parametri:

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

Creare un controller per rendere accessibile il browser dell'ambiente:

# web/app_translation.php

<?php

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

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

usare Symfony\Component\HttpFoundation\Request;

$kernel = nuovo AppKernel('traduzione', falso);

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

Sostituisci il metodo di traduzione standard ordine esporre i nomi delle chiave all'In-context editor:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

spazio dei nomi Acme\YourBundle\Translation;

usare Symfony\Bundle\FrameworkBundle\Translation\Translator come BaseTranslator;

PhraseTranslator estende BaseTranslator

{

    funzione pubblica trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

    {

        $prefix = "";

        if (!isset($impostazioni locali)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Restituisce i valori tradotti per il dominio 'routes'

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

        } else {

            // Restituisci le chiavi di traduzione di PhraseApp per tutti gli altri domini

            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'In-context editor 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 In-context editor in questo ambiente, segui questi passaggi:

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

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

importazioni:

   - { risorsa: config.yml }
```

Creare un controller per rendere accessibile il browser dell'ambiente:

# web/app_translation.php

<?php

usare Symfony\Component\HttpFoundation\Request;

$loader = require __DIR__.'/../app/autoload.php';

$kernel = nuovo AppKernel('traduzione', vero);

$kernel->loadClassCache();

$request = Request::createFromGlobals();

$response = $kernel->handle($request);

$response->send();

$kernel->terminate($richiesta, $risposta);

Sostituisci il metodo di traduzione standard ordine esporre i nomi delle chiave all'In-context editor:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

spazio dei nomi AppBundle\Translation;

usare Symfony\Bundle\FrameworkBundle\Translation\Translator come BaseTranslator;

PhraseTranslator estende BaseTranslator

{

   funzione pubblica trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

   {

       $prefix = "";

       if (null === $dominio) {

           $domain = 'messaggi';

       }

       // Restituisce l'ID della chiave di traduzione con pre-e suffisso per PhraseApp

       return $prefix.$id.$suffix;

   }

}

Assicurati che la classe venga sempre sovrascritta quando il bundle viene utilizzato con una pass del compilatore:

# src/AppBundle/DependencyInjection/Compiler/OverrideServiceCompilerPass.php

<?php

spazio dei nomi AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

usare Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   processo di funzione pubblica (ContainerBuilder $container)

   {

       $definition = $container->getDefinition('translator.default');

       $definition->setClass('AppBundle\Translation\PhraseTranslator');

   }

}

Se si utilizzano pass per compilatori separati, registrarli nel metodo build() della classe bundle:

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

usare Symfony\Component\HttpKernel\Bundle\Bundle;

usare Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

La classe AppBundle estende il Bundle

{

   build di funzione pubblica (ContainerBuilder $container)

   {

       entità principale::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'In-context editor applicato all'app. Accedi con qualsiasi utente dell'organizzazione Phrase.

Documentazione di traduzione Symfony

Vue I18n

Nota

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

Installa il pacchetto con il gestore di pacchetti preferito:

# filato
aggiungere vue-i18n-phrase-in-context-editor

# npm
npm installa vue-i18n-Phrase-in-context-editor

o caricare con CDN (registrare manualmente la finestra['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):

importare Vue da 'vue';
importare VueI18n da 'vue-i18n';

Vue.use(VueI18n);

const i18n = nuovo VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messaggi: {
      hello: Ciao mondo!
  }
});

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

Per integrare la libreria:

Importare la libreria Vue I18n Phrase In-context editor.
Creare una nuova istanza Vue I18n Phrase In-context editor, passando l’istanza Vue I18n come primo argomento e Phrase Config come secondo.

Opzioni di configurazione e metodi di esempio.

Uso del vecchio In-context editor

Modalità Ajax

In-context editor supporta la manipolazione Ajax e DOM (es. tramite JavaScript) utilizzando gli osservatori di mutazione.

La modalità Ajax può causare problemi in alcuni casi e può causare gravi problemi di prestazioni durante l'utilizzo dell'In-context editor. Per disabilitare la modalità Ajax, Aggiungi il seguente valore di configurazione prima del frammento JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: falso

}

Modalità debug

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

window.PHRASEAPP_CONFIG = {

  debugMode: vero

}

Forzare le impostazioni locali

Per impostare esplicitamente impostazioni locali specifiche all'avvio dell'In-context editor, utilizzare l'impostazione forceLocale. Questo è utile per preselezionare le impostazioni locali attualmente visualizzate nella tua applicazione web anche nell'In-context editor:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chiavi ignorate

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

Le chiavi possono essere 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 formato data e ora. Per escludere che le chiavi vengano gestite automaticamente dalla gemma Phraseapp-in-context-editor-Ruby, Aggiungi un array di chiavi al file di inizializzazione phraseapp_in_context_editor.rb. I caratteri jolly possono anche essere utilizzati:

PhraseApp::InContextEditor.configure do |config|

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

fine

Le chiavi che corrispondono a uno qualsiasi di questi modelli non saranno rese accessibili all'In-context editor e vengono renderizzate normalmente.