In-context Editor (Strings)

El contenido se traduce automáticamente del inglés por Phrase Language AI.

Disponible para

Planes Team, Professional, Business, Enterprise y Software UI/UX

Ponte en contacto con Ventas para preguntas sobre licencias.

Disponible para

Plan Advanced y Enterprise (anteriores)

Ponte en contacto con Ventas para preguntas sobre licencias.

In-context Editor está diseñado para ayudar a los traductores a hacer las cosas de manera más eficiente y traducir una página web mediante integración directa con el editor de traducción Strings.

Actualmente hay dos versiones disponibles:

El In-context Editor:

Incluye nuevas funcionalidades (vista multilingüe, opciones de diseño, acciones por lotes, funciones de colaboración, etc.) y la interfaz de usuario del editor de traducción.
El antiguo In-context Editor.

Después de instalar el In-context Editor, se puede personalizar para trabajar con muchas tecnologías.

Instalación de In-context Editor de Strings

Requisitos

Para usar el In-context Editor, la aplicación requiere:

Páginas web, aplicaciones web, sitios móviles, etc.
Los traductores pueden acceder al servidor web que ejecuta el editor. Este podría ser un entorno local si se requiere.
Una estructura de archivos de localización valor-clave.

Sitios web con cadenas traducibles extraídas y una capa de vista que usa una estructura de valor-clave para mostrar traducciones.
Nombres clave expuestos a la capa de vista o plantilla.
Fragmento de JavaScript que renderiza el editor.
Idealmente, un entorno dedicado para las traducciones. Este puede ser un clon de un entorno de ensayo y, aunque requiere más trabajo de configuración inicial, proporciona un mejor flujo de trabajo y más estabilidad.

Si no es posible disponer de un entorno dedicado, se puede utilizar un entorno de ensayo existente con la opción de habilitar el Editor contextual según sea necesario.

JavaScript Snippet

Incluye el fragmento de JavaScript en el diseño de la aplicación.

El fragmento incluye el código necesario para:

Comunicarse con la API de Phrase Strings.
Renderizar la interfaz de usuario.
Proporcionar inicio de sesión.

Project ID se encuentra en la configuración del proyecto.

Account ID se encuentra en la configuración de la organización de Strings.

Muestra:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // No cambie este nombre para que la configuración funcione
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Establecer en 'us' para el centro de datos de EE. UU.
      prefix: '{{__', // Establecer en el prefijo para el formato de clave en las plantillas de vista
      suffix: '__}}', // Establecer en el sufijo para el formato de clave en las plantillas de vista
      disableShortcuts: false, // Establecer en true para deshabilitar los atajos de teclado
      autoLowercase: true, // Set to false if keys contain capital letters
    };
  </script>
  <script type="module" async="" src="https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js"></script>

Instalaciones de Framework Web

i18next

Nota

i18next Phrase In-Context Editor Post Processor admite todas las versiones i18next posteriores a la 19.5.1. Aunque esta biblioteca puede funcionar con versiones anteriores, no están oficialmente soportadas y pueden no recibir actualizaciones específicas o correcciones de errores.

Para instalar In-context Editor en este entorno, sigue estos pasos:

Instala la biblioteca i18next-phrase-in-context-editor-post-processor con el gestor de paquetes preferido:

# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor

Nota

Las versiones recomendadas de la biblioteca son 1.4.0 o más recientes.

o cargar a través de CDN:

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

Bootstrap (muestra):

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

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // cargar algunas traducciones del repositorio de i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // hacer algo en la inicialización de i18next
    });

Para integrar la biblioteca:

Importa PhraseInContextEditorPostProcessor de la biblioteca i18next-phrase-in-context-editor-post-processor.
Crea una nueva instancia de i18next Phrase In-Context Editor Post Processor, pasando PhraseConfig como argumento.
Pasa la nueva instancia i18next Phrase In-Context Editor Post Processor al método use de i18next.
Añade la cadena phraseInContextEditor a la propiedad de matriz postProcess (pasada dentro del objeto de configuración del método init de i18next).

Agrega el fragmento de JavaScript de ICE a la instancia de i18next al configurar.

Fragmento de muestra:

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

Nota

Se debe proporcionar accountId para configurar ICE correctamente. El ID de la cuenta se encuentra en la configuración de la organización de Strings.

Si es necesario, configura el atributo useOldICE para cambiar al antiguo ICE:

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

Inicia In-context Editor.
Abre la aplicación en un navegador web para mostrar In-context Editor. Inicia sesión con cualquier usuario de la organización Phrase.

Opciones de configuración y métodos de muestra.

Vue I18n

Nota

Vue I18n Phrase In-Context Editor soporta todas las versiones de Vue I18n 8.17.5 y posteriores. Esta biblioteca puede funcionar con versiones anteriores, pero no están oficialmente soportadas y no recibirán actualizaciones específicas ni correcciones de errores.

Para instalar In-context Editor en este entorno, sigue estos pasos:

Instala el paquete más reciente con el gestor de paquetes preferido:

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

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

o carga con CDN (registra 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: '¡Hola mundo!'
  }
});

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

Para integrar la biblioteca:

Importa la biblioteca Vue I18n Phrase In-Context Editor.
Crea una nueva instancia de Vue I18n Phrase In-Context Editor, pasando la instancia de Vue I18n como primer argumento y Phrase Config como segundo.

Opciones de configuración y métodos de muestra.

React (intl)

Nota

Esta biblioteca puede no funcionar con IE11 o navegadores más antiguos. Agrega Babel al pipeline de construcción si se requiere soporte para navegadores más antiguos.

Esta biblioteca hereda componentes comunes de los paquetes react-intl. Si Phrase está habilitado llamando a initializePhraseAppEditor, el comportamiento de los componentes cambiará.

Para instalar el editor In-context en este entorno, sigue estos pasos:

Instala el paquete más reciente a través de NPM:
```
npm install react-intl-phraseapp
```
o construir desde la fuente:
```
npm run dist
```
```
npm install
```
Configurar:
```
let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};
```
El ID del proyecto de un proyecto se encuentra en la configuración del proyecto.

El ID de la cuenta se encuentra en la configuración de la organización de Strings.

Agrega el fragmento a la aplicación 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);

Encuentra todas las importaciones de FormattedMessage, y cambia la fuente de react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Ejecuta pruebas unitarias usando jest:
```
npm test
```

Ejemplo de código

Esta demostración muestra una integración del editor In-Context de Phrase con react-intl.

Angular 2 (ngx-translate)

Requisitos previos

Regístrate para una cuenta de Phrase Strings.
Usa ngx-translate módulo para la localización en aplicaciones de Angular 2.

Para instalar el editor In-context en este entorno, sigue estos pasos:

Instala con NPM:
```
npm install ngx-translate-phraseapp
```

Configurar:

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

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

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

El ID de la cuenta se encuentra en la configuración de la organización de Strings.

Si es necesario, configura el atributo useOldICE para cambiar al antiguo ICE:

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

initializePhraseAppEditor(config);

Si es necesario, agrega las URL específicas de EE. UU. para habilitar el trabajo a través del centro de datos de EE. UU.:

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",

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 sensibles a mayúsculas dentro del editor, deshabilita la función automática de minúsculas:
```
let config = {
  // ...
  autoLowercase: false
}
```

Agrega estos fragmentos a la aplicación 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]
})

Ejemplo de código

Esta aplicación de demostración muestra una integración del editor In-Context con Angular y ngx-translate.

Ruby on Rails (i18n)

Nota

Esta biblioteca puede que no funcione de inmediato en navegadores más antiguos o en Microsoft IE11. Agrega Babel al pipeline de construcción si esos navegadores necesitan ser soportados.

Requisitos previos

Regístrate para una cuenta de Phrase Strings.
Usa la excelente i18n gema que también es utilizada por Rails.

Para instalar el editor In-context en este entorno, sigue estos pasos:

Agrega la phraseapp-in-context-editor-ruby biblioteca al entorno deseado utilizando uno de los siguientes métodos:
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- A través de Bundler
  
  Agrégalo al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Construye directamente desde la fuente para obtener lo último y lo mejor:
```
bundle && gem build
```
Crea el archivo inicializador ejecutando el generador de Rails:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
El ID del proyecto de un proyecto se encuentra en la configuración del proyecto.

El ID de la cuenta se encuentra en la configuración de la organización de Strings.
Agrega el fragmento de Ruby al diseño de la aplicación app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Agregue la siguiente configuración al inicializador /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"

Si es necesario, configure el centro de datos de EE. UU. para habilitar el trabajo con puntos finales de EE. UU.:

  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "us"

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

Ejemplo de código

Esta demo muestra una integración del editor In-Context de Phrase con react-i18next.

Django

Requisitos previos

Regístrate para una cuenta de Phrase Strings.
Utilice el Django marco para Python.

Nota

La versión antigua del ICE no está disponible desde la versión 2.0.0.

Para instalar el editor In-context en este entorno, sigue estos pasos:

Instale el django-phrase paquete con pip:
```
$ pip install django-phrase
```
Agregue Phrase a la lista de aplicaciones instaladas:
```
INSTALLED_APPS = (

    'phrase',

)
```
Agregue los siguientes fragmentos de plantilla al archivo de diseño templates/base_generic.html o equivalente:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Utilice el phrase_i18n etiqueta de plantilla en las plantillas (por ejemplo, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Agrega la siguiente configuración a settings.py:

    # Configuración del editor In-Context de Phrase
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Establece tu propio ID de cuenta
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Establece tu propio ID de proyecto
    PHRASE_DATACENTER = "eu"  # Elige tu centro de datos 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

El ID de la cuenta se encuentra en la configuración de la organización de Strings.

En caso de problemas, es posible integrar el fragmento de JavaScript manualmente.

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

código del adaptador de Django en GitHub

Ejemplo de código

Esta aplicación de demostración muestra cómo integrar el editor In-Context con una aplicación Django.

Flask

Requisitos previos

Regístrate para una cuenta de Phrase Strings.
Usa el framework Flask para Python.

Nota

La versión antigua del ICE no está disponible desde la versión 2.0.0.

Para instalar el editor In-context en este entorno, sigue estos pasos:

Instala el paquete Flask-Phrase con pip:
```
pip install Flask-Phrase
```

Agrega la siguiente configuración a la aplicación Flask (app.config o config.py):

PHRASEAPP_ENABLED = True
PHRASEAPP_PREFIX = '{{__'
PHRASEAPP_SUFFIX = '__}}'

El código de la aplicación debería verse similar a esto:

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)

Agrega la frase JavaScript snippet al archivo de diseño base con la siguiente etiqueta (debe ir dentro de la sección del archivo de plantilla):

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

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

El ID de la cuenta se encuentra en la configuración de la organización de Strings.

Si es necesario, configure el centro de datos de EE. UU. para habilitar el trabajo con puntos finales de EE. UU.:

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

Cuando PHRASEAPP_ENABLED = True, el paquete modifica los valores devueltos de las funciones de traducción para presentar un formato que el ICE puede leer. Cuando se establece en False, volverá a las funciones gettext estándar de Flask-Babel.

Ejemplo de código

Esta demo aplicación demuestra cómo integrar el editor In-Context con una aplicación Flask.

Symfony 5.x

Requisitos previos

Regístrate para una cuenta de Phrase Strings.
Usa el Symfony framework para PHP.

Nota

La versión 2.0.0 soporta Symfony 5 y superior. Si usas Symfony 2, 3 o 4, consulta la vieja versión del ICE.

Para integrar el editor In-Context con la aplicación Symfony, sigue estos pasos:

Copia PhraseStringsInContextEditor y su contenido en la carpeta /src/Service del repositorio o en la ubicación deseada. Si se coloca en otro lugar, ajusta el espacio de nombres en consecuencia.

Ajusta config/services.yaml para decorar el servicio traductor con el adaptador de Phrase:

servicios:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decora: traductor

Agrega el siguiente fragmento de JavaScript a la plantilla base o de Twig entre {% block javascripts %} para que el Editor In-Context pueda leer la página web:

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        datacenter: 'eu',
        origen: '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>

La aplicación Symfony ahora está conectada al Editor In-Context.

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

El ID de la cuenta se encuentra en la configuración de la organización de Strings.

Si es necesario, configure el centro de datos de EE. UU. para habilitar el trabajo con puntos finales de EE. UU.:

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

Recarga la aplicación e inicia sesión con las credenciales de Phrase para comenzar el proceso de traducción directamente en la página web.

Ejemplo de código

Esta demo aplicación demuestra cómo integrar el editor In-Context con una aplicación Symfony.

Configurando el Editor In-context

Exponiendo Nombres de Clave

Típicamente, una capa de vista renderiza traducciones pasando el nombre de una cadena traducible (es decir, la clave) a algún tipo de método de traducción o ayudante de vista.

Código PHP de muestra:

$translations = array(

  "page.headline" => "Some Headline",

  "page.link.label" => "I am a link",

  "page.link.hint" => "Click me"

)

function translate($keyName) {

  return $translations[$keyName];

}

La plantilla renderizaría la salida del método translate() en lugar de la cadena traducida real:

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

Formato

Debe indicarse en la plantilla qué claves renderizar para las traducciones.

Usa este formato para exponer los nombres de las claves en lugar de las traducciones:

{{__phrase_NameOfYourKey__}}

Ejemplo:

Si la clave page.headline está en la plantilla, renderiza la cadena {{__phrase_page.headline__}}.

Modifica el método auxiliar translate() para exponer los nombres de las claves en el formato requerido:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Dependiendo del marco, los ayudantes de traducción en el código pueden ser sobreescritos o se puede crear una versión envuelta para usar en las plantillas.

Ejemplo:

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

Escapando Nombres de Claves y Caracteres Especiales

Asegúrese de que los nombres de las claves se conviertan a un formato reconocible.

Los caracteres en la siguiente lista deben ser escapados cuando se expongan al In-Context Editor:

Carácter	Secuencia de escape	Ejemplo
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} se convierte en {{__phrase__key[[[[[[html_open]]]]]]__}}
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} se convierte en {{__phrase__[[[[[[html_close]]]]]]key__}}

Conversión automática de mayúsculas

Por defecto, el analizador de documentos del In-Context editor convierte todas las claves a minúsculas. Si experimenta problemas con este comportamiento y desea usar claves sensibles a mayúsculas dentro del In-Context Editor, deshabilite la función automática de minúsculas:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar decoradores de claves

Al usar el In-Context editor, los nombres de las claves suelen estar envueltos con decoradores (llaves, por defecto) para generar claves de identificación únicas dentro del contexto de un documento:

{{__phrase_YOUR.KEY__}}

Si esto causa conflictos con otras bibliotecas (por ejemplo, motores de plantillas del lado del cliente, incluyendo AngularJS y Ember.js) que utilizan una sintaxis similar, cambie el prefijo y sufijo de decorador del In-Context editor en la configuración. Para indicar al In-Context editor qué decoradores debe buscar el analizador, agregue los siguientes valores de configuración antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  prefijo: '[[__',

  sufijo: "__]]"

}

Esto le indica al editor que busque etiquetas que comiencen con [[__ y terminen con __]]:

[[__phrase_YOUR.KEY__]]

Si se utiliza la phraseapp-in-context-editor-ruby gem para proporcionar funcionalidad de editor en contexto, asegúrese de que los decoradores estén configurados:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Si no se utiliza la gem, asegúrese de que el patrón de exposición del nombre de la clave esté ajustado en el código personalizado.

Habilitando y deshabilitando el editor en contexto

Esta configuración solo está disponible cuando se utiliza la phraseapp-in-context-editor-ruby gem.

El editor en contexto está deshabilitado por defecto.

El editor en contexto puede ser habilitado o deshabilitado explícitamente. Esto afecta la inclusión del fragmento de JavaScript (cuando se utiliza el helper de vista) y la representación de los nombres de claves decoradas en las vistas:

PhraseApp::InContextEditor.enabled = true|false

Ejemplo de vinculación de la marca a una variable de entorno:

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

Reanálisis completo

Habilitar fullReparse si se utiliza el editor en contexto con un marco de JavaScript que utiliza Virtual DOM como React. Esto permite un reanálisis adecuado cuando se detectan cambios en el DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizar salida a la página web

El In-Context editor se puede configurar para escapar o alterar traducciones antes de que se inserten en la página web proporcionando una función a la propiedad sanitize.

La función acepta la cadena de traducción como el primer argumento y debe devolver una cadena:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Autenticación de un solo paso

Si se utiliza autenticación de un solo paso y se desea inicializar el In-Context editor con SSO habilitado, agregue el siguiente valor de configuración antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Para requerir que los usuarios inicien sesión usando SSO, establezca el parámetro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Antiguo In-Context Editor: Configuración

Instalaciones de Framework Web

Angular 2 (ngx-translate)

Para instalar el In-Context editor en este entorno, sigue estos pasos:

Instalar con NPM:
```
npm install ngx-translate-phraseapp
```

Configurar:

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

El ID del proyecto se encuentra en la configuración del proyecto.

Por defecto, el analizador de documentos del editor convierte todas las claves a minúsculas. Si experimenta problemas con este comportamiento y desea usar claves sensibles a mayúsculas y minúsculas dentro del editor, desactive la función de minúsculas automática:
```
let config = {
  // ...
  autoLowercase: false
}
```

Agregue 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]
})

Ejemplo de código

Esta aplicación de demostración muestra una integración del editor In-Context con Angular y ngx-translate.

AngularJS (angular-translate)

Para instalar el In-Context editor en este entorno, sigue estos pasos:

Instalar angular-phrase a través de Bower (o descargar manualmente):
```
$ bower install angular-phrase
```
Agrega el módulo angular-phrase a la 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 del proyecto se encuentra en la configuración del proyecto. Esto crea un archivo de inicialización con algunas opciones de configuración.
Agrega la directiva phrase-javascript a la aplicación dentro de la etiqueta <head>:
```
<phrase-javascript></phrase-javascript>
```
Abre la aplicación en cualquier navegador web para ver el editor In-Context aplicado a la app. Inicia sesión con cualquier usuario de la organización Phrase.

angular-phrase en GitHub

Ejemplo de código

Esta aplicación demo para angular-phrase muestra cómo localizar AngularJS con angular-translate.

Django

Para instalar el In-Context editor en este entorno, sigue estos pasos:

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 In-Context aplicado a la app. Inicia sesión con cualquier usuario de la organización Phrase.

Código del adaptador de Django en GitHub

Ejemplo de código

Esta aplicación de demostración demuestra cómo integrar el editor en contexto con una aplicación Django.

React (intl)

Nota

Esta biblioteca puede no funcionar con IE11 o navegadores más antiguos. Agrega Babel al pipeline de construcción si se requiere soporte para navegadores más antiguos.

Esta biblioteca hereda componentes comunes de los paquetes react-intl. Si Phrase está habilitado llamando a initializePhraseAppEditor, el comportamiento de los componentes cambiará.

Para instalar el In-Context editor en este entorno, sigue estos pasos:

Instala el paquete a través de NPM:
```
npm install react-intl-phraseapp
```
o compila desde la fuente:
```
npm run dist
```
```
npm install
```

Configurar:

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

El ID del proyecto se encuentra en la configuración del proyecto.

Agrega el fragmento a la aplicación react:

importar {initializePhraseAppEditor} de 'react-intl-phraseapp'

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

initializePhraseAppEditor(config);

Encuentra todas las importaciones de FormattedMessage, y cambia la fuente de react-intl a react-intl-phraseapp.
```
importar {FormattedMessage} de 'react-intl-phraseapp'
```
Ejecuta pruebas unitarias usando jest:
```
npm test
```

Ejemplo de código

Esta demo muestra una integración del editor In-Context de Phrase con react-intl.

Ruby on Rails (i18n)

Para instalar el In-Context editor en este entorno, sigue estos pasos:

Agrega la phraseapp-in-context-editor-ruby gema al entorno que deseas usar con el Editor In-Context:
```
grupo :development do
  gem 'phraseapp-in-context-editor-ruby'
 fin
```
e instálalo ejecutando el comando de bundle:
```
$ bundle install
```
Instala la phraseapp-in-context-editor-ruby gema ejecutando el generador de Rails:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

Crea y gestiona tokens de acceso en la configuración del perfil o a través de la API de Autorizaciones.

--project-id

El ID del proyecto se encuentra en la configuración del proyecto. Esto crea un archivo de inicialización con algunas opciones de configuración.
Agrega el fragmento de JavaScript a la disposición de tu aplicación dentro de la etiqueta <head> usando el helper phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Abre la aplicación en cualquier navegador web para ver el editor In-Context aplicado a la app. Inicia sesión con cualquier usuario de la organización Phrase.
Deshabilitar Turbolinks (si se utiliza)

Turbolinks elimina todos los elementos de la interfaz de usuario del Editor In-Context de la página en cada carga de página.

Agrega el atributo data-no-turbolink al tag <body>:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Ejemplo de código

Esta demo muestra una integración del editor In-Context de Phrase con react-i18next.

Primavera

Para instalar el In-Context editor en este entorno, sigue estos pasos:

Asegúrate de que el paquete com.phraseapp.incontexteditor esté disponible en la aplicación.
Establece el ID de proyecto correcto y ajusta los otros 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 helper de JavaScript requerido en las plantillas exponiendo el helper como un bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Agrega el tag <script> a tus plantillas dentro del tag <head> de cada página:

<head>

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

</head>

Reinicie la aplicación e inicie sesión con las credenciales de usuario de Phrase.

Ejemplo de código fuente de la aplicación en GitHub

Cómo localizar aplicaciones de Spring como un profesional

Paquete inicial de Spring Boot (proporcionado por ePages)

Symfony 2.x

Para instalar el In-Context editor en este entorno, sigue estos pasos:

Cree un nuevo entorno en el que se ejecutará el editor en contexto. En el ejemplo, el nuevo entorno se llama traducción.

Cree un nuevo archivo de configuración:
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

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

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

            // Devuelve los valores traducidos para el dominio 'routes'

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

        } else {

            // Devuelve las claves de traducción de PhraseApp para todos los demás dominios

            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 In-Context aplicado a la app. Inicia sesión con cualquier usuario de la organización Phrase.

Documentación de Symfony Translation

Código del adaptador Symfony 2.x en GitHub

Symfony 3.x

Para instalar el In-Context editor en este entorno, sigue estos pasos:

Cree un nuevo entorno en el que se ejecutará el editor en contexto. En el ejemplo, el nuevo entorno se llama traducción.

Cree un nuevo archivo de configuración:
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

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

       }

       // Devolver ID de la clave de traducción con prefijo y sufijo para PhraseApp

       return $prefix.$id.$suffix;

   }

}

Asegúrese de que la clase siempre se sobrescriba cuando el paquete se utilice con un paso del 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 utiliza compiladores separados, regístrelos 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 In-Context aplicado a la app. Inicia sesión con cualquier usuario de la organización Phrase.

Documentación de Symfony Translation

Vue I18n

Nota

Para instalar In-context Editor en este entorno, sigue estos pasos:

Instala el paquete con el gestor de paquetes preferido:

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

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

o cargar con CDN (registrar 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: '¡Hola mundo!'
  }
});

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

Para integrar la biblioteca:

Importa la Vue I18n Phrase In-Context Editor biblioteca.
Crea una nueva Vue I18n Phrase In-Context Editor instancia, pasando Vue I18n como primer argumento y Phrase Config como segundo.

Opciones de configuración y métodos de muestra.

Usando el antiguo In-context Editor

Modo Ajax

El In-Context Editor soporta Ajax y manipulación del DOM (es decir, a través de JavaScript) utilizando observadores de mutación.

El modo Ajax puede causar problemas en algunos casos y puede resultar en problemas de rendimiento severos al usar el In-Context editor. Para deshabilitar el modo Ajax, agrega el siguiente valor de configuración antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modo de depuración

Para habilitar el modo de depuración, agrega el siguiente valor de configuración antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forzar una localización

Para establecer una localización específica de manera explícita al iniciar el In-Context editor, usa la configuración forceLocale. Esto es útil para preseleccionar la localización que se muestra actualmente en tu aplicación web en el In-Context editor también:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Claves ignoradas

Esta configuración solo está disponible al usar la gema phraseapp-in-context-editor-ruby.

Las claves pueden ser excluidas de ser renderizadas con el In-Context editor. Al trabajar con Rails, las claves pueden ser ignoradas para datos como mensajes de error o claves de formato de fecha y hora. Para excluir claves de ser manejadas automáticamente por la gema phraseapp-in-context-editor-ruby, agrega un array de las claves al archivo de inicialización phraseapp_in_context_editor.rb. También se pueden usar comodines:

PhraseApp::InContextEditor.configure do |config|

  config.ignored_keys = ["date.*", "forbidden.key",   "errors.messages*"]

fin

Las claves que coincidan con cualquiera de estos patrones no estarán disponibles para el editor en contexto y se mostrarán normalmente.