In-context Editor (Strings)

Obsah je strojově přeložen z angličtiny s použitím Phrase Language AI.

K dispozici pro

Plány Team, Professional, Business, Enterprise a Software UI/UX

S dotazy ohledně licencí se obraťte na prodejní oddělení.

K dispozici pro

Edice Advanced a Enterprise (starší)

S dotazy ohledně licencí se obraťte na prodejce.

In-context Editor je navržen tak, aby pomohl překladatelům efektivněji dokončit práci a přeložit webovou stránku prostřednictvím přímé integrace s překladový editor Strings.

V současné době jsou k dispozici dvě verze:

In-context Editor:

Zahrnuje nové funkce (vícejazyčný pohled, možnosti rozvržení, dávkové akce, funkce pro spolupráci atd.) a uživatelské rozhraní z překladový editor.
starý In-context Editor.

Po instalaci In-context Editoru jej lze přizpůsobit pro práci s mnoha technologiemi.

Instalace In-context Editoru Strings

Požadavky

K použití In-context Editoru aplikace vyžaduje:

Webové stránky, webové aplikace, mobilní weby atd.
Překladatelé mají přístup k webovému serveru, na kterém běží editor. V případě potřeby to může být lokální prostředí.
Struktura lokalizačního souboru typu klíč-hodnota.

Webové stránky s extrahovanými Strings (překládaný text) a vrstvou zobrazení, která k vykreslení překladů používá strukturu klíč-hodnota.
Názvy klíčů vystavené vrstvě zobrazení nebo šablony.
JavaScriptový úryvek, který vykresluje editor.
Ideálně vyhrazené prostředí pro překlady. Může se jednat o klon stagingového prostředí, a i když je počáteční nastavení náročnější na zakázku, poskytuje lepší pracovní postup a vyšší stabilitu.

Pokud není možné vytvořit vyhrazené prostředí, lze použít stávající stagingové prostředí s možností aktivace In-context Editoru podle potřeby.

JavaScript Snippet

Zahrňte javascriptový úryvek do rozvržení aplikace.

Úryvek obsahuje kód potřebný k:

Komunikaci s Phrase Strings API.
Vykreslení uživatelského rozhraní.
Poskytnutí přihlášení.

ID projektu naleznete v nastavení projektu.

ID uživatelského účtu naleznete v nastavení organizace Strings.

Ukázka:

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

Instalace webových frameworků

i18next

Poznámka

Postprocesor i18next Phrase In-context Editor podporuje všechny verze i18next novější než 19.5.1. Ačkoliv tato knihovna může fungovat i s předchozími verzemi, nejsou oficiálně podporovány a nemusí pro ně být dostupné žádné konkrétní aktualizace ani opravy chyb.

Chcete-li v tomto prostředí nainstalovat In-context Editor, postupujte podle těchto kroků:

Nainstalujte knihovnu i18next-phrase-in-context-editor-post-processor pomocí preferovaného správce balíčků:

# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor

Poznámka

Doporučené verze knihovny jsou 1.4.0 nebo novější.

nebo ji načtěte přes CDN:

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

Bootstrap (ukázka):

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

Pro integraci knihovny:

importujte PhraseInContextEditorPostProcessor z knihovny i18next-phrase-in-context-editor-post-processor.
Vytvořte novou instanci i18next Phrase In-context Editor Post Processor a předejte PhraseConfig jako argument.
Předejte nově vytvořenou instanci i18next Phrase In-context Editor Post Processor metodě i18next use.
Přidejte řetězec phraseInContextEditor do vlastnosti pole postProcess (předané v rámci konfiguračního objektu metody i18next init).

Přidejte JavaScriptový úryvek ICE k instanci i18next v nastavení.

Ukázkový úryvek:

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

Poznámka

accountId musí být poskytnuto pro úspěšné nastavení ICE. ID uživatelského účtu naleznete v nastavení organizace Strings.

V případě potřeby nakonfigurujte atribut useOldICE pro přepnutí na starý In-context Editor:

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

Spusťte In-context Editor.
Otevřete aplikaci ve webovém prohlížeči pro zobrazení In-context Editoru. Přihlaste se pomocí jakéhokoli uživatele organizace Phrase.

Možnosti konfigurace a ukázkové metody.

Vue I18n

Poznámka

Vue I18n Phrase In-context Editor podporuje všechny verze Vue I18n 8.17.5 a novější. Tato knihovna může fungovat i s předchozími verzemi, ale ty nejsou oficiálně podporovány a nebudou pro ně vydávány žádné specifické aktualizace ani opravy chyb.

Chcete-li v tomto prostředí nainstalovat In-context Editor, postupujte podle těchto kroků:

Nainstalujte nejnovější balíček pomocí preferovaného správce balíčků:

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

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

nebo načtěte pomocí CDN (zaregistrujte ručně 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 (ukázka):

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

Pro integraci knihovny:

importujte knihovnu Vue I18n Phrase In-context Editor.
vytvořit novou instanci Vue I18n Phrase In-context Editor, přičemž jako první argument předejte instanci Vue I18n a jako druhý Phrase Config.

Možnosti konfigurace a ukázkové metody.

React (intl)

Poznámka

Tato knihovna nemusí fungovat jako zakázka s IE11 nebo staršími prohlížeči. Pokud je vyžadována podpora starších prohlížečů, přidejte Babel do sestavovacího kanálu.

Tato knihovna dědí běžné komponenty balíčků react-intl. Pokud je Phrase povoleno voláním initializePhraseAppEditor, chování komponent se změní.

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte nejnovější balíček přes NPM:
```
npm install react-intl-phraseapp
```
nebo sestavte ze zdroje:
```
npm run dist
```
```
npm install
```

Konfigurace:

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

ID projektu projektu naleznete v nastavení projektu.

ID uživatelského účtu naleznete v nastavení organizace Strings.

přidat úryvek do aplikace 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);

Najděte všechny importy FormattedMessage a změňte zdroj z react-intl na react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Spusťte jednotkové testy pomocí jest:
```
npm test
```

Vzor kódu

Tato ukázka ukazuje integrace Phrase In-context Editor s react-intl.

Angular 2 (ngx-translate)

Předpoklady

vytvořit účet pro uživatelský účet Phrase Strings.
Použít modul ngx-translate pro lokalizaci v aplikacích Angular 2.

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Instalovat pomocí NPM:
```
npm install ngx-translate-phraseapp
```

Konfigurace:

import { initializePhraseAppEditor, PhraseConfig } from 'ngx-translate-phraseapp';

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

ID projektu projektu naleznete v nastavení projektu.

ID uživatelského účtu naleznete v nastavení organizace Strings.

V případě potřeby nakonfigurujte atribut useOldICE pro přepnutí na starý In-context Editor:

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

initializePhraseAppEditor(config);

V případě potřeby přidat adresy URL specifické pro USA, abyste mohli Povolit práci přes datové centrum<1> v USA:

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",

Ve výchozím nastavení parser dokumentu editoru převádí všechny klíče na malá písmena. Pokud narazíte na problémy s tímto chováním a chcete použít klíče rozlišující malá a velká písmena v editoru, zakázat funkci automatických malých písmen:
```
let config = {
  // ...
  autoLowercase: false
}
```

Přidat tyto úryvky do aplikace 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]
})

Vzor kódu

Tato demo aplikace předvádí integraci In-context Editoru s Angular a ngx-translate.

Ruby on Rails (i18n)

Poznámka

Tato knihovna nemusí fungovat ihned po instalaci ve starších prohlížečích nebo Microsoft IE11. Přidat Babel do sestavovacího procesu, pokud je třeba tyto prohlížeče podporovat.

Předpoklady

vytvořit účet pro uživatelský účet Phrase Strings.
Použít vynikající gem i18n, který používá také Rails.

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Přidat knihovnu phraseapp-in-context-editor-ruby do požadovaného prostředí pomocí jedné z následujících metod:
- Přes Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Přes Bundler
  
  Přidat jej do Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Sestavit přímo ze zdroj, abyste získali to nejnovější a nejlepší:
```
bundle && gem build
```
Vytvořte inicializační soubor spuštěním generátoru Rails:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
ID projektu projektu naleznete v nastavení projektu.

ID uživatelského účtu naleznete v nastavení organizace Strings.
Přidat Ruby úryvek do rozvržení aplikace app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Přidat následující nastavení do inicializátoru /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"

V případě potřeby nastavte datové centrum US pro Povolit práci s koncovými body US:

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

Otevřete aplikaci v libovolném webovém prohlížeči, abyste viděli In-context Editor aplikovaný na aplikaci. Přihlaste se pomocí jakéhokoli uživatele organizace Phrase.

Vzor kódu

Toto demo ukazuje integrace Phrase In-context Editor s react-i18next.

Django

Předpoklady

vytvořit účet pro uživatelský účet Phrase Strings.
Použít Django framework pro Python.

Poznámka

Stará verze ICE není od verze 2.0.0 k dispozici.

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte balíček django-phrase pomocí pip:
```
$ pip install django-phrase
```
Přidat Phrase do seznamu nainstalovaných aplikací:
```
INSTALLED_APPS = (

    'phrase',

)
```
Přidat následující šablona úryvky do souboru rozvržení templates/base_generic.html nebo ekvivalentu:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Použít phrase_i18n šablona tag v šablonách (například demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Přidat následující nastavení do 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 = "__}}"

ID projektu projektu naleznete v nastavení projektu.

ID uživatelského účtu naleznete v nastavení organizace Strings.

V případě problémů je možné integrovat JavaScript snippet ručně.

Otevřete aplikaci v libovolném webovém prohlížeči, abyste viděli In-context Editor aplikovaný na aplikaci. Přihlaste se pomocí jakéhokoli uživatele organizace Phrase.

Kód adaptéru Django na GitHub

Vzor kódu

Tato demo aplikace demonstruje, jak integrovat In-context Editor s aplikací Django.

Flask

Předpoklady

vytvořit účet pro uživatelský účet Phrase Strings.
Použít Flask framework pro Python.

Poznámka

Stará verze ICE není od verze 2.0.0 k dispozici.

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte balíček Flask-Phrase pomocí pip:
```
pip install Flask-Phrase
```

Přidejte následující konfiguraci do aplikace Flask (app.config nebo config.py):

PHRASEAPP_ENABLED = True
PHRASEAPP_PREFIX = '{{__'
PHRASEAPP_SUFFIX = '__}}'

Kód aplikace by měl vypadat podobně jako tento:

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)

Přidejte Phrase JavaScript snippet do souboru základního rozvržení s následujícím tag (měl by být umístěn uvnitř sekce souboru šablona):

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

ID projektu projektu naleznete v nastavení projektu.

ID uživatelského účtu naleznete v nastavení organizace Strings.

V případě potřeby nastavte datové centrum US pro Povolit práci s koncovými body US:

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

Když je PHRASEAPP_ENABLED = True, balíček upraví vracené hodnoty z překladových funkcí tak, aby prezentovaly formát, který může ICE číst. Při nastavení na False se vrátí ke standardním funkcím gettext Flask-Babel's.

Vzor kódu

Tato demo aplikace demonstruje, jak integrovat In-context Editor s aplikací Flask.

Symfony 5.x

Předpoklady

vytvořit účet pro uživatelský účet Phrase Strings.
Použít Symfony framework pro PHP.

Poznámka

Verze 2.0.0 podporuje Symfony 5 a vyšší. Pokud používáte Symfony 2, 3 nebo 4, podívejte se na starou verzi In-context Editor.

Pro integraci In-context Editor s aplikací Symfony postupujte podle těchto kroků:

Zkopírujte PhraseStringsInContextEditor a jeho obsah do složky /src/Service v úložišti nebo na požadované místo. Pokud je umístěn jinde, odpovídajícím způsobem upravte jmenný prostor.

Upravte config/services.yaml pro dekorování služby translator pomocí adaptéru Phrase:

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

Přidejte následující JavaScript snippet do základní nebo Twig šablony rozvržení mezi {% block javascripts %}, aby In-context Editor mohl číst webovou stránku:

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

Aplikace Symfony je nyní připojena k In-context Editor.

ID projektu projektu naleznete v nastavení projektu.

ID uživatelského účtu naleznete v nastavení organizace Strings.

V případě potřeby nastavte datové centrum US pro Povolit práci s koncovými body US:

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

Znovu načtěte aplikaci a přihlaste se pomocí přihlašovací údaje Phrase, abyste mohli zahájit proces překladu přímo na webové stránce.

Vzor kódu

Tato demo aplikace demonstruje, jak integrovat In-context Editor s aplikací Symfony.

Nastavení In-context Editor

Zobrazení názvů klíčů

Vrstvy zobrazení obvykle vykreslují překlady tak, že předají název překládaného textu (tj. klíč) nějakému druhu překladové metody nebo pomocné metodě zobrazení.

Ukázka kódu 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];

}

Šablona by poté vykreslila výstup metody translate() namísto skutečného překládaného textu:

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

Formátování

V šabloně musí být uvedeno, pro které klíče se mají vykreslit překlady.

Použijte toto formátování k zobrazení názvů klíčů namísto překladů:

{{__phrase_NameOfYourKey__}}

Příklad:

Pokud je v šabloně klíč page.headline, vykreslete řetězec {{__phrase_page.headline__}}.

Upravte pomocnou metodu translate() tak, aby zobrazovala názvy klíčů v požadovaném formátu:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

V závislosti na frameworku lze pomocné metody pro překlad v kódu přepsat nebo vytvořit obalenou verzi, kterou lze použít v šablonách.

Příklad:

const t = (key: řetězec) => '{{__phrase_' + key + '__}}'

Escapování názvů klíčů a speciálních znaků

Zajistěte, aby názvy klíčů byly převedeny do rozpoznatelného formátu.

Znaky v následujícím seznamu je třeba escapovat, pokud jsou vystaveny v In-context Editoru:

Znak	Escapovací sekvence	Příklad:
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} se změní na {{__phrase__key[[[[[[html_open]]]]]]__}}
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} se změní na {{__phrase__[[[[[[html_close]]]]]]key__}}

Automatický převod velikosti písmen

Ve výchozím nastavení analyzátor dokumentů In-context Editoru převádí všechny klíče na malá písmena. Pokud zaznamenáte problémy s tímto chováním a chcete použít klíče rozlišující malá a velká písmena v rámci In-context Editoru, zakažte funkci automatického převodu na malá písmena:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Přizpůsobení dekorátorů klíčů

Při používání In-context Editoru jsou názvy klíčů obvykle obaleny dekorátory (standardně složenými závorkami), aby se vygenerovaly jedinečné identifikační klíče v kontextu dokumentu:

{{__phrase_YOUR.KEY__}}

Pokud to způsobuje konflikty s jinými knihovnami (např. klientskými šablonami, včetně AngularJS a Ember.js), které používají podobnou syntaxi, změňte v nastavení předponu a příponu dekorátoru In-context Editoru. Chcete-li In-context Editoru sdělit, které dekorátory má parser hledat, přidejte před JavaScriptový úryvek následující konfigurační hodnoty:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

To editoru říká, aby hledal značky začínající [[__ a končící __]]:

[[__phrase_YOUR.KEY__]]

Pokud používáte phraseapp-in-context-editor-ruby gem k zajištění funkcionality In-context Editoru, ujistěte se, že jsou dekorátory nakonfigurovány:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Pokud gem nepoužíváte, ujistěte se, že je vzor vystavení názvu klíče upraven ve Vlastním kódu.

Povolení a zakázání In-context Editoru

Toto nastavení je dostupné pouze při použití phraseapp-in-context-editor-ruby gem.

In-context Editor je ve výchozím nastavení zakázán.

In-context Editor lze explicitně povolit nebo zakázat. Toto ovlivňuje zahrnutí JavaScriptového úryvku (při použití pomocníka zobrazení) a vykreslování klíčů označených v zobrazeních:

PhraseApp::InContextEditor.enabled = true|false

Příklad navázání příznaku na proměnnou prostředí:

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

Úplné opětovné parsování

Povolte fullReparse, pokud používáte In-context Editor s JavaScriptovým frameworkem, který používá virtuální DOM, jako je React. To umožňuje správné opětovné parsování, když jsou detekovány změny v DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizovat výstup na webovou stránku

In-context Editor lze nakonfigurovat tak, aby před vložením překladů na webovou stránku tyto překlady ošetřil (escape) nebo změnil, a to poskytnutím funkce vlastnosti sanitize.

Funkce přijímá řetězec překladu jako první argument a měla by vrátit řetězec:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Systém jednotného přihlašování

Pokud používáte systém jednotného přihlašování a chcete inicializovat In-context Editor se zapnutým SSO, přidejte před úryvek JavaScriptu následující konfigurační hodnotu:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Chcete-li vyžadovat, aby se uživatelé přihlašovali pomocí SSO, nastavte parametr enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Starý In-context Editor: nastavení

Instalace webového frameworku

Angular 2 (ngx-translate)

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte pomocí NPM:
```
npm install ngx-translate-phraseapp
```

Konfigurujte:

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

ID projektu projektu naleznete v nastavení projektu.

Ve výchozím nastavení dokumentový parser editoru převádí všechny klíče na malá písmena. Pokud se setkáváte s problémy s tímto chováním a chcete v editoru používat klíče rozlišující malá a velká písmena, zakažte funkci automatického převodu na malá písmena:
```
let config = {
  // ...
  autoLowercase: false
}
```

Přidejte tyto úryvky do aplikace 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]
})

Vzor kódu

Tato demo aplikace předvádí integraci In-context Editoru s Angular a ngx-translate.

AngularJS (angular-translate)

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte angular-phrase přes Bower (nebo stáhnout ručně):
```
$ bower install angular-phrase
```
Přidat modul angular-phrase do stávající aplikace AngularJS po načtení modulu angular-translate:
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Konfigurovat modul:
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
ID projektu projektu naleznete v nastavení projektu. Tím se vytvoří inicializační soubor s některými možnostmi konfigurace.
Přidat direktivu phrase-javascript do aplikace uvnitř tagu <head>:
```
<phrase-javascript></phrase-javascript>
```
Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte In-context Editor aplikovaný na aplikaci. Přihlásit se jako uživatel organizace Phrase.

angular-phrase na GitHub

Vzor kódu

Tato demo aplikace pro angular-phrase ukazuje, jak lokalizovat AngularJS pomocí angular-translate.

Django

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte balíček django-phrase pomocí pip:
```
$ pip install django-phrase
```
Přidat Phrase do seznamu nainstalovaných aplikací:
```
INSTALLED_APPS = (

    'phrase',

)
```
Použít šablonový tag phrase_i18n v šablonách:
```
{% load phrase_i18n %}
```
Chcete-li povolit django-phrase přepsat metody překladu, načtěte phrase_i18n po i18n.
Přidat úryvek JavaScriptu do rozvržení:
```
{% phrase_javascript %}
```

Konfigurovat In-context Editor pro projekt s těmito možnostmi:

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

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte In-context Editor aplikovaný na aplikaci. Přihlásit se jako uživatel organizace Phrase.

Kód adaptéru Django na GitHub

Vzor kódu

Tato demo aplikace ukazuje, jak integrovat In-context Editor s aplikací Django.

React (intl)

Poznámka

Tato knihovna nemusí fungovat s IE11 nebo staršími prohlížeči. Přidat Babel do sestavovacího kanálu, pokud je vyžadována podpora starších prohlížečů.

Tato knihovna dědí běžné komponenty balíčků react-intl. Pokud je Phrase povoleno voláním initializePhraseAppEditor, chování komponent se změní.

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte balíček přes NPM:
```
npm install react-intl-phraseapp
```
nebo sestavit ze zdroj:
```
npm run dist
```
```
npm install
```

Konfigurujte:

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

ID projektu projektu naleznete v nastavení projektu.

Přidat fragment do aplikace react:

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

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

initializePhraseAppEditor(config);

Najděte všechny importy FormattedMessage a změňte zdroj z react-intl na react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Spusťte jednotkové testy pomocí jest:
```
npm test
```

Vzor kódu

Toto demo ukazuje integraci Phrase In-context Editoru s react-intl.

Ruby on Rails (i18n)

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Přidat gem phraseapp-in-context-editor-ruby do prostředí, se kterým chcete použít In-context Editor:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
a nainstalujte jej spuštěním příkazu bundle:
```
$ bundle install
```
Nainstalujte gem phraseapp-in-context-editor-ruby spuštěním generátoru Rails:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

Vytvořit a spravovat přístupové tokeny v nastavení profilu nebo prostřednictvím API autorizací.

--project-id

ID projektu projektu naleznete v nastavení projektu. Tím se vytvoří inicializační soubor s některými možnostmi konfigurace.
Přidat fragment JavaScriptu do rozvržení vaší aplikace uvnitř tagu <head> pomocí pomocníka phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte In-context Editor aplikovaný na aplikaci. Přihlásit se jako uživatel organizace Phrase.
Zakázat Turbolinks (pokud se používá)

Turbolinks odstraňuje všechny prvky uživatelského rozhraní In-context Editor ze stránky při každém načtení stránky.

Přidat data-no-turbolink atribut do <body> tagu:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Vzor kódu

Tento demo ukazuje integrace Phrase In-context Editor s react-i18next.

Spring

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Zajistěte, aby package com.phraseapp.incontexteditor byl v aplikaci dostupný.
Nastavte správný projekt ID a upravte ostatní parametry v PhraseAppConfiguration.class.

Pro vykreslení všech překladů přes Phrase, přidat bean do aplikace:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Poskytněte požadovaný JavaScript pomocník v šablonách vystavením pomocníka jako bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Přidat <script> tag do vašich šablon v rámci <head> tagu každé stránky:

<head>

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

</head>

Restartujte aplikaci a přihlaste se pomocí přihlašovací údaje uživatele Phrase.

Zdrojový kód ukázkové aplikace na GitHub

Jak lokalizovat Spring aplikace jako profesionál

Spring Boot Starter balíček (poskytuje ePages)

Symfony 2.x

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Vytvořit nové prostředí, ve kterém bude In-context Editor běžet. V příkladu je nové prostředí pojmenováno translation.

Vytvořit nový konfigurační soubor:
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

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

Vytvořit kontroler pro zpřístupnění prostředí v prohlížeči:

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

Přepsat standardní metodu překladu, aby bylo možné vystavit názvy klíčů pro In-context Editor:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Přidat úryvek JavaScriptu do rozvržení:

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

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte In-context Editor aplikovaný na aplikaci. Přihlásit se jako uživatel organizace Phrase.

Symfony Translation Documentation

Kód adaptéru Symfony 2.x na GitHub

Symfony 3.x

Chcete-li nainstalovat In-context Editor v tomto prostředí, postupujte podle těchto kroků:

Vytvořit nové prostředí, ve kterém bude In-context Editor běžet. V příkladu je nové prostředí pojmenováno translation.

Vytvořit nový konfigurační soubor:
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

Vytvořit kontroler pro zpřístupnění prostředí v prohlížeči:

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

Přepsat standardní metodu překladu, aby bylo možné vystavit názvy klíčů pro In-context Editor:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

Zajistěte, aby byla třída vždy přepsána, když je bundle použit s compiler pass:

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

<?php

namespace AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

use Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   public function process(ContainerBuilder $container)

   {

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

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

   }

}

Pokud používáte samostatné compiler pass, zaregistrujte je v metodě build() třídy 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());

       };

   }

}

Přidat úryvek JavaScriptu do rozvržení:

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

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte In-context Editor aplikovaný na aplikaci. Přihlásit se jako uživatel organizace Phrase.

Symfony Translation Documentation

Vue I18n

Poznámka

Vue I18n Phrase In-context Editor podporuje všechny verze Vue I18n 8.17.5 a novější. Tato knihovna může fungovat s předchozími verzemi, ale ty nejsou oficiálně podporovány a nebudou dostávat žádné specifické aktualizace ani opravy chyb.

Pro instalaci In-context editor v tomto prostředí postupujte podle těchto kroků:

Nainstalujte balíček pomocí preferovaného správce balíčků:

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

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

nebo načtěte pomocí CDN (zaregistrujte ručně 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 (ukázka):

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

Pro integraci knihovny:

importujte knihovnu Vue I18n Phrase In-context Editor.
Vytvořit novou instanci Vue I18n Phrase In-context Editor, předejte instanci Vue I18n jako první argument a Phrase Config jako druhý.

Možnosti konfigurace a ukázkové metody.

Použití starého In-context Editor

Režim Ajax

In-context Editor podporuje Ajax a manipulaci s DOM (tj. pomocí JavaScriptu) s využitím sledování mutací (mutation observers).

Režim Ajax může v některých případech způsobit problémy a při použití In-context editor může vést k vážným problémům s výkonem. Chcete-li zakázat režim Ajax, přidejte před úryvek JavaScriptu následující konfigurační hodnotu:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Režim ladění

Chcete-li Povolit režim ladění, přidejte před úryvek JavaScriptu následující konfigurační hodnotu:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Vynucení kódu jazyka

Chcete-li při spuštění In-context Editoru explicitně nastavit konkrétní kód jazyka, použijte nastavení forceLocale. To je užitečné pro předvýběr kódu jazyka, který je aktuálně zobrazen ve vaší webové aplikaci v In-context Editoru:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Ignorované klíče

Toto nastavení je dostupné pouze při použití phraseapp-in-context-editor-ruby gem.

Klíče mohou být Vyloučeny z vykreslování pomocí In-context Editoru. Při práci s Rails mohou být klíče ignorovány pro data, jako jsou chybové zprávy nebo klíče pro formát data a času. Chcete-li Vyloučit klíče z automatického zpracování pomocí phraseapp-in-context-editor-ruby gem, přidejte pole klíčů do inicializačního souboru phraseapp_in_context_editor.rb. Lze také použít zástupné znaky:

PhraseApp::InContextEditor.configure do |config|

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

end

Klíče odpovídající kterémukoli z těchto vzorů nebudou zpřístupněny pro In-context Editor a budou vykresleny normálně.