In-context Editor (Strings)

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

Disponible para

los 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 Framework 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 cuentan con soporte oficial y es posible que no reciban actualizaciones específicas ni 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

El In-context Editor de Phrase para Vue I18n es compatible con todas las versiones de Vue I18n 8.17.5 y posteriores. Esta biblioteca puede funcionar con versiones anteriores, pero no cuentan con soporte oficial 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 su gestor de paquetes preferido:

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

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

o cárguelo con CDN (regístrelo 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 In-context Editor de Phrase para Vue I18n.
Crear una nueva instancia de In-context Editor de Phrase para Vue I18n, pasando la instancia de Vue I18n como primer argumento y Configuración de Phrase 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 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 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 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);

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 demostración muestra una integración del In-context Editor de Phrase con react-intl.

Angular 2 (ngx-translate)

Requisitos previos

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

Registrarse 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 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 endpoints 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 del In-context Editor de Phrase con react-i18next.

Django

Requisitos previos

Registrarse para una cuenta de Phrase Strings.
Usar el framework 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 las siguientes plantillas de fragmentos al archivo de diseño templates/base_generic.html o equivalente:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Usar la etiqueta de plantilla phrase_i18n en 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

Registrarse para 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:

Instale 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 fragmento de JavaScript 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 endpoints 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 ICE puede 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

Registrarse para 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 versión antigua 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/Service 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

Agregar 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 está ahora 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 endpoints de EE. UU.:

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

Recargar la aplicación e iniciar 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 claves

Normalmente, una capa de vista renderiza las 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 mostrarí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 se deben mostrar las traducciones.

Usar 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, mostrar la cadena {{__phrase_page.headline__}}.

Modificar 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 framework, los asistentes de traducción en el código pueden ser reemplazados o se puede crear una versión envuelta para usar en las plantillas.

Ejemplo:

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

Escapar nombres de claves y caracteres especiales

Asegurarse 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 y minúsculas

De forma predeterminada, 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 que distinguen entre mayúsculas y minúsculas dentro del In-context Editor, deshabilite la función automática de minúsculas:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar decoradores de clave

Al usar el In-context Editor, los nombres de las claves normalmente se envuelven con decoradores (llaves, de forma predeterminada) 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 plantilla del lado del cliente, incluidos AngularJS y Ember.js) que usan una sintaxis similar, cambie el prefijo y sufijo del 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 = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

Si usa la gema phraseapp-in-context-editor-ruby 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 gema, asegúrese de que el patrón de exposición del nombre de la 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 gema phraseapp-in-context-editor-ruby.

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

El In-context Editor puede habilitarse o deshabilitarse 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 variable de entorno:

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

Repetición de análisis completa

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 correcto cuando se detectan cambios en el DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Ocultar elementos del In-context Editor

Las clases enumeradas en la opción hidingClasses se tratan como ocultas y son excluidas por el escáner del In-context Editor. Para que los elementos con una clase determinada sean escaneables, elimine ese nombre de clase de la matriz hidingClasses en lugar de agregarlo. Agregar un nombre de clase a la matriz excluye los elementos coincidentes y oculta el botón de editar; eliminar un nombre de clase de la matriz incluye los elementos coincidentes y muestra el botón de editar.

La opción hidingClasses realiza una comprobación estática de presencia de clase en un elemento y sus ancestros. No evalúa la visibilidad calculada o adaptativa. Un elemento que utiliza una clase de utilidad adaptativa que coincide con una entrada en hidingClasses (por ejemplo, una clase llamada "hidden" combinada con una clase de visibilidad específica de punto de interrupción) se excluye del escaneo independientemente de si es realmente visible en la ventana gráfica actual. Evite usar nombres de clase enumerados en hidingClasses puramente para estilos adaptativos en elementos que necesitan ser escaneados.

Desinfectar la salida en 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 utiliza autenticación de un solo paso y 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 mediante SSO, configure el parámetro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Antiguo In-context Editor: configurar

Instalaciones de marcos de trabajo 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 de proyecto de un proyecto se encuentra en la configuración del proyecto.

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 distinguen entre mayúsculas y minúsculas dentro del editor, deshabilite 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 demo 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
```
Agregue 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 de proyecto de un proyecto se encuentra en la configuración del proyecto. Esto crea un archivo de inicialización con algunas opciones de configuración.
Agregue la etiqueta 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 aplicación demo 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
```
Agregue Phrase a la lista de aplicaciones instaladas:
```
INSTALLED_APPS = (

    'phrase',

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

Configure el editor In-context 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 editor In-context con una aplicación Django.

React (intl)

Nota

Es posible que esta biblioteca no funcione con IE11 o navegadores más antiguos. Agregue 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:

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

Configurar:

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

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

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

Busque todas las importaciones de FormattedMessage y cambie la fuente de react-intl a react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Ejecute 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 In-context Editor en este entorno, sigue estos pasos:

Agregue la gema phraseapp-in-context-editor-ruby al entorno con el que desea usar el editor In-context:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e instálelo ejecutando el comando bundle:
```
$ bundle install
```
Instale 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

Cree y administre tokens de acceso en la configuración del perfil o a través de la API de autorizaciones.

--project-id

El ID de proyecto de un proyecto se encuentra en la configuración del proyecto. Esto crea un archivo de inicialización con algunas opciones de configuración.
Agregue el fragmento de JavaScript al diseño de su 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 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 carga de página.

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

Ejemplo de código

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

Spring

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

Asegúrese de que el paquete com.phraseapp.incontexteditor esté disponible en la aplicación.
Establezca el ID del proyecto correcto y ajuste los otros parámetros en PhraseAppConfiguration.class.

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

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

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Agregue la etiqueta <script> a sus plantillas dentro de la etiqueta <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.

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

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

        }

    }

}

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

Sobrescribir 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 independientes, 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());

       };

   }

}

Agregue 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

El In-context Editor de Phrase para Vue I18n es compatible con 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 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 cárguelo con CDN (regístrelo 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 In-context Editor de Phrase para Vue I18n.
Crear una nueva instancia de In-context Editor de Phrase para Vue I18n, pasando la instancia de Vue I18n como primer argumento y Configuración de Phrase 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) usando observadores de mutación.

El modo Ajax puede causar problemas en algunos casos y puede resultar en graves problemas de rendimiento al usar 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 la configuración forceLocale. Esto también es útil para preseleccionar la localización que se muestra actualmente en su aplicación web en el In-context Editor:

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 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 del manejo automático por parte de la gema phraseapp-in-context-editor-ruby, agregar una matriz 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*"]

end

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