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 el equipo de ventas para preguntar por nuestros planes.

Disponible para

Plan Advanced y Enterprise (anteriores)

Ponte en contacto con Ventas para preguntas sobre licencias.

In-context Editor tiene por objeto ayudar al equipo de traducción a hacer las cosas con mayor eficacia y traducir una página web mediante integración directa con el editor de traducción Strings.

Actualmente hay dos versiones disponibles:

In-context Editor:

Incluye nuevas funcionalidades (vista multilingüe, opciones de diseño, acciones por lotes, funciones de colaboración, etc.) e interfaz de usuario en el editor de traducción.
Antiguo In-context Editor:

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

Instalación de In-context Editor de Strings

Requisitos

Para usar 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 puedeclonarse 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.

Fragmento de JavaScript

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.

Ejemplo:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Set to 'us' for US data center
      prefix: '{{__', // Set to the prefix for the key format in the view templates
      suffix: '__}}', // Set to the suffix for the key format in the view templates
      disableShortcuts: false, // Set to true to disable keyboard shortcuts
      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 marcos web

i18next

Nota

i18next Phrase In-Context Editor Post Processo admite todas las versiones i18next anteriores a la 19.5.1. Aunque esta biblioteca podría funcionar con versiones anteriores también, no son compatibles oficialmente y podrían 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 la 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: {
            // load some translations from i18next-gitbook repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // do something on i18next initialization
    });

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 i18nex.
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 que cambie a 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 admite todas las versiones de Vue I18n 8.17.5 y posteriores. Esta biblioteca puede funcionar con versiones anteriores, pero no son compatibles oficialmente y no recibirán actualizaciones específicas ni correcciones de errores.

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

Instale 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 cargue con 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 (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:

importar la biblioteca Vue I18n Phrase In-context Editor.
crear 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

Es posible que esta biblioteca no funcione con IE11 o navegadores más antiguos. agregar Babel a la canalización de compilació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 va a cambiar.

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

Instale el paquete más reciente a través de NPM:
```
npm install react-intl-phraseapp
```
o compilar desde 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.

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

Encontrar todas las importaciones de FormattedMessage y cambiar la fuente de react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Ejecutar pruebas unitarias usando jest:
```
npm test
```

Ejemplo de código

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

Angular 2 (ngx-translate)

Requisitos previos

regístrate para obtener una cuenta de Phrase Strings.
Usar el módulo ngx-translate para la localización en aplicaciones Angular 2.

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

Instalar 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 que cambie a antiguo ICE:

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

initializePhraseAppEditor(config);

Si es necesario, agregar 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",

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

Agregar 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 In-context Editor con Angular y ngx-translate.

Ruby on Rails (i18n)

Nota

Es posible que esta biblioteca no trabajo de forma inmediata para navegadores antiguos o Microsoft IE11. Agregar Babel a la canalización de compilación si es necesario admitir esos navegadores.

Requisitos previos

regístrate para obtener una cuenta de Phrase Strings.
Usar la excelente gema i18n que también usa Rails.

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

Agregar la biblioteca phraseapp-in-context-editor-ruby al entorno deseado usando uno de los siguientes métodos:
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Vía Bundler
  
  Agregarla al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Compilar directamente desde la fuente para obtener lo último y mejor:
```
bundle && gem build
```
Crear el archivo de inicialización 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.
Agregar el fragmento de Ruby al diseño de la aplicación app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

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

Abrir la aplicación en cualquier navegador web para ver el In-context Editor 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 de Phrase In-context Editor con react-i18next.

Django

Requisitos previos

regístrate para obtener una cuenta de Phrase Strings.
Usar el marco de trabajo Django para Python.

Nota

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

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

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

    'phrase',

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

Agregar la siguiente configuración a settings.py:

    # Phrase In-Context Editor settings
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Set your own account id
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Set your own project id
    PHRASE_DATACENTER = "eu"  # Choose your datacenter '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 JavaScript snippet manualmente.

Abrir la aplicación en cualquier navegador web para ver el In-context Editor 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 demo aplicación demuestra cómo integrar el In-context Editor con una aplicación Django.

Flask

Requisitos previos

regístrate para obtener una cuenta de Phrase Strings.
Usar el framework Flask para Python.

Nota

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

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

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

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

Agregar el JavaScript snippet de Phrase 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, configurar 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 por las funciones de traducción para presentar un formato que el In-context Editor pueda leer. Cuando se establece en False, volverá a las funciones gettext estándar de Flask-Babel's.

Ejemplo de código

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

Symfony 5.X

Requisitos previos

regístrate para obtener una cuenta de Phrase Strings.
Usar el framework Symfony para PHP.

Nota

La versión 2.0.0 es compatible con Symfony 5 y superior. Si usa Symfony 2, 3 o 4, consulte la old version del ICE.

Para integrar el In-context Editor con la aplicación Symfony, siga estos pasos:

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

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

services:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator

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

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

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, configurar 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",
};

Recargue la aplicación e inicie 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 aplicación demo demuestra cómo integrar el In-context Editor con una aplicación Symfony.

Configuración del In-context Editor

Exposición de nombres de clave

Normalmente, 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 asistente de vista.

Código PHP de ejemplo:

$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 entonces la salida del método translate() en lugar de la cadena traducida real:

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

Formato

Se debe indicar en la plantilla para qué claves renderizar las traducciones.

Use este formato para exponer los nombres de clave en lugar de las traducciones:

{{__phrase_NameOfYourKey__}}

Ejemplo:

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

Modifique el método auxiliar translate() para exponer los nombres de clave en el formato requerido:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Dependiendo del framework, los asistentes de traducción en el código pueden ser sobrescritos o se puede crear una versión envuelta para usar en plantillas.

Ejemplo:

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

Escapar nombres de clave y caracteres especiales

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

Los caracteres de la siguiente lista deben escaparse cuando se exponen al In-context Editor:

Carácter	Secuencia de escape	Example
<	`[[[[[[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 y minúsculas

De forma predeterminada, el analizador de documento del In-context Editor convierte todas las clave a minúsculas. Si experimenta problemas con este comportamiento y desea usar clave que distinguen entre mayúsculas y minúsculas dentro del In-context Editor, deshabilite la función de minúsculas automática:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar decoradores de clave

Al usar el In-context Editor, los nombres de clave suelen estar envueltos con decoradores (llaves, de forma predeterminada) para generar clave de identificación únicas dentro del contexto de un documento:

{{__phrase_YOUR.KEY__}}

Si esto causa conflictos con otras libraries (por ejemplo, motores de plantilla del cliente, incluidos AngularJS y Ember.js) que usan una sintaxis similar, cambie el prefijo y sufijo de decorador del In-context Editor en la configurar. Para indicar al In-context Editor qué decoradores debe buscar el analizador, agregue los siguientes valores de configurar antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

Si usa la phraseapp-in-context-editor-ruby gem para proporcionar la funcionalidad del In-context Editor, asegúrese de que los decoradores estén configurados:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Si no usa la gem, asegúrese de que el patrón de exposición del nombre de clave se ajuste en el código Personalizar.

Habilitar y deshabilitar el In-context Editor

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

El In-context Editor está deshabilitado de forma predeterminada.

El In-context Editor se puede habilitar o deshabilitar explícitamente. Esto afecta la inclusión del fragmento de JavaScript (al usar el asistente de vista) y la representación de los nombres de clave decorados en las vistas:

PhraseApp::InContextEditor.enabled = true|false

Ejemplo de cómo marcar la clave a una variable de entorno:

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

Reprocesamiento completo

Habilitar fullReparse si usa el In-context Editor con un marco de trabajo 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 las 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 primer argumento y debe devolver una cadena:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Autenticación de un solo paso

Si usa autenticación de un solo paso y desea inicializar el In-context Editor con SSO habilitado, agregar 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, configurar el parámetro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Antiguo In-context Editor: configurar

Instalaciones de marcos web

Angular 2 (ngx-translate)

Para instalar 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.

De forma predeterminada, el editor de documentos convierte todas las claves a minúsculas. Si experimenta problemas con este comportamiento y desea usar claves que distingan entre mayúsculas y minúsculas dentro del editor, deshabilite la función de minúsculas automática:
```
let config = {
  // ...
  autoLowercase: false
}
```

Agregar 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 In-context Editor con Angular y ngx-translate.

AngularJS (angular-translate)

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

Instale angular-phrase a través de Bower (o descargar manualmente):
```
$ bower install angular-phrase
```
Agregar 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']);
```
Configure 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.
Agregar la directiva phrase-javascript a la aplicación dentro de la etiqueta <head>:
```
<phrase-javascript></phrase-javascript>
```
Abra la aplicación en cualquier navegador web para ver el In-context Editor aplicado a la aplicación. Inicia sesión con cualquier usuario de la organización Phrase.

angular-phrase en GitHub

Ejemplo de código

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

Django

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

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

    'phrase',

)
```
Usar la etiqueta de plantilla phrase_i18n en plantillas:
```
{% load phrase_i18n %}
```
Para permitir que django-phrase anule los métodos de traducción, cargue phrase_i18n después de i18n.
Agregar el fragmento de JavaScript al diseño:
```
{% phrase_javascript %}
```

Configure el In-context Editor para el proyecto con estas opciones:

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

Abra la aplicación en cualquier navegador web para ver el In-context Editor 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 demo de aplicación demuestra cómo integrar el In-context Editor con una aplicación de Django.

React (intl)

Nota

Es posible que esta biblioteca no trabajo con IE11 o navegadores más antiguos. Agregar Babel a la canalización de compilació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 In-context Editor en este entorno, sigue estos pasos:

Instalar el paquete a través de NPM:
```
npm install react-intl-phraseapp
```
o compilar 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.

Agregar el fragmento a la aplicación react:

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

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

initializePhraseAppEditor(config);

Buscar todas las importaciones de FormattedMessage y cambiar la fuente de react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Ejecutar pruebas unitarias usando jest:
```
npm test
```

Ejemplo de código

Esta demo muestra una integración de Phrase In-context Editor con react-intl.

Ruby on Rails (i18n)

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

Agregar la gema phraseapp-in-context-editor-ruby al entorno con el que desea usar el In-context Editor:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e instalarla ejecutando el comando bundle:
```
$ bundle install
```
Instalar 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
```
--access-token

Crear y administrar identificadores únicos (token) 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.
Agregar el fragmento de JavaScript al diseño de su aplicación dentro de la etiqueta <head> usando el asistente phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Abra la aplicación en cualquier navegador web para ver el In-context Editor aplicado a la aplicación. Inicia sesión con cualquier usuario de la organización Phrase.
Deshabilitar Turbolinks (si se usa)

Turbolinks elimina todos los elementos de la interfaz de usuario del In-context Editor de la página en cada recuperación de página.

Agregar el atributo data-no-turbolink a la etiqueta <body><2>:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Ejemplo de código

Esta demo muestra una integración de Phrase In-context Editor con react-i18next.

Spring

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

Asegurarse de que el package com.phraseapp.incontexteditor esté disponible en la aplicación.
Establecer el ID de proyecto correcto y ajustar los otros parámetros en PhraseAppConfiguration.class.

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Proporcionar el helper de JavaScript requerido en las plantillas exponiendo el helper como un bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Agregar la etiqueta <script> a sus plantillas dentro de la etiqueta <head> de cada página:

<head>

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

</head>

Reiniciar la aplicación e iniciar sesión con las credenciales de usuario de Phrase.

Código fuente de la aplicación de ejemplo en GitHub

Cómo localizar aplicaciones Spring como un profesional

Paquete Starter de Spring Boot (proporcionado por ePages)

Symfony 2.X

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

Crear un nuevo entorno en el que se ejecutará el In-context Editor. En el ejemplo, el nuevo entorno se llama translation.

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

imports:

    - { resource: config.yml }

parameters:

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

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

Reemplazar el método de traducción estándar para exponer los nombres de clave al In-context Editor:

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

        }

    }

}

Agregar el fragmento de JavaScript al diseño:

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

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

Documentación de traducción de Symfony

Código del adaptador de Symfony 2.X en GitHub

Symfony 3.X

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

Crear un nuevo entorno en el que se ejecutará el In-context Editor. En el ejemplo, el nuevo entorno se llama translation.

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

imports:

   - { resource: config.yml }
```

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

Reemplazar el método de traducción estándar para exponer los nombres de clave al In-context Editor:

# 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úrese 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 utiliza pases de compilador 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());

       };

   }

}

Agregar el fragmento de JavaScript al diseño:

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

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

Documentación de traducción de Symfony

Vue I18n

Nota

Vue I18n Phrase In-context Editor es compatible con todas las versiones de Vue I18n 8.17.5 y posteriores. Esta biblioteca puede trabajo con versiones anteriores, pero no son compatibles oficialmente y no recibirán actualizaciones específicas ni correcciones de errores.

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

Instalar 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: 'Hello world!'
  }
});

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

Para integrar la biblioteca:

importar la biblioteca Vue I18n Phrase In-context Editor.
Crear 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.

Uso del antiguo In-context Editor

Modo Ajax

El In-context Editor admite Ajax y la manipulación del DOM (es decir, mediante JavaScript) utilizando observadores de mutación.

El modo Ajax puede causar problemas en algunos casos y puede provocar graves problemas de rendimiento al utilizar el In-context Editor. Para deshabilitar el modo Ajax, agregar 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, agregar 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 explícitamente al iniciar el In-context Editor, usar el ajuste forceLocale. Esto es útil para preseleccionar la localización que se muestra actualmente en su aplicación web en el In-context Editor también:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Claves ignoradas

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

Las claves pueden Excluirse de la renderización con el In-context Editor. Al trabajar con Rails, las claves pueden ignorarse para datos como mensajes de error o claves de formato de fecha y hora. Para Excluir claves de ser manejadas automáticamente por la phraseapp-in-context-editor-ruby gema, agregar una matriz de las claves al archivo de inicialización phraseapp_in_context_editor.rb. También se pueden utilizar comodines:

PhraseApp::InContextEditor.configure do |config|

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

end

Las claves que coincidan con cualquiera de estos patrones no serán accesibles para el In-context Editor y se renderizarán normalmente.