In-Context Editor (Strings)

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

K dispozici pro

Tým, Profesionální, Podnikání, Podnik a plány UI/UX pro software

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 prodejní oddělení.

Kontextový editor je navržen tak, aby pomáhal překladatelům efektivněji plnit úkoly a překládat webovou stránku prostřednictvím přímé integrace s překladovým editorem.

V současnosti jsou k dispozici dvě verze:

Kontextový editor:

Zahrnuje nové funkce (vícejazyčný pohled, možnosti rozložení, dávkové akce, funkce spolupráce atd.) a uživatelské rozhraní z překladového editoru.
starý Kontextový editor.

Po instalaci Kontextového editoru může být přizpůsoben pro práci s mnoha technologiemi.

Instalace Kontextového editoru Strings

Požadavky

Pro použití Kontextového editoru aplikace vyžaduje:

Webové stránky, webové aplikace, mobilní stránky atd.
Překladatelé mají přístup k webovému serveru, který provozuje editor. To může být místní prostředí, pokud je to nutné.
Struktura souboru pro lokalizaci klíč-hodnota.

Webové stránky s překládanými řetězci extrahovanými a pohledová vrstva, která používá strukturu klíč-hodnota pro vykreslování překladů.
Názvy klíčů vystavené pohledu nebo šablonové vrstvě.
Úryvek JavaScriptu, který vykresluje editor.
Ideálně by mělo být vyhrazené prostředí pro překlady. To může být klon stagingového prostředí a ačkoli je to více práce pro počáteční nastavení, poskytuje lepší pracovní postup a větší stabilitu.

Pokud není možné mít vyhrazené prostředí, může být použito stávající stagingové prostředí s možností povolit Kontextový editor podle potřeby.

JavaScript Snippet

Zahrňte JavaScriptový snippet do rozložení aplikace.

Snippet obsahuje kód potřebný k:

Komunikaci s API Phrase Strings.
Zobrazit uživatelské rozhraní.
Poskytnout přihlášení.

ID projektu se nachází v nastavení projektu.

ID účtu se nachází 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ého rámce

i18next

Poznámka

i18next Phrase In-Context Editor Post Processor podporuje všechny i18next verze novější než 19.5.1. Ačkoli tato knihovna může fungovat i s předchozími verzemi, nejsou oficiálně podporovány a nemusí dostávat žádné specifické aktualizace nebo opravy chyb.

Pro instalaci editoru v kontextu 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 (příklad):

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 i18next-phrase-in-context-editor-post-processor knihovny.
Vytvořte novou i18next Phrase In-Context Editor Post Processor instanci a předávejte PhraseConfig jako argument.
Předávejte nově vytvořenou i18next Phrase In-Context Editor Post Processor instanci metodě i18next use .
Přidejte phraseInContextEditor řetězec do postProcess pole vlastností (předáno v konfiguračním objektu metody i18next init ).

Přidejte JavaScriptový snippet ICE do instance i18next v nastavení.

Ukázkový snippet:

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

Poznámka

accountId musí být poskytnut pro úspěšné nastavení ICE. ID účtu se nachází v nastavení organizace Strings.

Pokud je to nutné, nakonfigurujte atribut useOldICE pro přepnutí na starý ICE:

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

Spusťte Kontextový editor.
Otevřete aplikaci v webovém prohlížeči pro zobrazení Kontextového editoru. Přihlaste se jako jakýkoli uživatel 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 s předchozími verzemi, ale nejsou oficiálně podporovány a nebudou dostávat žádné specifické aktualizace nebo opravy chyb.

Pro instalaci editoru v kontextu 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 (příklad):

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: 'Ahoj světe!'
  }
});

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

Pro integraci knihovny:

Importujte Vue I18n Phrase In-Context Editor knihovnu.
Vytvořte novou Vue I18n Phrase In-Context Editor instanci, předáním Vue I18n instance jako prvního argumentu a Konfigurace fráze jako druhého.

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 buildovacího pipeline, pokud je vyžadována podpora starších prohlížečů.

Tato knihovna dědí běžné komponenty balíčků react-intl. Pokud je fráze povolena 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
```

Nakonfigurujte:

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

ID projektu se nachází v nastavení projektu.

ID účtu se nachází 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
```

Vzor kódu

Tento demo ukazuje integraci editoru Phrase In-Context s react-intl.

Angular 2 (ngx-translate)

Požadavky

Vytvořit účet pro účet Phrase Strings.
Použijte ngx-translate modul 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
```

Nakonfigurujte:

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

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

ID projektu se nachází v nastavení projektu.

ID účtu se nachází v nastavení organizace Strings.

Pokud je to nutné, nakonfigurujte atribut useOldICE pro přepnutí na starý ICE:

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

initializePhraseAppEditor(config);

Pokud je to nutné, přidejte specifické URL pro USA, abyste povolili práci 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 dokumentu editoru převádí všechny klíče na malá písmena. Pokud máte problémy s tímto chováním a chcete používat klíče s citlivostí na velikost písmen v editoru, zakázat automatickou funkci malých písmen:
```
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: {
        poskytnout: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        poskytnout: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Vzor kódu

Tato demo aplikace předvádí integraci Kontextového editoru s Angular a ngx-translate.

Ruby on Rails (i18n)

Poznámka

Tato knihovna nemusí fungovat ihned po instalaci pro starší prohlížeče nebo Microsoft IE11. Přidejte Babel do build pipeline, pokud je třeba podporovat tyto prohlížeče.

Předpoklady

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

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

Přidejte phraseapp-in-context-editor-ruby knihovnu do požadovaného prostředí pomocí jedné z následujících metod:
- Přes Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Via Bundler
  
  Přidejte to do Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Sestavte přímo ze zdroje, abyste získali 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 se nachází v nastavení projektu.

ID účtu se nachází v nastavení organizace Strings.
Přidejte Ruby kód do rozložení aplikace app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Přidejte následující konfiguraci 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"

Pokud je to nutné, nastavte americké datové centrum pro povolení práce s americkými koncovými body:

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

Otevřete aplikaci v jakémkoli webovém prohlížeči, abyste viděli aplikovaný Kontextový editor na aplikaci. Přihlaste se jako jakýkoli uživatel organizace Phrase.

Vzor kódu

Tato demo ukazuje integraci Kontextového editoru Phrase s react-i18next.

Django

Předpoklady

Vytvořit účet pro účet Phrase Strings.
Použijte framework Django pro Python.

Poznámka

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

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 frázi do seznamu nainstalovaných aplikací:
```
INSTALLED_APPS = (

    'phrase',

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

Přidejte následující konfiguraci 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 se nachází v nastavení projektu.

ID účtu se nachází v nastavení organizace Strings.

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

Otevřete aplikaci v jakémkoli webovém prohlížeči, abyste viděli aplikovaný Kontextový editor na aplikaci. Přihlaste se jako jakýkoli uživatel organizace Phrase.

Django adapter code on GitHub

Vzor kódu

Tato demo aplikace ukazuje, jak integrovat Kontextový editor s aplikací Django.

Flask

Předpoklady

Vytvořit účet pro účet Phrase Strings.
Použijte framework Flask pro Python.

Poznámka

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

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

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 frázi JavaScript snippet do základního souboru rozložení s následujícím tagem (mělo by to být uvnitř sekce souboru šablony):

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "YOUR-PROJECT-ID",
        accountId: "VAŠE-ID-UŽIVATELSKÉHO ÚČTU",
        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 se nachází v nastavení projektu.

ID účtu se nachází v nastavení organizace Strings.

Pokud je to nutné, nastavte americké datové centrum pro povolení práce s americkými koncovými body:

window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "VAŠE-ID-UŽIVATELSKÉHO ÚČTU",
    datacenter: "us",
};

Když je PHRASEAPP_ENABLED = True, balíček modifikuje vracené hodnoty z překladových funkcí, aby představil formát, který může ICE číst. Když je nastaveno na False, vrátí se k standardním Flask-Babelovým gettext funkcím.

Vzor kódu

Tato demo aplikace ukazuje, jak integrovat Kontextový editor s aplikací Flask.

Symfony 5.x

Předpoklady

Vytvořit účet pro účet Phrase Strings.
Použijte 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 ICE.

Pro integraci Kontextového editoru s aplikací Symfony postupujte podle těchto kroků:

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

Upravte config/services.yaml, aby dekoroval překladatel službu s adaptérům Phrase:

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

Přidejte následující JavaScriptový úryvek do základního nebo Twig šablonového rozložení mezi {% block javascripts %}, aby mohl Kontextový editor čí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 Kontextovému editoru.

ID projektu se nachází v nastavení projektu.

ID účtu se nachází v nastavení organizace Strings.

Pokud je to nutné, nastavte americké datové centrum pro povolení práce s americkými koncovými body:

window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "VAŠE-ID-UŽIVATELSKÉHO ÚČTU",
    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 ukazuje, jak integrovat Kontextový editor s aplikací Symfony.

Nastavení Kontextového editoru

Exponování názvů klíčů

Obvykle vrstva zobrazení vykresluje překlady předáním názvu překládaného řetězce (tj. klíče) do nějakého typu překladové metody nebo pomocníka pro zobrazení.

Ukázkový PHP kód:

$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() místo skutečného přeloženého řetězce:

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

Formátování

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

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

{{__phrase_NameOfYourKey__}}

Příklad:

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

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

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

V závislosti na rámci mohou být pomocníci pro překlady v kódu přepsáni nebo může být vytvořena obalená verze pro použití ve šablonách.

Příklad:

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

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

Zajistěte, aby byly názvy klíčů převedeny na rozpoznatelný formát.

Znaky v následujícím seznamu je třeba uniknout, když jsou vystaveny v Kontextovém editoru:

Znak	Úniková sekvence	Příklad
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} se stává {{__phrase__key[[[[[[html_open]]]]]]__}}
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} se stává {{__phrase__[[[[[[html_close]]]]]]key__}}

Automatická konverze velikosti písmen

Ve výchozím nastavení parser dokumentu Kontextového editoru převádí všechny klíče na malá písmena. Pokud máte problémy s tímto chováním a chcete používat klíče citlivé na velikost písmen v Kontextovém editoru, zakázat automatickou funkci malých písmen:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

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

Při používání Kontextového editoru jsou názvy klíčů obvykle obaleny dekorátory (složené závorky, ve výchozím nastavení) pro generování unikátních identifikačních klíčů v kontextu dokumentu:

{{__phrase_YOUR.KEY__}}

Pokud to způsobí konflikty s jinými knihovnami (př. šablonovými enginy na straně klienta, včetně AngularJS a Ember.js), změňte prefix a sufix dekorátoru Kontextového editoru v nastavení. Abychom řekli Kontextovému editoru, které dekorátory by měl parser hledat, přidejte následující konfigurační hodnoty před JavaScriptový úryvek:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Toto říká editoru, aby hledal tagy začínající na [[__ a končící na __]]:

[[__phrase_YOUR.KEY__]]

Pokud používáte phraseapp-in-context-editor-ruby gem k zajištění funkčnosti Kontextového 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 vzor expozice názvu klíče je upraven v vlastním kódu.

Povolení a zakázání Kontextového editoru

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

Kontextový editor je ve výchozím nastavení zakázán.

Kontextový editor může být explicitně povolen nebo zakázán. To ovlivňuje zahrnutí JavaScript úryvku (při použití pomocníka pro zobrazení) a vykreslování dekorovaných názvů klíčů ve zobrazeních:

PhraseApp::InContextEditor.enabled = true|false

Příklad přiřazení označení k proměnné prostředí:

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

Úplné přeparsování

Povolte fullReparse pokud používáte Kontextový editor s JavaScriptovým rámcem, který používá Virtuální DOM, jako je React. To umožňuje správné přeparsování, když jsou detekovány změny DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizace výstupu na webovou stránku

Kontextový editor může být nakonfigurován tak, aby unikl nebo změnil překlady před jejich vložením do webové stránky poskytnutím funkce vlastnosti sanitize.

Funkce přijímá překladový řetězec 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 single sign-on a chcete inicializovat Kontextový editor se zapnutým SSO, přidejte následující hodnotu konfigurace před JavaScriptový úryvek:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Aby se vyžadovalo, aby se uživatelé přihlašovali pomocí SSO, nastavte parametr enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Old In-Context Editor: Nastavení

Instalace webového rámce

Angular 2 (ngx-translate)

Chcete-li nainstalovat Kontextový editor v tomto prostředí, postupujte podle těchto kroků:

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

Nakonfigurujte:

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

ID projektu se nachází v nastavení projektu.

Ve výchozím nastavení parser dokumentu editoru převádí všechny klíče na malá písmena. Pokud máte problémy s tímto chováním a chcete používat klíče s citlivostí na velikost písmen v editoru, zakázat automatickou funkci malých písmen:
```
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: {
        poskytnout: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        poskytnout: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Vzor kódu

Tato demo app předvádí integraci Kontextového editoru s Angularem a ngx-translate.

AngularJS (angular-translate)

Chcete-li nainstalovat Kontextový editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte angular-phrase pomocí Bower (nebo stáhnout 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", "");
```
ID projektu se nachází v nastavení projektu. To vytvoří inicializační soubor s některými konfiguračními možnostmi.
Přidejte direktivu phrase-javascript do aplikace uvnitř tagu <head>:
```
<phrase-javascript></phrase-javascript>
```
Otevřete aplikaci v jakémkoli webovém prohlížeči, abyste viděli aplikovaný Kontextový editor. Přihlaste se s jakýmkoli uživatelským účtem 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 Kontextový 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 šablonovou značku phrase_i18n v šablonách:
```
{% load phrase_i18n %}
```
Aby django-phrase mohl přepsat metody překladu, načtěte phrase_i18n po i18n.
Přidejte JavaScriptový úryvek do rozvržení:
```
{% phrase_javascript %}
```

Nakonfigurujte Kontextový editor pro projekt s těmito možnostmi:

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

Otevřete aplikaci v jakémkoli webovém prohlížeči, abyste viděli aplikovaný Kontextový editor. Přihlaste se s jakýmkoli uživatelským účtem organizace Phrase.

Kód adaptéru Django na GitHubu

Vzor kódu

Tato demo aplikace demonstruje, jak integrovat Kontextový editor s aplikací Django.

React (intl)

Poznámka

Tato knihovna nemusí fungovat s IE11 nebo staršími prohlížeči. Přidejte Babel do build pipeline, pokud je vyžadována podpora starších prohlížečů.

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

Chcete-li nainstalovat Kontextový editor v tomto prostředí, postupujte podle těchto kroků:

Nainstalujte balíček pomocí NPM:
```
npm install react-intl-phraseapp
```
nebo sestavte ze zdroje:
```
npm run dist
```
```
npm install
```

Nakonfigurujte:

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

ID projektu se nachází 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

Tento demo ukazuje integraci Phrase In-Context editoru s react-intl.

Ruby on Rails (i18n)

Chcete-li nainstalovat Kontextový editor v tomto prostředí, postupujte podle těchto kroků:

Přidejte phraseapp-in-context-editor-ruby gem do prostředí, které chcete použít s In-Context Editorem:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
a nainstalujte ho provedením příkazu bundle:
```
$ bundle install
```
Nainstalujte phraseapp-in-context-editor-ruby gem provedení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řte a spravujte přístupové tokeny v nastavení profilu nebo prostřednictvím API autorizací.

--project-id

ID projektu se nachází v nastavení projektu. To vytvoří inicializační soubor s některými konfiguračními možnostmi.
Přidejte JavaScript snippet do rozlož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 jakémkoli webovém prohlížeči, abyste viděli aplikovaný Kontextový editor. Přihlaste se s jakýmkoli uživatelským účtem organizace Phrase.
Zakázat Turbolinks (pokud je používán)

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

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

Vzor kódu

Tento demo ukazuje integraci editoru frází In-Context s react-i18next.

Jaro

Chcete-li nainstalovat Kontextový editor v tomto prostředí, postupujte podle těchto kroků:

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

Pro vykreslení všech překladů prostřednictvím Phrase přidejte bean do aplikace:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Poskytněte požadovanou JavaScriptovou pomocnou funkci v šablonách tím, že ji vystavíte jako bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Přidejte <script> tag 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.

Příklad zdrojového kódu aplikace na GitHubu

Jak lokalizovat jarní aplikace jako profesionál

Balíček Spring Boot starter (poskytovaný ePages)

Symfony 2.x

Chcete-li nainstalovat Kontextový editor v tomto prostředí, postupujte podle těchto kroků:

Vytvořte nové prostředí, ve kterém bude editor In-Context běžet. V příkladu je nové prostředí pojmenováno překlad.

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 byl prohlížeč prostředí přístupný:

# 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 vystavili názvy klíčů editoru In-Context:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Přidejte JavaScriptový úryvek do rozvržení:

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

Otevřete aplikaci v jakémkoli webovém prohlížeči, abyste viděli aplikovaný Kontextový editor. Přihlaste se s jakýmkoli uživatelským účtem organizace Phrase.

Dokumentace k překladu Symfony

Symfony 2.x adaptér kód na GitHubu

Symfony 3.x

Chcete-li nainstalovat Kontextový editor v tomto prostředí, postupujte podle těchto kroků:

Vytvořte nové prostředí, ve kterém bude editor In-Context běžet. V příkladu je nové prostředí pojmenováno překlad.

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

imports:

   - { resource: config.yml }
```

Vytvořte kontroler, aby byl prohlížeč prostředí přístupný:

# 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 vystavili názvy klíčů editoru In-Context:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

Ujistěte se, že třída je vždy přepsána, když je balíček použit s kompilátorem:

# 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átory, zaregistrujte je v metodě build() třídy balíčku:

# 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 JavaScriptový úryvek do rozvržení:

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

Otevřete aplikaci v jakémkoli webovém prohlížeči, abyste viděli aplikovaný Kontextový editor. Přihlaste se s jakýmkoli uživatelským účtem organizace Phrase.

Dokumentace k překladu Symfony

Vue I18n

Poznámka

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

Chcete-li nainstalovat editor v kontextu 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 (příklad):

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: 'Ahoj světe!'
  }
});

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

Pro integraci knihovny:

Importujte Vue I18n Phrase In-Context Editor knihovnu.
Vytvořte novou Vue I18n Phrase In-Context Editor instanci, předáním Vue I18n instance jako prvního argumentu a Konfigurace fráze jako druhého.

Možnosti konfigurace a příklad metod.

Používání starého editoru v kontextu

Ajax mód

Editor v kontextu podporuje Ajax a manipulaci s DOM (tj. pomocí JavaScriptu) pomocí pozorovatelů mutací.

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Režim ladění

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Nucení kódu jazyka

Chcete-li při spuštění kontextového 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 kontextovém editoru také:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Ignorované klíče

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

Klíče mohou být vyloučeny z vykreslování pomocí kontextového 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. Můžete 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í jakémukoli z těchto vzorů nebudou zpřístupněny kontextovému editoru a budou vykresleny normálně.