Editor v kontextu (řetězce)

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

K dispozici pro

Edice Advanced a Enterprise (starší)

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

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

V současnosti jsou k dispozici dvě verze:

Editor v kontextu:

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ší Editor v kontextu.

Po instalaci editoru v kontextu jej lze přizpůsobit pro práci s mnoha technologiemi.

Instalace editoru v kontextu Strings

Požadavky

Pro použití editoru v kontextu aplikace vyžaduje:

Webové stránky, webové aplikace, mobilní stránky atd.
Překladatelé mají přístup k webovému serveru, na kterém běží editor. Pokud je to nutné, může to být místní prostředí.
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ě.
JavaScriptový úryvek, který vykresluje editor.
Ideálně by to mělo být vyhrazené prostředí pro překlady. To může být klonování stagingového prostředí a i když je to více práce na počáteční nastavení, poskytuje to 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 In-Context Editor podle potřeby.

JavaScript Snippet

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

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

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

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

Account ID se nachází v nastavení organizace Strings.

Ukázka:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Nezměňujte toto jméno, aby konfigurace fungovala
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Nastavte na 'us' pro datové centrum v USA
      prefix: '{{__', // Nastavte na prefix pro formát klíče v šablonách zobrazení
      suffix: '__}}', // Nastavte na suffix pro formát klíče v šablonách zobrazení
      disableShortcuts: false, // Nastavte na true, aby se zakázaly klávesové zkratky
      autoLowercase: true, // Nastavte na false, pokud klíče obsahují velká písmena
    };
  </script>
  <script type="module" async="" src="https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js"></script>

Instalace webových rámců

i18next

Poznámka

i18next Phrase In-Context Editor Post Processor podporuje všechny verze i18next 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 In-Context editoru v tomto prostředí postupujte podle těchto kroků:

Nainstalujte i18next-phrase-in-context-editor-post-processor knihovnu 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 knihoven 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ý úryvek ICE do instance i18next v nastavení.

Ukázkový úryvek:

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

Poznámka

accountId musí být poskytnuto pro úspěšné nastavení ICE. ID úč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 In-Context editor.
Otevřete aplikaci v webovém prohlížeči pro zobrazení In-Context editoru. Přihlaste se jako jakýkoli uživatel organizace Phrase.

Možnosti konfigurace a vzorové 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 tyto nejsou oficiálně podporovány a nebudou dostávat žádné specifické aktualizace nebo opravy chyb.

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

Nainstalujte nejnovější balíček s preferovaným správcem 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: '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ředáte instanci Vue I18n a jako druhý argument Phrase Config.

Možnosti konfigurace a vzorové metody.

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

Nastavit:

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

ID projektu lze nalézt v nastavení projektu.

ID účtu lze nalézt 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
```

Vzorek kódu

Tento demo ukazuje integraci editoru In-Context Phrase 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
```

Nastavit:

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

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

ID projektu lze nalézt v nastavení projektu.

ID účtu lze nalézt 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 umožnili práci přes americké 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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Vzorek kódu

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

Ruby on Rails (i18n)

Poznámka

Tato knihovna nemusí fungovat ihned v některých starších prohlížečích nebo Microsoft IE11. Přidejte Babel do build pipeline, pokud je potřeba podporovat tyto prohlížeče.

Předpoklady

Vytvořit účet pro účet Phrase Strings.
Použijte vynikající i18n gem, který je také používán 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
```
- Přes 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 lze nalézt v nastavení projektu.

ID účtu lze nalézt v nastavení organizace Strings.
Přidejte Ruby snippet 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 datové centrum v USA pro povolení práce 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 jakémkoli webovém prohlížeči, abyste viděli In-Context editor aplikovaný na aplikaci. Přihlaste se jako jakýkoli uživatel organizace Phrase.

Vzorek kódu

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

Django

Předpoklady

Vytvořit účet pro účet Phrase Strings.
Použijte Django framework 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 django-phrase balíček pomocí pip:
```
$ pip install django-phrase
```
Přidejte Phrase 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:

    # Nastavení In-Context Editoru Phrase
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Nastavte svůj vlastní účet id
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Nastavte svůj vlastní projekt id
    PHRASE_DATACENTER = "eu"  # Vyberte svůj datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

ID projektu lze nalézt v nastavení projektu.

ID účtu lze nalézt 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 In-Context editor aplikovaný na aplikaci. Přihlaste se jako jakýkoli uživatel organizace Phrase.

Django adapter code on GitHub

Vzorek kódu

Tato demo aplikace demonstruje, jak integrovat In-Context editor s aplikací Django.

Flask

Předpoklady

Vytvořit účet pro účet Phrase Strings.
Použijte Flask framework 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 Flask-Phrase balíček 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: "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 lze nalézt v nastavení projektu.

ID účtu lze nalézt v nastavení organizace Strings.

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

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

Když 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.

Vzorek kódu

Tato demo aplikace ukazuje, jak integrovat In-Context 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 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, upravte odpovídajícím způsobem prostor názvů.

Upravte config/services.yaml, aby dekoroval překladatele službou s adaptérem Phrase:

služby:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        dekoruje: překladatel

Přidejte následující JavaScriptový úryvek do základního nebo Twig šablonového rozložení mezi {% block javascripts %}, aby In-Context Editor mohl číst webovou stránku:

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        datacenter: 'eu',
        origin: 'phrase-symfony',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

Aplikace Symfony je nyní připojena k In-Context Editoru.

ID projektu lze nalézt v nastavení projektu.

ID účtu lze nalézt v nastavení organizace Strings.

Pokud je to nutné, nastavte datové centrum v USA pro povolení práce 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.

Vzorek kódu

Tato demo aplikace ukazuje, jak integrovat In-context editor s aplikací Symfony.

Nastavení In-context Editoru

Zveřejnění názvů klíčů

Obvykle vrstva zobrazení vykresluje překlady tím, že předává název překládaného řetězce (tj. klíče) nějaké metodě překladu nebo pomocníkovi 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 v šabloně uvedeno, které klíče vykreslit jako překlady.

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

{{__phrase_NameOfYourKey__}}

Příklad:

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

Upravte pomocnou metodu translate(), aby zveřejnila 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 překladové pomocníky v kódu přepsány nebo může být vytvořena obalená verze pro použití v šablonách.

Příklad:

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

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

Ujistěte se, že názvy klíčů jsou převedeny do rozpoznatelného formátu.

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

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 editoru v kontextu převádí všechny klíče na malá písmena. Pokud se vyskytnou problémy s tímto chováním a chcete používat klíče citlivé na velikost písmen v editoru v kontextu, zakázat automatickou funkci malých písmen:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

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

Při používání editoru v kontextu jsou názvy klíčů obvykle obaleny dekorátory (výchozí jsou složené závorky), aby se generovaly unikátní identifikační klíče v kontextu dokumentu:

{{__phrase_YOUR.KEY__}}

Pokud to způsobuje konflikty s jinými knihovnami (např. šablonovými enginy na straně klienta, včetně AngularJS a Ember.js), které používají podobnou syntaxi, změňte prefix a sufix dekorátoru editoru v kontextu v nastavení. Abychom editoru v kontextu řekli, 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 In-Context editoru, ujistěte se, že jsou dekorátory nakonfigurovány:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

konec

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

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

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

In-Context editor je ve výchozím nastavení zakázán.

In-Context editor 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í příznaku k proměnné prostředí:

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

Úplné přeparsování

Povolit fullReparse pokud používáte In-Context editor s JavaScriptovým rámcem, který používá Virtuální DOM, jako je React. To umožňuje správné opětovné zpracování, když jsou detekovány změny v DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizovat výstup na webovou stránku

Editor v kontextu může být nakonfigurován tak, aby escapoval nebo upravoval překlady před jejich vložením na webovou stránku poskytnutím funkce do 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 systém jednotného přihlašování a chcete inicializovat editor v kontextu se zapnutým SSO, přidejte následující konfigurační hodnotu před JavaScriptový úryvek:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Starý editor v kontextu: Nastavení

Instalace webového rámce

Angular 2 (ngx-translate)

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

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

Nastavte:

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

ID projektu lze nalézt v nastavení projektu.

Ve výchozím nastavení parser dokumentu editoru převádí všechny klíče na malá písmena. Pokud se vyskytnou 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 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 editor v kontextu 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 lze nalézt v nastavení projektu. To vytvoří inicializační soubor s některými konfiguračními možnostmi.
Přidejte phrase-javascript direktivu do aplikace uvnitř tagu <head>:
```
<phrase-javascript></phrase-javascript>
```
Otevřete aplikaci v jakémkoli webovém prohlížeči, abyste viděli editor In-Context aplikovaný na aplikaci. 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 editor v kontextu 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 phrase_i18n tag šablony v šablonách:
```
{% load phrase_i18n %}
```
Aby bylo možné django-phrase přepsat metody překladu, načtěte phrase_i18n po i18n.
Přidejte JavaScriptový úryvek do rozvržení:
```
{% phrase_javascript %}
```

Nakonfigurujte In-Context 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 editor In-Context aplikovaný na aplikaci. 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 ukazuje, jak integrovat In-Context editor s aplikací Django.

React (intl)

Poznámka

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

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

Chcete-li nainstalovat editor v kontextu 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
```

Nastavte:

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

ID projektu lze nalézt v nastavení projektu.

Přidejte úryvek 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 editor v kontextu 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 jej 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 lze nalézt v nastavení projektu. To vytvoří inicializační soubor s některými konfiguračními možnostmi.
Přidejte JavaScriptový úryvek do rozložení vaší aplikace do tagu <head> pomocí pomocné funkce 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 editor In-Context aplikovaný na aplikaci. 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 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 do tagu <body>:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Vzor kódu

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

Jaro

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

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

Aby byly všechny překlady vykresleny 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 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.

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

Jak lokalizovat aplikace Spring jako profesionál

Starter balíček Spring Boot (poskytováno ePages)

Symfony 2.x

Chcete-li nainstalovat editor v kontextu 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 }

parametry:

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

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

# web/app_translation.php

<?php

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

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

use Symfony\Component\HttpFoundation\Request;

$kernel = new AppKernel('translation', false);

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

Přepište standardní metodu překladu, abyste vystavili názvy klíčů do In-context editoru:

# 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') {

            // Vraťte přeložené hodnoty pro doménu 'routes'

            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 editor In-Context aplikovaný na aplikaci. Přihlaste se s jakýmkoli uživatelským účtem organizace Phrase.

Symfony Translation Documentation

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

Symfony 3.x

Chcete-li nainstalovat editor v kontextu 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é v prohlížeči:

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

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

$kernel = new AppKernel('translation', true);

$kernel->loadClassCache();

$request = Request::createFromGlobals();

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

$response->send();

$kernel->terminate($request, $response);

Přepište standardní metodu překladu, abyste vystavili názvy klíčů do In-context editoru:

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

       }

       // Vraťte ID klíče překladu s předponou a příponou pro 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 editor In-Context aplikovaný na aplikaci. Přihlaste se s jakýmkoli uživatelským účtem organizace Phrase.

Symfony Translation Documentation

Vue I18n

Poznámka

Vue I18n Phrase In-Context Editor podporuje všechny verze Vue I18n 8.17.5 a novější. Tato knihovna může fungovat s předchozími verzemi, ale ty nejsou oficiálně podporovány a nebudou dostávat žádné specifické aktualizace nebo 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 (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 knihovnu Vue I18n Phrase In-Context Editor.
Vytvořte novou instanci Vue I18n Phrase In-Context Editor, předáním instance Vue I18n jako prvního argumentu a Phrase Config jako druhého.

Možnosti konfigurace a příklad metod.

Používání starého In-context Editoru

Ajax mód

In-Context Editor podporuje Ajax a manipulaci s DOM (tj. pomocí JavaScriptu) pomocí mutačních pozorovatelů.

Ajax mód 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í In-Context editoru. Chcete-li zakázat Ajax mód, přidejte následující hodnotu konfigurace před úryvek JavaScriptu:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Režim ladění

Pro povolení režimu ladění přidejte následující konfigurační hodnotu před JavaScriptový úryvek:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Nucení kódu jazyka

Pro explicitní nastavení konkrétního kódu jazyka při spuštění In-context editoru 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 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í 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. Pro vyloučení klíčů 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 In-context editoru a budou vykresleny normálně.