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 překladatelům umožnil efektivně pracovat a překládat webové stránky prostřednictvím přímé integrace s překladovým editorem systému 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 lze In-Context Editor přizpůsobit pro práci s mnoha technologiemi.

Instalace In-Context Editoru Strings

Požadavky

Pro 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 typu klíč-hodnota.

Webové stránky s extrahovanými přeložitelnými řetězci 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ší, 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.

JavaScriptový úryvek

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í.
Zajistěte přihlášení.

ID projektu naleznete v nastavení projektu.

ID úč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

Post-procesor 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 jej 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ě use 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

accountId musí být poskytnuto pro úspěšné nastavení In-Context Editoru. ID úč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 jako libovolný uživatel organizace Phrase.

Možnosti konfigurace a ukázkové metody.

Vue I18n

Poznámka

Phrase In-Context Editor pro Vue I18n 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.

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

React (intl)

Poznámka

Tato knihovna nemusí fungovat s IE11 nebo staršími prohlížeči. Přidejte 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 nejnovější balíček přes NPM:
```
npm install react-intl-phraseapp
```
nebo sestavte ze zdrojových kódů:
```
npm run dist
```
```
npm install
```

Konfigurace:

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

ID projektu najdete v nastavení projektu.

ID účtu najdete v nastavení organizace Strings.

Přidejte ú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
```

Ukázka kódu

Tato ukázka ukazuje integraci Phrase In-Context editoru s react-intl.

Angular 2 (ngx-translate)

Předpoklady

Zaregistrujte se pro účet 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,
};

ID projektu najdete v nastavení projektu.

ID účtu najdete 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);

Pokud je to vyžadováno, přidejte US specifické URL pro povolení práce přes US datové centrum:

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 dokumentů editoru převede všechny klíče na malá písmena. Pokud se vyskytují problémy s tímto chováním a chcete používat klíče rozlišující malá a velká písmena v editoru, vypně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, 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]
})

Ukázka 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 bez úprav ve starších prohlížečích nebo v Microsoft IE11. Přidejte Babel do sestavovacího procesu, pokud je třeba tyto prohlížeče podporovat.

Předpoklady

Zaregistrujte se pro účet Phrase Strings.
Použijte vynikající i18n gem, který používá také 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 jej 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>
```
ID projektu najdete v nastavení projektu.

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

Přidejte 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, abyste mohli pracovat 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 zobrazí se In-Context editor. Přihlaste se jako kterýkoli uživatel organizace Phrase.

Ukázka kódu

Toto demo ukazuje integraci In-Context editoru Phrase s react-i18next.

Django

Předpoklady

Zaregistrujte se k účtu Phrase Strings.
Použijte framework Django pro jazyk 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řidejte Phrase do seznamu nainstalovaných aplikací:
```
INSTALLED_APPS = (

    'phrase',

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

Přidejte 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 najdete v nastavení projektu.

ID účtu najdete 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, že byl In-context Editor aplikován. Přihlaste se jako libovolný uživatel organizace Phrase.

Kód adaptéru Django na GitHubu

Ukázka kódu

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

Flask

Předpoklady

Zaregistrujte se na účet Phrase Strings.
Použijte 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í pomocí následujícího tagu (měl by být umístěn uvnitř sekce souboru š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>

ID projektu najdete v nastavení projektu.

ID účtu najdete v nastavení organizace Strings.

V případě potřeby nastavte datové centrum US, abyste mohli pracovat 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í návratové 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 funkcím gettext Flask-Babel.

Ukázka kódu

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

Symfony 5.x

Předpoklady

Zaregistrujte se na účet 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 ICE.

Pro integraci In-context Editoru 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 tak, aby dekoroval službu překladatel adaptérem Phrase:

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

Přidejte následující úryvek JavaScriptu do základní nebo Twig šablony 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 Editoru.

ID projektu najdete v nastavení projektu.

ID účtu najdete v nastavení organizace Strings.

V případě potřeby nastavte datové centrum US, abyste mohli pracovat 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.

Ukázka kódu

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

Nastavení In-context Editoru

Odhalení jmen klíčů

Obvykle vrstva zobrazení vykresluje překlady tím, že předá název překládatelného řetězce (tj. klíče) nějaké překladové metodě nebo pomocnému objektu.

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 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íčů mí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 zobrazila 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 byly názvy klíčů převedeny do rozpoznatelného formátu.

Znaky v následujícím seznamu musí být uvozeny, pokud jsou vystaveny In‑context Editoru:

Znak	Uvozovací 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 se při tomto chování vyskytnou problémy a chcete v In‑context Editoru použít klíče rozlišující malá a velká 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žití In‑context Editoru jsou názvy klíčů obvykle obaleny dekorátory (ve výchozím nastavení 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ř. šablonovacími enginy na straně klienta, 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á analyzátor 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 k zajištění funkcionality In-Context editoru používáte gemu 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. Toto ovlivňuje zahrnutí JavaScriptového úryvku (při použití zobrazovacího pomocníka) a vykreslování dekorovaných názvů klíčů ve zobrazeních:

PhraseApp::InContextEditor.enabled = true|false

Příklad navázání označení 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ý využívá virtuální DOM, jako je React. To umožňuje správné opětovné parsování při zjištění změn v DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Skrývání prvků z In-Context editoru

Třídy uvedené v možnosti hidingClasses jsou považovány za skryté a skener In-Context editoru je vylučuje. Chcete-li, aby byly prvky s danou třídou skenovatelné, odeberte název této třídy z pole hidingClasses namísto přidání. Přidání názvu třídy do pole vyloučí odpovídající prvky a skryje tlačítko upravit; odebrání názvu třídy z pole zahrne odpovídající prvky a zobrazí tlačítko upravit.

Možnost hidingClasses provádí statickou kontrolu přítomnosti třídy u prvku a jeho předků. Nevyhodnocuje vypočtenou nebo responzivní viditelnost. Prvek, který používá třídu responzivního nástroje odpovídající položce v hidingClasses (například třída s názvem „hidden“ v kombinaci s třídou viditelnosti specifickou pro breakpoint), je ze skenování vyloučen bez ohledu na to, zda je v aktuálním výřezu skutečně viditelný. Vyhněte se používání názvů tříd uvedených v hidingClasses čistě pro responzivní stylování prvků, které je třeba skenovat.

Sanitizace výstupu na webovou stránku

In-context Editor lze nakonfigurovat tak, aby před vložením překladů na webovou stránku provedl jejich escapování nebo úpravu, 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ých frameworků

Angular 2 (ngx-translate)

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

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

Konfigurace:

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

ID projektu najdete v nastavení projektu.

Ve výchozím nastavení dokumentový parser 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 editoru používat klíče rozlišující velká a malá 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]
})

Ukázka kódu

Tato demo aplikace představuje 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áhněte ručně):
```
$ bower install angular-phrase
```
Přidejte 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", "");
```
Projektové ID projektu naleznete v nastavení projektu. Tím se vytvoří inicializační soubor s některými možnostmi konfigurace.
Přidejte 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 použitý v aplikaci. Přihlaste 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řidejte Phrase do seznamu nainstalovaných aplikací:
```
INSTALLED_APPS = (

    'phrase',

)
```
Použijte tag šablony phrase_i18n v šablonách:
```
{% load phrase_i18n %}
```
Aby django-phrase mohl přepsat překladové metody, načtěte phrase_i18n po i18n.
Přidejte ú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 použitý v aplikaci. Přihlaste 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 do aplikace Django.

React (intl)

Poznámka

Tato knihovna nemusí fungovat v prohlížeči IE11 nebo starších prohlížečích. Pokud je vyžadována podpora starších prohlížečů, přidejte do sestavovacího procesu Babel.

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

Konfigurovat:

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

Projektové ID projektu naleznete v nastavení projektu.

Přidejte snippet 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

Tata 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 In-Context Editor použít:
```
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 rozhraní Authorizations API.

--project-id

Projektové ID projektu naleznete v nastavení projektu. Tím se vytvoří inicializační soubor s některými možnostmi konfigurace.
Přidejte JavaScript snippet 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 použitý. Přihlaste 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 Phrase In-Context editoru 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 vykreslit 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 JavaScriptového pomocníka v šablonách tím, že jej zpřístupníte jako bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Přidejte tag <script> do vašich š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 příkladové aplikace na GitHub

Jak lokalizovat aplikace Spring jako profesionál

Balíček Spring Boot Starter (poskytovaný 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 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, aby byly názvy klíčů vystaveny 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řidejte ú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řihlaste se jako libovolný uživatel organizace Phrase.

Dokumentace k překladům Symfony

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řte nové prostředí, ve kterém bude In-Context editor běžet. V 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, aby byly názvy klíčů vystaveny 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 balíček používán 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é kompilátorové průchody, zaregistrujte je v metodě build() třídy bundlu:

# 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řidejte ú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 použitý v aplikaci. Přihlaste se jako libovolný uživatel organizace Phrase.

Dokumentace k překladům Symfony

Vue I18n

Poznámka

In-Context Editor pro Vue I18n podporuje všechny verze Vue I18n od 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é konkrétní aktualizace ani opravy chyb.

Chcete-li nainstalovat 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ř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žívání starého In-Context editoru

Režim Ajaxu

In-Context editor podporuje Ajax a manipulaci s DOM (tj. prostřednictvím JavaScriptu) pomocí sledování změn (mutation observers).

Režim Ajaxu může v některých případech způsobovat problémy a při používání In-Context editoru může vést k závažným problémům s výkonem. Chcete-li zakázat režim Ajaxu, 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ý se aktuálně zobrazuje ve vaší webové aplikaci, také v In-Context editoru:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Ignorované klíče

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

Klíče lze vyloučit 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í gemem phraseapp-in-context-editor-ruby, přidejte pole těchto 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 In-Context Editoru a budou vykresleny normálně.