In-context Editor (Strings)

Instala con NPM:

npm install ngx-translate-phraseapp

Configurar

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

El ID de un proyecto se encuentra en la configuración.

Por defecto, el analizador de documentos del editor convierte todas las claves a minúsculas. Si experimentas problemas con este comportamiento y deseas usar claves que distingan entre mayúsculas y minúsculas en el editor, desactiva la función automática de minúsculas:

let config = {
  {
  autoLowercase: false
}

Añade estos fragmentos a la aplicación 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]
{

Instala angular-phrase a través de Bower (o descárgalo manualmente):

$ bower install angular-phrase

Agrega el módulo angular-phrase a tu aplicación AngularJS existente después de cargar el módulo angular-translate:

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

Configura el módulo:

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

myApp.value("phraseEnabled", true);

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

El ID de un proyecto se encuentra en la configuración. Esto crea un archivo de inicialización con algunas opciones de configuración.

Agrega la directiva phrase-javascript a tu aplicación dentro de la etiqueta <head>:

<phrase-javascript></phrase-javascript>

Abre la aplicación en cualquier navegador web para ver el editor en contexto aplicado a la aplicación. Inicia sesión con cualquier usuario de la organización Phrase.

Instala el paquete django-phrase con pip:

$ pip install django-phrase

Agrega Phrase a la lista de aplicaciones instaladas:

INSTALLED_APPS = (

    'phrase',

{

Usa la etiqueta de plantilla phrase_i18n en las plantillas:

{% load phrase_i18n %}

Para permitir que django-phrase anule los métodos de traducción, carga phrase_i18n después de i18n.

Agrega el fragmento de JavaScript al diseño:

{% phrase_javascript %}

Configura el editor en contexto para el proyecto con estas opciones:

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

Abre la aplicación en cualquier navegador web para ver el editor en contexto aplicado a la aplicación. Inicia sesión con cualquier usuario de la organización Phrase.

Instala el paquete a través de NPM:

npm install react-intl-phraseapp

O compila desde el código fuente:

npm run dist

npm install

Configurar

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

El ID de un proyecto se encuentra en la configuración.

Añade el fragmento a la aplicación de React:

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

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

initializePhraseAppEditor(config);

Busca todas las importaciones de FormattedMessage y cambia la fuente de react-intl a react-intl-phraseapp.

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

Ejecuta las pruebas unitarias usando jest:

npm test

Añade la gema phraseapp-in-context-editor-ruby al entorno con el que quieres utilizar el editor en contexto:

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

E instálala ejecutando el comando bundle:

$ bundle install

Instala la gema phraseapp-in-context-editor-ruby ejecutando el generador de Rails:

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

Token de acceso

Crea y gestiona tokens de acceso en la configuración del perfil o mediante la API de autorizaciones.

project.id

El ID de un proyecto se encuentra en la configuración. Esto crea un archivo de inicialización con algunas opciones de configuración.

Agrega el fragmento de JavaScript al diseño de tu aplicación dentro de la etiqueta <head> usando el helper phraseapp_in_context_editor_js:

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

Abra la aplicación en cualquier navegador web para ver el editor en contexto aplicado a la aplicación. Inicia sesión con cualquier usuario de la organización Phrase.

Desactiva Turbolinks (si se usa)

Turbolinks elimina todos los elementos de la interfaz del editor en contexto de la página en cada carga.

Agrega el atributo data-no-turbolink a la etiqueta <body>:

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

Asegúrate de que el paquete com.phraseapp.incontexteditor esté disponible en la aplicación.

Establece el ID de proyecto correcto y ajusta los demás parámetros en PhraseAppConfiguration.class.

Para renderizar todas las traducciones a través de Phrase, agrega el bean a la aplicación:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Proporciona el asistente de JavaScript requerido en las plantillas exponiendo el asistente como un bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Agrega la etiqueta <script> a tus plantillas dentro de la etiqueta <head> de cada página:

<head>

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

</head>

Reinicia la aplicación e inicia sesión con las credenciales de usuario de Phrase.

Crea un nuevo entorno en el que se ejecutará el editor In-Context. En el ejemplo, el nuevo entorno se llama translation.

Crea un nuevo archivo de configuración:

# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

    translator.class: Acme\YourBundle\Translation\PhraseTranslator

Crea un controlador para hacer que el entorno sea accesible desde el 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();

Sobrescribe el método de traducción estándar para exponer los nombres de las claves al 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;

        }

    }

}

Agrega el fragmento de JavaScript al diseño:

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

Abre la aplicación en cualquier navegador web para ver el editor en contexto aplicado a la aplicación. Inicia sesión con cualquier usuario de la organización Phrase.

Crea un nuevo entorno en el que se ejecutará el editor In-Context. En el ejemplo, el nuevo entorno se llama translation.

Crea un nuevo archivo de configuración:

# app/config/config_translation.yml

imports:

   - { resource: config.yml }

Crea un controlador para hacer que el entorno sea accesible desde el 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);

Sobrescribe el método de traducción estándar para exponer los nombres de las claves al 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;

   }

}

Asegúrate de que la clase siempre se sobrescriba cuando el paquete se utilice con un pase de compilador:

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

   }

}

Si utilizas pases de compilador independientes, regístralos en el método build() de la clase del paquete:

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

       };

   }

}

Agrega el fragmento de JavaScript al diseño:

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

Abre la aplicación en cualquier navegador web para ver el editor en contexto aplicado a la aplicación. Inicia sesión con cualquier usuario de la organización Phrase.

Instala el paquete con tu gestor de paquetes preferido:

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

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

o cárgalo con CDN (regístralo 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 (muestra):

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 la biblioteca: