In-Context Editor (Strings)

Instalace pomocí NPM:

npm install ngx-translate-phraseapp

Konfigurovat

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

ID projektu naleznete v nastavení projektu.

Ve výchozím nastavení převádí analyzátor dokumentů editoru všechny klíče na malá písmena. Pokud máte s tímto chováním problémy a chcete v editoru používat klíče rozlišující velká a malá písmena, vypněte funkci automatického převodu na malá písmena:

let config = {
  
  autoLowercase: false
}

Přidejte tyto úryvky do aplikace Angular:

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler} 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: {
        Uveďte: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Uveďte: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    
  
  providers: [],
  bootstrap: [AppComponent]
})

Nainstalujte angular-phrase pomocí Boweru (nebo stáhněte ručně):

$ bower install angular-phrase

Přidejte modul angular-phrase do stávající aplikace AngularJS po načtení modulu angular-translate:

var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);

Nakonfigurujte modul:

myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");

ID projektu naleznete v nastavení projektu. Tím se vytvoří inicializační soubor s některými možnostmi konfigurace.

Přidejte direktivu phrase-javascript do aplikace uvnitř značky <head>:

<phrase-javascript></phrase-javascript>

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte editor In-Context aplikovaný na danou aplikaci. Přihlaste se pomocí libovolného uživatele organizace Phrase.

Nainstalujte balíček django-phrase pomocí pip:

$ pip install django-phrase

Přidejte Phrase do seznamu nainstalovaných aplikací:

INSTALLED_APPS = (

    'phrase',

)

Použijte značku šablony phrase_i18n v šablonách:

{% load phrase_i18n %}

Aby django-phrase mohl přepsat překladové metody, načtěte phrase_i18n po i18n.

Přidejte úryvek JavaScriptu do rozvržení:

{% phrase_javascript %}

Nakonfigurujte editor v kontextu pro projekt pomocí těchto možností:

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

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte editor In-Context aplikovaný na danou aplikaci. Přihlaste se pomocí libovolného uživatele organizace Phrase.

Nainstalujte balíček přes NPM:

npm install react-intl-phraseapp

nebo sestavte ze zdrojového kódu:

npm run dist

npm install

Konfigurovat

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

ID projektu naleznete 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

Přidejte gem phraseapp-in-context-editor-ruby do prostředí, se kterým chcete editor In-Context používat:

group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end

a nainstalujte jej spuštěním příkazu bundle:

$ bundle install

Nainstalujte gem phraseapp-in-context-editor-ruby spuštěním generátoru Rails:

$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID

Přístupový token

Vytvářejte a spravujte přístupové tokeny v nastavení profilu nebo prostřednictvím rozhraní Authorizations API.

project.id

ID projektu konkrétního projektu naleznete v nastavení projektu. Tím se vytvoří inicializační soubor s některými možnostmi konfigurace.

Přidejte úryvek JavaScriptu do rozvržení vaší aplikace v rámci značky <head> pomocí pomocníka phraseapp_in_context_editor_js:

<head>
  
  <%= phraseapp_in_context_editor_js %>
  
</head>

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte editor In-Context aplikovaný na danou aplikaci. Přihlaste se pomocí libovolného uživatele organizace Phrase.

Zakažte Turbolinks (pokud je používáte)

Turbolinks při každém načtení stránky odstraní ze stránky všechny prvky uživatelského rozhraní editoru In-Context.

Přidejte atribut data-no-turbolink ke značce <body>:

<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>

Zajistěte, aby byl v aplikaci dostupný package com.phraseapp.incontexteditor.

Nastavte správné ID projektu a upravte ostatní parametry v PhraseAppConfiguration.class.

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

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

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

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

<head>

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

</head>

Restartujte aplikaci a přihlaste se pomocí uživatelských údajů Phrase.

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

Vytvořte nový konfigurační soubor:

# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

    translator.class: Acme\YourBundle\Translation\PhraseTranslator

Vytvořte kontroler, aby bylo prostředí prohlížeče 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 zpřístupnili 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 úryvek JavaScriptu do rozvržení:

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

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte editor In-Context aplikovaný na danou aplikaci. Přihlaste se pomocí libovolného uživatele organizace Phrase.

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

Vytvořte nový konfigurační soubor:

# app/config/config_translation.yml

imports:

   - { resource: config.yml }

Vytvořte kontroler, aby bylo prostředí prohlížeče 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 zpřístupnili 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;

   }

}

Zajistěte, aby byla třída vždy přepsána, když je balíček používán s compiler pass:

# src/AppBundle/DependencyInjection/Compiler/OverrideServiceCompilerPass.php

<?php

namespace AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

use Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   public function process(ContainerBuilder $container)

   {

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

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

   }

}

Pokud používáte samostatné compiler passy, 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 úryvek JavaScriptu do rozvržení:

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

Otevřete aplikaci v libovolném webovém prohlížeči a uvidíte editor In-Context aplikovaný na aplikaci. Přihlaste se pomocí libovolného uživatele organizace Phrase.

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

# yarn
yarn add vue-i18n-phrase-in-context-editor

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

nebo načtěte pomocí CDN (zaregistrujte ručně window['vue-i18n-phrase-in-context-editor'] ):

<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>

Bootstrap (ukázka):

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

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      "hello": { "hello" : "World",
  }
});

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

Pro integraci knihovny: