Editor In-Context (Strings)

Instale com NPM:

npm install ngx-translate-phraseapp

Configurar

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

A ID de um projeto é encontrada nas configurações do projeto.

Por padrão, o analisador de documentos do editor converte todas as chaves para minúsculas. Se estiver enfrentando problemas com esse comportamento e quiser usar chaves que diferenciam maiúsculas de minúsculas dentro do editor, desative o recurso de minúsculas automático:

let config = {
  {
  autoLowercase: false
}

Adicione estes snippets ao aplicativo 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: {
        Forneça: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Forneça: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    {
  {
  providers: [],
  bootstrap: [AppComponent]
})

Instale o angular-phrase via Bower (ou baixe manualmente):

$ bower install angular-phrase

Adicione o módulo angular-phrase à aplicação AngularJS existente após carregar o módulo angular-translate:

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

Configure o módulo:

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

myApp.value("phraseEnabled", true);

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

A ID de um projeto é encontrada nas configurações do projeto. Isso cria um arquivo de inicialização com algumas opções de configuração.

Adicione a diretiva phrase-javascript à aplicação dentro da tag <head>:

<phrase-javascript></phrase-javascript>

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao aplicativo. Faça login com qualquer usuário da organização Phrase.

Instale o pacote django-phrase com pip:

$ pip install django-phrase

Adicione o Phrase à lista de aplicativos instalados:

INSTALLED_APPS = (

    'phrase',

)

Use a tag de template phrase_i18n nos templates:

{% load phrase_i18n %}

Para permitir que o django-phrase substitua métodos de tradução, carregue phrase_i18n após i18n.

Adicione o snippet JavaScript ao layout:

{% phrase_javascript %}

Configure o Editor In-Context para o projeto com estas opções:

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

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao aplicativo. Faça login com qualquer usuário da organização Phrase.

Instale o pacote via NPM:

npm install react-intl-phraseapp

ou compile a partir do código-fonte:

npm run dist

npm install

Configurar

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

A ID de um projeto é encontrada nas configurações do projeto.

Adicione o snippet ao aplicativo react:

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

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

initializePhraseAppEditor(config);

Encontre todas as importações de FormattedMessage e altere a origem de react-intl para react-intl-phraseapp.

import {FormattedMessage} from 'react-intl-phraseapp'

Execute testes unitários usando jest:

npm test

Adicione a gem phraseapp-in-context-editor-ruby ao ambiente com o qual você deseja usar o Editor In-Context:

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

e instale-a executando o comando bundle:

$ bundle install

Instale a gem phraseapp-in-context-editor-ruby executando o gerador do Rails:

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

Token de acesso

Crie e gerencie tokens de acesso nas configurações de perfil ou pela API de Autorizações.

project.id

A ID de um projeto é encontrada nas configurações do projeto. Isso cria um arquivo de inicialização com algumas opções de configuração.

Adicione o snippet JavaScript ao layout do seu aplicativo dentro da tag <head> usando o helper phraseapp_in_context_editor_js:

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

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao aplicativo. Faça login com qualquer usuário da organização Phrase.

Desative o Turbolinks (se utilizado)

O Turbolinks remove todos os elementos da interface do Editor In-Context da página a cada carregamento de página.

Adicione o atributo data-no-turbolink à tag <body>:

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

Certifique-se de que o package com.phraseapp.incontexteditor esteja disponível no aplicativo.

Defina o ID de projeto correto e ajuste os outros parâmetros em PhraseAppConfiguration.class.

Para renderizar todas as traduções através do Phrase, adicione o bean ao aplicativo:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Forneça o helper JavaScript necessário nos templates expondo o helper como um bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Adicione a tag <script> aos seus templates dentro da tag <head> de cada página:

<head>

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

</head>

Reinicie o aplicativo e faça login com as credenciais de usuário do Phrase.

Crie um novo ambiente no qual o editor In-Context será executado. No exemplo, o novo ambiente é chamado de translation.

Crie um novo arquivo de configuração:

# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

    translator.class: Acme\YourBundle\Translation\PhraseTranslator

Crie um controlador para tornar o ambiente acessível pelo navegador:

# 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();

Substitua o método de tradução padrão para expor os nomes das chaves ao editor 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;

        }

    }

}

Adicione o snippet JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao aplicativo. Faça login com qualquer usuário da organização Phrase.

Crie um novo ambiente no qual o editor In-Context será executado. No exemplo, o novo ambiente é chamado de translation.

Crie um novo arquivo de configuração:

# app/config/config_translation.yml

imports:

   - { resource: config.yml }

Crie um controlador para tornar o ambiente acessível pelo navegador:

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

Substitua o método de tradução padrão para expor os nomes das chaves ao editor 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;

   }

}

Certifique-se de que a classe seja sempre substituída quando o pacote for usado com um 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');

   }

}

Se estiver usando compiler passes separados, registre-os no método build() da classe do pacote:

# 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());

       {

   }

}

Adicione o snippet JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao aplicativo. Faça login com qualquer usuário da organização Phrase.

Instale o pacote com o gerenciador de pacotes de sua preferência:

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

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

ou carregue com CDN (registre manualmente 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 (exemplo):

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

Para integrar a biblioteca: