Kontextový editor (Strings)

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

K dispozici pro

Plány pro Team, Professional, Business a Enterprise

Kontaktujte prodejní oddělení s otázkami týkajícími se licencí.

K dispozici pro

Edice Advanced a Enterprise (starší)

Kontaktujte prodejní oddělení s otázkami týkajícími se licencí.

Kontextový editor je určen k Pomoci překladatelům s prací efektivněji a přeložit webovou stránku prostřednictvím přímé integrace s překladovým editorem Strings.

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

Kontextový editor:

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

Po instalaci Kontextového editoru lze zakázku přizpůsobit mnoha technologiím.

Instalace Kontextového editoru Strings

Požadavky

Chcete-li použít Kontextový editor, aplikace vyžaduje:

Webové stránky, webové aplikace, mobilní stránky atd.
Překladatelé mají přístup na webový server běžící na editoru. V případě potřeby se může jednat o lokální prostředí.
Struktura lokalizačního souboru klíč-hodnota.

Weby s extrahovanými překládanými texty Strings a vrstvou zobrazení, která k vykreslování překladů používá strukturu klíčů a hodnot.
Názvy klíčů vystavené vrstvě zobrazení nebo šablony.
JavaScriptový úryvek, který vykreslí editor.
V ideálním případě specializované prostředí pro překlady. To může klonovat pracovní prostředí, a i když je třeba nejprve nastavit více zakázek, poskytuje lepší pracovní postup a větší stabilitu.

Pokud není možné vytvořit specializované prostředí, lze použít stávající pracovní prostředí s možností povolit Kontextový editor podle potřeby.

JavaScript Snippet

Zahrnout fragment JavaScriptu do rozložení aplikace.

Úryvek obsahuje kód nezbytný pro:

Komunikujte přes Phrase Strings API.
Vykreslit rozhraní uživatele.
Zadat přihlášení.

ID projektu najdete v nastavení projektu.

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

Vzorek:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // změnit tento název, aby nastavení zakázka
      accountId: ‚ACCOUNT_ID‘,
      projectId: ‚PROJECT_ID‘,
      datové centrum: 'eu', // Nastavit na 'us' pro datové centrum v USA
      předpona: '_{_{_{', // Nastavit na předponu formátu klíče v šabloně zobrazení
      přípona: '__}', // Nastavte příponu pro formát klíče v šablonách zobrazení
      disableShortcuts: false, // Nastavit na true, abyste zakázali klávesové zkratky
      autoLowercase: true, // Nastavte na nepravda, pokud klíče obsahují velká písmena
    };
  </skript>
  <script type="module" async="" src="https://d2bgdl6xit7z.cloudfront.net/latest/ice/index.js"></script>}}}

Instalace webového rozhraní

i18next

Poznámka

Postprocesor Kontextového editoru i18next Phrase podporuje všechny verze i18next novější než 19.5.1. Přestože tato knihovna může zakázku i s předchozími verzemi, nejsou oficiálně podporovány a nemusejí obsahovat žádné konkrétní aktualizace ani opravy chyb.

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Nainstalujte knihovnu i18next-Phrase-in-context-editor-post-processor s preferovaným správcem balíčků:

# příze
příze Přidat i18next-Phrase-in-context-editor-post-processor

# npm
npm install i18next-Phrase-in-context-editor-post-procesor

Poznámka

Doporučená verze knihovny je 1.4.0 nebo novější.

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

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

Bootstrap (vzorek):

import i18next z 'i18next';
import i18nextXHRBackend z 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        záložní Lng: 'cs',
        ladit: true,
        ns: ['zvláštní', 'běžné'],
        defaultNS: 'special',
        backend: {
            // načíst nějaké překlady z repozitáře i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, funkce(err, t) {
        // udělat něco při další inicializaci i18
    });

Pro integraci knihovny:

Import PhraseInContextEditorPostProcessor z knihovny i18next-Phrase-in-context-editor-post-processor.
Vytvořte novou instanci postprocesoru i18next Phrase Kontextového editoru, jako argument předejte PhraseConfig.
Předat nově vytvořenou instanci postprocesoru i18next Phrase Kontextového editoru metodě i18next použít.
Přidat řetězec phraseInContextEditor do vlastnosti pole postProcess (předáno v rámci konfiguračního objektu metody i18next init).

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

Vzorový úryvek:

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

Poznámka

Pro úspěšné nastavení ICE musí být zadáno accountId. ID uživatelského účtu najdete v nastavení organizace Strings.

V případě potřeby nakonfigurujte atribut useOldICE pro přepnutí do staré ICE:

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

Spusťte Kontextový editor.
Otevřete aplikaci ve webovém prohlížeči a zobrazte Kontextový editor. přihlásit se s jakýmkoli uživatel organizace Phrase.

Možnosti konfigurace a vzorové metody.

Vue I18n

Poznámka

Kontextový editor Vue I18n Phrase podporuje všechny verze Vue I18n 8.17.5 a novější. Tato knihovna může zakázku s předchozími verzemi, ale nejsou oficiálně podporovány a nedostanou žádné konkrétní aktualizace ani opravy chyb.

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Nainstalujte nejnovější balíček s preferovaným správcem balíčků:

# příze
příze Přidat vue-i18n-Phrase-in-context-editor

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

nebo načtěte pomocí CDN (zaregistrujte ručně okno['vue-i18n-frase-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 (vzorek):

import Vue z 'vue';
import VueI18n z 'vue-i18n';

Vue.use(VueI18n);

konst i18n = nový VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'cs',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE | 'cs',
  zpráv: {
      Dobrý den: 'Ahoj světe!'
  }
});

nová hodnota ({
  i18n,
  render: h => h(aplikace)
}).$mount('#app');

Pro integraci knihovny:

Import knihovny Kontextového editoru Vue I18n Phrase.
Vytvořte novou instanci Kontextového editoru Vue I18n Phrase, kde jako první argument bude vybrána instance Vue I18n a jako druhý Phrase Config.

Možnosti konfigurace a vzorové metody.

Reagovat (intl)

Poznámka

Tato knihovna nemusí zakázku s prohlížečem IE11 nebo starším. Přidejte Babel do kanálu sestavení, pokud je vyžadována starší podpora prohlížeče.

Tato knihovna dědí společné součásti balíčků react-intl. Pokud je Phrase aktivován voláním initializePhraseAppEditor, změní se chování komponent.

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

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

Konfigurovat:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountid: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  předpona: „[[__“,
  přípona: "__]]",
  fullReparse: true
};

ID projektu najdete v nastavení projektu.

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

Přidejte úryvek do aplikace react:

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

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountid: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  předpona: „[[__“,
  přípona: "__]]",
  fullReparse: true
};

inicializovatPhraseAppEditor(config);

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

Vzorek kódu

Toto demo ukazuje integraci Kontextového editoru Phrase s react-intl.

Úhel 2 (ngx-translate)

Předpoklady

Vytvořte si uživatelský účet Phrase Strings.
Použijte modul ngx-translate pro lokalizaci v aplikacích Angular 2.

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Instalace s NPM:
```
Instalace npm ngx-translate-phraseapp
```

Konfigurovat:

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

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

ID projektu najdete v nastavení projektu.

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

V případě potřeby nakonfigurujte atribut useOldICE pro přepnutí do staré ICE:

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

inicializovatPhraseAppEditor(config);

V případě potřeby Přidejte konkrétní URL pro USA a povolte práci v datovém centru v USA:

baseUrl: "https://us.app.phrase.com",
apiBaseUrl: 'https://api.us.app.phrase.com/api/v2',
oauthEndpointUrl: "https://api.us.app.phrase.com/api/v2/authorizations",
profileUrl: "https://us.app.phrase.com/settings/profile",

Analyzátor dokumentů editoru ve výchozím nastavení převede všechny klíče na malá písmena. Pokud máte problémy s tímto chováním a chcete v editor použít klíče rozlišující velká a malá písmena, zakázat automatickou funkci malých a malých písmen:
```
let config = {
  // ...
  AutoLowercase: false
}
```

Přidejte tyto úryvky do aplikace Angular:

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} z 'ngx-translate-phraseapp'

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

inicializovatPhraseAppEditor(config);

app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } z '@ngx-translate/core';
import { HttpClientModule, HttpClient } z '@angular/common/http';
import { PhraseAppCompiler } z 'ngx-translate-phraseapp'
import {AppComponent } z './app.component';


Stáhnout funkci HttpLoaderFactory(http: HttpClient) {
  vrátit nový TranslateHttpLoader(http);
}

@NgModule({
  prohlášení: [
    Komponenta aplikace
  ],
  import: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      nakladač: {
        poskytnout: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      překladač: {
        poskytnout: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  poskytovatelů: [],
  bootstrap: [Komponenta aplikace]
})

Vzorek kódu

Tato demo aplikace představuje integraci Kontextového editoru s Angular a ngx-translate.

Ruby on Rails (i18n)

Poznámka

Tato knihovna nemusí zakázku po vybalení z Boxu pro starší prohlížeče nebo Microsoft IE11. Přidejte Babel do kanálu sestavení, pokud je třeba tyto prohlížeče podporovat.

Požadavky

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

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Přidejte knihovnu phraseapp-in-context-editor-ruby do požadovaného prostředí jednou z následujících metod:
- Via Gem
```
Instalace drahokamu phraseapp-in-context-editor-ruby
```
- Přes balíček
  
  Přidat do souboru drahokamů:
```
gem 'phraseapp-in-context-editor-ruby
```
- Sestavte přímo ze zdroje a získejte ty nejnovější a nejlepší:
```
Balíček && sestavení drahokamu
```
Vytvořte inicializační soubor spuštěním generátoru Rails:
```
Rails generují phraseapp_in_context_editor:install --uživatelský účet_id=<VÁŠ uživatelský účet_ID> --projekt-id=<VÁŠ_PROJEKT_ID>
```
ID projektu najdete v nastavení projektu.

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

Do inicializátoru /config/initializers/phraseapp_in_context_editor.rb Přidejte následující konfiguraci:

  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "VAŠE_ACCOUNT_ID"
  config.datacenter = "eu"

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

  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "VAŠE_ACCOUNT_ID"
  config.datacenter = "us"

Otevřete aplikaci v libovolném webovém prohlížeči a zobrazte Kontextový editor aplikovaný na aplikaci. přihlásit se s jakýmkoli uživatel organizace Phrase.

Vzorek kódu

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

Django

Požadavky

Vytvořte si uživatelský účet Phrase Strings.
Použijte pro Python framework Django.

Poznámka

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

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

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

    ‚Phrase‘,

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

Přidejte do souboru nastavení.py následující konfiguraci:

    # Nastavení Kontextového editoru Phrase
    PHRASE_ENABLED = Správně
    PHRASE_UŽIVATELSKÝ ÚČET_ID = "VÁŠ_UŽIVATELSKÝ ÚČET_ID" # Nastavte si vlastní ID uživatelského účtu
    PHRASE_PROJEKT_ID = "TVOJE_ID_PROJEKTU" # Nastavte si vlastní ID projektu
    PHRASE_DATACENTER = "eu" # Vyberte datové centrum 'eu' | 'us'
    PHRASE_PREFIX = „_{_{_{“
    PHRASE_SUFFIX = „__}“}}}

ID projektu najdete v nastavení projektu.

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

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

Otevřete aplikaci v libovolném webovém prohlížeči a zobrazte Kontextový editor aplikovaný na aplikaci. přihlásit se s jakýmkoli uživatel organizace Phrase.

Kód adaptéru Django na GitHubu

Vzorek kódu

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

Flask

Požadavky

Vytvořte si uživatelský účet Phrase Strings.
Použijte pro Python framework Blask.

Poznámka

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

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Instalace balíčku Flask-Phrase pomocí pipu:
```
instalace pip Flask-Phrase
```

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

PHRASEAPP_ENABLED = Správně
PHRASEAPP_PREFIX = ‚_{‘
PHRASEAPP_SUFFIX = '__}}'}

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

od baňky import Baňka, [...]
od flask_babel import Babel
z flask_Phrase import Phrase, gettext, ngettext
app = Baňka(__name__)
babel = Babel (aplikace)
Phrase = Phrase(aplikace)

Přidejte do základního souboru s následujícím tagem (měl by jít do oddílu šablony souboru):

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "TVOJE ID PROJEKTU",
        accountId: „TVŮJ UŽIVATELSKÝ ÚČET-ID“
        datové centrum: "eu",
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'modul';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fráze, s);
    })();
</skript>

ID projektu najdete v nastavení projektu.

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

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

window.PHRASEAPP_CONFIG = {
    projectId: "TVOJE ID PROJEKTU",
    accountId: „TVŮJ UŽIVATELSKÝ ÚČET-ID“
    datové centrum: „my“,
};

Pokud je PHRASEAPP_ENABLED = True, balíček upraví vracející se hodnoty z překladových funkcí tak, aby byly ve formátu, který ICE přečte. Po nastavení na Nepravda přejde zpět na standardní funkce gettext Flask-Babel.

Vzorek kódu

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

Symfony 5.x

Požadavky

Vytvořte si uživatelský účet Phrase Strings.
Použít framework Symfony pro PHP.

Poznámka

Verze 2.0.0 podporuje Symfony 5 a vyšší. Pokud používáte Symfony 2, 3 nebo 4, zkontrolujte staré verze ICE.

Chcete-li integrovat Kontextový editor s aplikací Symfony, postupujte takto:

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

Upravte config/services.yaml a ozdobte službu překladatele adaptérem Phrase:

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

Přidejte následující fragment JavaScriptu do základní šablony nebo šablony rozložení Větvičky mezi {% blokové javascripty %}, aby Kontextový editor mohl číst webovou stránku:

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        datové centrum: 'eu',
        původ: 'Phrase-symfony',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'modul';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(fráze, s);
    })();
</skript>

Aplikace Symfony je nyní propojena s Kontextový editor.

ID projektu najdete v nastavení projektu.

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

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

window.PHRASEAPP_CONFIG = {
    projectId: "TVOJE ID PROJEKTU",
    accountId: „TVŮJ UŽIVATELSKÝ ÚČET-ID“
    datové centrum: „my“,
};

Znovu načtěte aplikaci a přihlaste se přihlašovacími údaji Phrase a začněte proces překladu přímo na webové stránce.

Vzorek kódu

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

Nastavení Kontextového editoru

Odhalení názvů klíčů

Vrstva zobrazení obvykle vykresluje překlady tak, že předá název řetězce překládaného textu (tedy klíče) nějakému seřadí způsobu překladu nebo pomocníkovi zobrazení.

Vzorový PHP kód:

$translations = pole(

  "page.headline" => "Nějaký nadpis",

  "page.link.label" => "Jsem odkaz",

  "page.link.hint" => "Klikněte na mě"

)

funkce translate($keyName) {

  vrátit $translations[$keyName];

}

Šablona by pak vykreslila výstup metody translate() namísto skutečně přeloženého řetězce:

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

Formátování

V šabloně musí být uvedeno, pro které klíče se má překlad provádět.

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

{{__phrase_NameOfYourKey__}}

Příklad:

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

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

funkce translate($keyName) {

  if ($phraseModeEnabled) {

    vrátit „“;

  } other {

    vrátit $translations[$keyName];

  }

}

V závislosti na struktuře lze překladatelské pomocníky v kódu přepsat nebo vytvořit zabalenou verzi, která se použije v šablonách.

Příklad:

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

Kódování názvů klíčů a speciálních znaků

Zajistit převod názvů klíčů do rozpoznatelného formátu.

Znaky z následujícího seznamu je třeba při vystavení Kontextovému editoru kódovat:

Znak	Escape 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ý převod písmen

Ve výchozím nastavení převede analyzátor dokumentů Kontextového editoru všechny klíče na malá písmena. Pokud trpíte problémy s tímto chováním a chcete v Kontextový editor použít klíče rozlišující velká a malá písmena, zakázat automatickou funkci malých písmen:

window.PHRASEAPP_CONFIG = {

  AutoLowercase: false

}

Přizpůsobit dekoratéry klíčů

Při použití Kontextového editoru jsou názvy klíčů obvykle obklopeny dekoratéry (výchozí jsou vlnité závorky), 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ř. nástroji šablon na straně klienta, včetně AngularJS a Ember.js), které použijí podobnou syntaxi, změňte v nastavení předponu a příponu Kontextového editoru. Chcete-li Kontextovému editoru říct, které dekoratéry má parser hledat, Přidejte před snippet JavaScriptu následující konfigurační hodnoty:

window.PHRASEAPP_CONFIG = {

  předpona: '[[__',

  přípona: „__]“

}

Editor musí vyhledat tagy začínající [__ a končící __]:

[[__phrase_YOUR.KEY__]]

Pokud používáte drahokam Phraseapp-in-context-editor-Ruby k zajištění funkcí Kontextového editoru, zkontrolujte, zda jsou dekoratéři nakonfigurováni:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

konec

Pokud drahokam nepoužíváte, ujistěte se, že je schéma expozice názvu klíče upraveno ve vlastním kódu.

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

Toto nastavení je k dispozici pouze při použití drahokamu Phraseapp-in-context-editor-Ruby.

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

Kontextový editor lze výslovně povolit nebo zakázat. To ovlivní zahrnutí snippetu JavaScriptu (při použití pomocníka zobrazení) a vykreslování názvů zdobených klíčů v zobrazeních:

PhraseApp::InContextEditor.enabled = true|false

Příklad navázání označit na proměnnou prostředí:

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

Úplné přepracování

Povolit fullReparse, pokud používáte Kontextový editor s JavaScript frameworkem, který používá Virtual DOM, jako je React. To umožňuje správné přepracování při zjištění změn DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizovat výstup na webovou stránku

Kontextový editor lze nakonfigurovat tak, aby kódoval nebo pozměňoval překlady před vložením na webovou stránku poskytnutím funkce vlastnosti sanitize.

Funkce přijme překladový řetězec jako první argument a měla by vrátit řetězec:

import escape z „lodash/escape“;

window.PHRASEAPP_CONFIG = {  

    sanitizovat: escape

}

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

Pokud používáte systém jednotného přihlašování a chcete spustit Kontextový editor s povoleným SSO, Přidejte před kód JavaScriptu následující konfigurační hodnotu:

window.PHRASEAPP_CONFIG = {

  sso: {

    povoleno: true,
    
    poskytovatel: 'saml',

    identifikátor: [vložit_identifikátor_společnosti]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    vynuceno: true

  }

}

Starý Kontextový editor: Nastavení

Instalace webového rozhraní

Úhel 2 (ngx-translate)

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Instalace s NPM:
```
Instalace npm ngx-translate-phraseapp
```

Konfigurovat:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  předpona: „_{_{“,
  přípona: "__}",
  fullReparse: true
};}}

ID projektu najdete v nastavení projektu.

Analyzátor dokumentů editoru ve výchozím nastavení převede všechny klíče na malá písmena. Pokud máte problémy s tímto chováním a chcete v editor použít klíče rozlišující velká a malá písmena, zakázat automatickou funkci malých a malých písmen:
```
let config = {
  // ...
  AutoLowercase: false
}
```

Přidejte tyto úryvky do aplikace Angular:

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler} z 'ngx-translate-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  předpona: „_{_{“,
  přípona: "__}",
  fullReparse: true
};

inicializovatPhraseAppEditor(config);}}

app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } z '@ngx-translate/core';
import { HttpClientModule, HttpClient } z '@angular/common/http';
import { PhraseAppCompiler } z 'ngx-translate-phraseapp'

Stáhnout funkci HttpLoaderFactory(http: HttpClient) {
  vrátit nový TranslateHttpLoader(http);
}

@NgModule({
  prohlášení: [
    Komponenta aplikace
  ],
  import: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      nakladač: {
        poskytnout: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      překladač: {
        poskytnout: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  poskytovatelů: [],
  bootstrap: [Komponenta aplikace]
})

Vzorek kódu

Tato demo aplikace představuje integraci Kontextového editoru s Angular a ngx-translate.

AngularJS (angular-translate)

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

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

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
ID projektu najdete v nastavení projektu. Vytvoří se inicializační soubor s některými možnostmi konfigurace.
Přidejte směrnici Phrase-javascript do aplikace uvnitř tagu <head>:
```
<phrase-javascript></phrase-javascript>
```
Otevřete aplikaci v libovolném webovém prohlížeči a zobrazte Kontextový editor aplikovaný na aplikaci. přihlásit se s jakýmkoli uživatel organizace Phrase.

angular-Phrase na GitHubu

Vzorek kódu

Tato demo aplikace pro angular-Phrase ukazuje, jak lokalizovat AngularJS s angular-translate.

Django

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

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

    ‚Phrase‘,

)
```
Použijte tag šablony Phrase_i18n v šablonách:
```
{% load phrase_i18n %}
```
Aby mohl django-Phrase přepsat metody překladu, načtěte Phrase_i18n za i18n.
Přidejte fragment JavaScriptu do rozložení:
```
{% phrase_javascript %}
```

Pro projekt nakonfigurujte Kontextový editor s těmito možnostmi:

PHRASE_ENABLED = TruePHRASE_PROJECT_ID = 'VÁŠ_PROJECT_ID'PHRASE_PREFIX = '{{__'PHRASE_SUFFIX = '__}}'

Otevřete aplikaci v libovolném webovém prohlížeči a zobrazte Kontextový editor aplikovaný na aplikaci. přihlásit se s jakýmkoli uživatel organizace Phrase.

Kód adaptéru Django na GitHubu

Vzorek kódu

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

Reagovat (intl)

Poznámka

Tato knihovna nemusí zakázku s prohlížečem IE11 nebo starším. Přidejte Babel do kanálu sestavení, pokud je vyžadována starší podpora prohlížeče.

Tato knihovna dědí společné součásti balíčků react-intl. Pokud je Phrase aktivován voláním initializePhraseAppEditor, změní se chování komponent.

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Instalace balíčku přes NPM:

npm install react-intl-phraseapp

nebo vytvořit ze zdroje:

npm run dist

Instalace npm

Konfigurovat:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  předpona: „[[__“,
  přípona: "__]]",
  fullReparse: true
};

ID projektu najdete v nastavení projektu.

Přidejte úryvek do aplikace react:

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

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  předpona: „[[__“,
  přípona: "__]]",
  fullReparse: true
};

inicializovatPhraseAppEditor(config);

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

Vzorek kódu

Toto demo ukazuje integraci Kontextového editoru Phrase s react-intl.

Ruby on Rails (i18n)

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Přidejte drahokam phraseapp-in-context-editor-ruby do prostředí, ve kterém chcete použít Kontextový editor:
```
skupina :development do
  gem 'phraseapp-in-context-editor-ruby'
 konec
```
a nainstalujte jej příkazem bundle:
```
$ instalace balíčku
```
Nainstalujte drahokam phraseapp-in-context-editor-Ruby spuštěním generátoru Rails:
```
$ balíček exec Rails generovat phraseapp_in_context_editor:install --přístup-token=VÁŠ_PŘÍSTUP_TOKEN --projekt-id=VÁŠ_PROJEKT_ID
```
--access-token

přístup tokeny můžete vytvořit a spravovat v nastavení profil nebo přes API autorizace.

--project-id

ID projektu najdete v nastavení projektu. Vytvoří se inicializační soubor s některými možnostmi konfigurace.
Přidejte úryvek JavaScriptu do rozložení aplikace v rámci tagu <head> pomocí pomocníka phraseapp_in_context_editor_js:
```
<hlava>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Otevřete aplikaci v libovolném webovém prohlížeči a zobrazte Kontextový editor aplikovaný na aplikaci. přihlásit se s jakýmkoli uživatel organizace Phrase.
Zakázat turboodkazy (pokud jsou použity)

Turbolinks odstraní ze stránky všechny elementy rozhraní Kontextového editoru 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" : "" %>>
```

Vzorek kódu

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

Jaro

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Zkontrolujte, zda je v aplikaci k dispozici balíček com.phraseapp.incontexteditor.
Nastavte správné ID projektu a upravte ostatní parametry ve třídě PhraseAppConfiguration.class.

Chcete-li zobrazit všechny překlady prostřednictvím Phrase, Přidejte do aplikace fazoli:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    vrátit novou verzi PhraseAppMessageSource();

}

Zajistěte potřebného pomocníka pro JavaScript v šablonách tak, že ho vystavíte jako fazoli:

@Bean

public PhraseAppJavascriptFráze záhlavíAppJavascriptHeader() {

    vrátit novou verzi PhraseAppJavascriptHeader();

}

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

<hlava>

    <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

Spring Boot Starter balíček (poskytuje ePages)

Symfony 2.x

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Vytvořte nové prostředí, ve kterém bude Kontextový editor spuštěn. V příkladu se nové prostředí jmenuje překlad.

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

importy:

    - { zdroj: config.yml }

parametry:

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

Vytvořte řadič, který zpřístupní prohlížeč prostředí:

# web/app_translation.php

<?php

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

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

use Symfony\Component\HttpFoundation\Request;

$kernel = nový AppKernel('translation', false);

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

Přepsat standardní způsob překladu v objednávce vystavení názvů klíčů Kontextovému editoru:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

třída PhraseTranslator rozšiřuje BaseTranslator

{

    veřejná funkce trans($id, array $parametry = array(), $domain = 'messages', $locale = null)

    {

        $prefix = „“;

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'trasy') {

            // Vrátit přeložené hodnoty pro doménu 'routes'

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

        } other {

            // Vrátit překladové klíče PhraseApp pro všechny ostatní domény

            vrátit $prefix.$id.$suffix;

        }

    }

}

Přidejte fragment JavaScriptu do rozložení:

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

Otevřete aplikaci v libovolném webovém prohlížeči a zobrazte Kontextový editor aplikovaný na aplikaci. přihlásit se s jakýmkoli uživatel organizace Phrase.

Překladová dokumentace Symfony

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

Symfony 3.x

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

Vytvořte nové prostředí, ve kterém bude Kontextový editor spuštěn. V příkladu se nové prostředí jmenuje překlad.

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

importy:

   - { zdroj: config.yml }
```

Vytvořte řadič, který zpřístupní prohlížeč prostředí:

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

$loader = vyžadovat __DIR__.'/../app/autoload.php';

$kernel = nový AppKernel('translation', true);

$kernel->loadClassCache();

$request = Request::createFromGlobals();

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

$response->send();

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

Přepsat standardní způsob překladu v objednávce vystavení názvů klíčů Kontextovému editoru:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

třída PhraseTranslator rozšiřuje BaseTranslator

{

   veřejná funkce trans($id, array $parametry = array(), $domain = 'messages', $locale = null)

   {

       $prefix = „“;

       if (null === $domain) {

           $domain = 'zprávy';

       }

       // Zpětné ID překladového klíče s předponou a příponou pro PhraseApp

       vrátit $prefix.$id.$suffix;

   }

}

Ujistěte se, že třída je vždy přepsána při použití balíčku s pass kompilátoru:

# 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

{

   proces veřejné funkce (ContainerBuilder $container)

   {

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

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

   }

}

Pokud používáte samostatné průchody překladačem, zaregistrujte je v metodě build() třídy balíčku:

# src/AppBundle/AppBundle.php

<?php

jmenný prostor AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

class AppBundle rozšiřuje Bundle

{

   build veřejné funkce (ContainerBuilder $container)

   {

       Hlavní::build($container);

       if($container->getParameter("kernel.environment") == 'translation') {

           $container->addCompilerPass(new OverrideServiceCompilerPass());

       };

   }

}

Přidejte fragment JavaScriptu do rozložení:

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

Otevřete aplikaci v libovolném webovém prohlížeči a zobrazte Kontextový editor aplikovaný na aplikaci. přihlásit se s jakýmkoli uživatel organizace Phrase.

Překladová dokumentace Symfony

Vue I18n

Poznámka

Chcete-li nainstalovat Kontextový editor do tohoto prostředí, postupujte takto:

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

# příze
příze Přidat vue-i18n-Phrase-in-context-editor

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

nebo načtěte pomocí CDN (zaregistrujte ručně okno['vue-i18n-frase-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 (vzorek):

import Vue z 'vue';
import VueI18n z 'vue-i18n';

Vue.use(VueI18n);

konst i18n = nový VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'cs',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE | 'cs',
  zpráv: {
      Dobrý den: 'Ahoj světe!'
  }
});

nová hodnota ({
  i18n,
  render: h => h(aplikace)
}).$mount('#app');

Pro integraci knihovny:

Import knihovny Kontextového editoru Vue I18n Phrase.
Vytvořte novou instanci Kontextového editoru Vue I18n Phrase, kde jako první argument bude vybrána instance Vue I18n a jako druhý Phrase Config.

Možnosti konfigurace a vzorové metody.

Použití starého Kontextového editoru

Režim Ajax

Kontextový editor podporuje manipulaci s Ajaxem a DOM (tj. přes JavaScript) pomocí pozorovatelů mutací.

Režim Ajax může v některých případech způsobit problémy a může vést k závaž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 před snippet 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 snippet JavaScriptu následující konfigurační hodnotu:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Vynucení kódu jazyka

Chcete-li výslovně nastavit konkrétní kód jazyka při spouštění Kontextového editoru, použijte nastavení forceLocale. To je užitečné pro předvýběr kódu jazyka aktuálně zobrazeného ve webové aplikaci v Kontextovém editoru:

window.PHRASEAPP_CONFIG = {

  forceLocale: „pt-BR“

}

Ignorované klíče

Toto nastavení je k dispozici pouze při použití drahokamu Phraseapp-in-context-editor-Ruby.

Klíče lze vyloučit z vykreslování v Kontextovém editoru. Při práci s Rails mohou být klíče ignorovány u dat, jako jsou chybové zprávy nebo klíče formátu datum a čas. Chcete-li vyloučit automatickou manipulaci s klíči pomocí skvostu phraseapp-in-context-editor-ruby, Přidejte pole klíčů do inicializačního souboru phraseapp_in_context_editor.rb. Zástupné znaky lze použít také:

PhraseApp::InContextEditor.configure do |config|

  config.ignored_keys = ["date.*", "zakázáno.key", "errors.messages*"]

konec

Klíče odpovídající některému z těchto vzorů nebudou Kontextovému editoru zpřístupněny a budou normálně vykresleny.