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ým editorem Strings.

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

In-context Editor:

Zahrnuje nové funkce (vícejazyčné zobrazení, možnosti rozvržení, dávkové akce, funkce pro spolupráci atd.) a uživatelské rozhraní z překladového editoru.
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 se může jednat o lokální prostředí.
Struktura lokalizačního souboru klíč-hodnota.

Webové stránky s extrahovanými překládanými texty a vrstvou zobrazení, která k vykreslení překladů používá strukturu klíč-hodnota.
Názvy klíčů vystavené vrstvě zobrazení nebo šablony.
Úryvek JavaScriptu, 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.

Pro instalaci In-context editoru v tomto prostředí 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ě použít knihovny i18next.
Přidejte řetězec phraseInContextEditor do vlastnosti pole postProcess (předávané v rámci konfiguračního objektu metody init knihovny i18next).

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

ID uživatelského účtu 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 nastavení 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 s předchozími verzemi, ale ty nejsou oficiálně podporovány a nebudou pro ně vydávány žádné konkrétní aktualizace ani opravy chyb.

Pro instalaci In-context editoru v tomto prostředí 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ředáte instanci Vue I18n a jako druhý Phrase Config.

Možnosti nastavení a ukázkové metody.

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ěnit.

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

Projekt ID projektu naleznete v nastavení projektu.

Uživatelský účet ID 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ěnit 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 demo ukazuje integrace Phrase In-context Editor s react-intl.

Angular 2 (ngx-translate)

Předpoklady

Vytvořte si účet v Phrase Strings.
Použijte 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ů:

Nainstalujte 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,
};

Projekt ID projektu naleznete v nastavení projektu.

Uživatelský účet ID 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řidejte adresy URL specifické pro USA, abyste Povolili 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 v editoru použít klíče rozlišující malá a velká písmena, zakážete 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, 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řidejte Babel do sestavovacího procesu, pokud je třeba tyto prohlížeče podporovat.

Předpoklady

Vytvořte si účet v Phrase Strings.
Použijte vynikající gem i18n, který používá i Rails.

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

Přidejte 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řidejte ji do Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Sestavte přímo ze zdroje, 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>
```
Projekt ID projektu naleznete v nastavení projektu.

Uživatelský účet ID naleznete v nastavení organizace Strings.
Přidat úryvek Ruby 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 v USA, abyste mohli Povolit práci s koncovými body v USA:

  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 a uvidíte In-context Editor aplikovaný na aplikaci. Přihlaste se pomocí jakéhokoli uživatele organizace Phrase.

Vzor kódu

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

Django

Předpoklady

Vytvořte si účet v Phrase Strings.
Použít framework Django 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í úryvky šablona do souboru rozvržení templates/base_generic.html nebo ekvivalentu:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Použít tag šablona phrase_i18n 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 = "__}}"

Projekt ID projektu naleznete v nastavení projektu.

Uživatelský účet ID 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 a uvidíte 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řte si účet v Phrase Strings.
Použít framework Flask 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 JavaScript snippet Phrase do souboru základního rozvržení s následujícím tagem (měl by být umístěn uvnitř sekce šablony):

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

Projekt ID projektu naleznete v nastavení projektu.

Uživatelský účet ID naleznete v nastavení organizace Strings.

V případě potřeby nastavte datové centrum v USA, abyste mohli Povolit práci s koncovými body v USA:

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 In-context Editor číst. Při nastavení na False se vrátí ke standardním gettext funkcím Flask-Babel.

Vzor kódu

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

Symfony 5.x

Předpoklady

Vytvořte si účet v Phrase Strings.
Použijte framework Symfony 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 Editoru.

Pro integraci In-context Editoru se 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 překladatel pomocí adaptéru Phrase:

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

Přidejte následující úryvek JavaScriptu 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í propojena s In-context Editorem.

Projekt ID projektu naleznete v nastavení projektu.

Uživatelský účet ID naleznete v nastavení organizace Strings.

V případě potřeby nastavte datové centrum v USA, abyste mohli Povolit práci s koncovými body v USA:

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ích údajů 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 Editoru

Zobrazení názvů klíčů

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

Ukázkový kód 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 pak vykreslila výstup metody translate() namísto skutečného překládaného řetězce:

<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 pro použití v šablonách.

Příklad:

const t = (key: string) => '{{__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 při vystavení v In-context Editoru escapovat:

Znak	Escapovací sekvence	Example
<	`[[[[[[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í dokumentový parser In-context Editoru převádí všechny klíče na malá písmena. Pokud máte s tímto chováním problémy a chcete v In-context Editoru použít klíče rozlišující velká a malá písmena, 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 úryvek JavaScriptu 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 k zajištění funkcionality In-context Editoru používáte gem phraseapp-in-context-editor-ruby, ujistěte se, že jsou dekorátory nakonfigurovány:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Pokud gem nepoužíváte, zajistěte, aby byl 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í gemu phraseapp-in-context-editor-ruby.

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

In-context Editor lze explicitně povolit nebo zakázat. To ovlivňuje zahrnutí úryvku JavaScriptu (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 frameworkem JavaScriptu, který využí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

}

Sanitizace 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 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í editor dokumentů převádí všechny klíče na malá písmena. Pokud máte s tímto chováním problémy 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']);
```
Nakonfigurujte 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 libovolný uživatel organizace Phrase.

angular-phrase na GitHubu

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žijte tag šablony 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 %}
```

Nakonfigurujte In-context Editor pro projekt pomocí těchto možností:

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

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 libovolný uživatel organizace Phrase.

Kód adaptéru Django na GitHubu

Vzor kódu

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

React (intl)

Poznámka

Tato knihovna nemusí fungovat se staršími prohlížeči IE11 nebo staršími. 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 balíček přes NPM:
```
npm install react-intl-phraseapp
```
nebo sestavte ze zdroje:
```
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řidejte 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řidejte gem phraseapp-in-context-editor-ruby do prostředí, ve 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

Vytvářejte a spravujte 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řidejte fragment JavaScriptu do rozvržení vaší aplikace v rámci 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 libovolný uživatel organizace Phrase.
Zakázat Turbolinks (pokud se používají)

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

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

Vzor kódu

Tato demo ukazuje integraci In-context Editoru Phrase s react-i18next.

Spring

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

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

Chcete-li vykreslovat všechny překlady prostřednictvím Phrase, přidejte bean do aplikace:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Poskytněte požadovaného pomocníka JavaScript v šablonách tím, že pomocníka vystavíte jako bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Přidejte tag <script> do svých šablon v rámci tagu <head> každé stránky:

<head>

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

</head>

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

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

Jak lokalizovat aplikace Spring jako profesionál

Balíček Spring Boot Starter (poskytuje ePages)

Symfony 2.X

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

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

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

imports:

    - { resource: config.yml }

parameters:

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

Vytvořte kontroler, aby bylo prostředí přístupné z prohlížeče:

# 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řepište standardní metodu překladu, abyste zpřístupnili 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 libovolný uživatel organizace Phrase.

Symfony Translation Documentation

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

Symfony 3.x

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

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

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

imports:

   - { resource: config.yml }
```

Vytvořte kontroler, aby bylo prostředí přístupné z prohlížeče:

# 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řepište standardní metodu překladu, abyste zpřístupnili 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 passy, 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 libovolný 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 i se staršími verzemi, ale ty nejsou oficiálně podporovány a nebudou pro ně vydávány žádné specifické aktualizace ani opravy chyb.

Pro instalaci In-context editoru 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řte 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.

Použití starého In-context Editoru

Režim Ajax

In-context Editor podporuje Ajax a manipulaci s DOM (tj. pomocí JavaScriptu) s využitím sledovačů 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 editoru 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 formátu 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ě.