In-Context Editor (Strings)

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

Disponible para

Equipo, Profesional, Negocio, Empresa y planes de UI/UX de Software

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 del Marco Web

i18next

Nota

i18next Phrase In-Context Editor Post Processo admite todas las versiones i18next anteriores 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 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 Editor Contextual de Frases de Vue I18n 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 o correcciones de errores.

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

Instala el paquete más nuevo 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 de Editor Contextual de Frases de Vue I18n.
Crea una nueva Instancia de Editor Contextual de Frases de Vue I18n, pasando la instancia de Vue I18n como primer argumento y Configuración de Frases 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 a la tubería 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 In-context Editor en este entorno, sigue estos pasos:

Instala el nuevo 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>',
  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 contextual de Phrase con react-intl.

Angular 2 (ngx-translate)

Requisitos previos

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

Para instalar In-context Editor 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 que cambie a 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 funcionamiento 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 demo app muestra una integración del editor contextual con Angular y ngx-translate.

Ruby on Rails (i18n)

Nota

Esta biblioteca puede no funcionar directamente en navegadores más antiguos o 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 también utilizada por Rails.

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

Agrega la phraseapp-in-context-editor-ruby biblioteca al entorno deseado usando 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
```
- Compila 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 %>
```

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

Abre la aplicación en cualquier navegador web para ver el editor contextual 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 contextual de Phrase con react-i18next.

Django

Requisitos previos

Regístrate para una cuenta de Phrase Strings.
Usa el marco de 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:

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

    'phrase',

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

Agrega 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 fragmento de JavaScript manualmente.

Abre la aplicación en cualquier navegador web para ver el editor contextual 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 editor contextual con una aplicación Django.

Flask

Requisitos previos

Regístrate para una cuenta de Phrase Strings.
Usa el marco de 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:

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 el fragmento de JavaScript de Phrase al archivo de diseño base con la siguiente etiqueta (debería ir dentro de la sección del archivo de plantilla):

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "TU-ID-DE-PROYECTO",
        accountId: "TU-ID-DE-CUENTA",}}]}
        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, establece el centro de datos de EE. UU. para habilitar el trabajo con puntos finales de EE. UU.:

window.PHRASEAPP_CONFIG = {
    projectId: "TU-ID-DE-PROYECTO",
    accountId: "TU-ID-DE-CUENTA",}}]}
    datacenter: "us",
};

Cuando PHRASEAPP_ENABLED = True, el paquete modifica los valores de retorno 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 contextual con una aplicación Flask.

Symfony 5.x

Requisitos previos

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

Nota

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

Para integrar el editor contextual 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:

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

Agrega el siguiente fragmento de JavaScript a la plantilla base o de diseño Twig entre el {% block javascripts %} para que el Editor Contextual 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 Editor Contextual.

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, establece el centro de datos de EE. UU. para habilitar el trabajo con puntos finales de EE. UU.:

window.PHRASEAPP_CONFIG = {
    projectId: "TU-ID-DE-PROYECTO",
    accountId: "TU-ID-DE-CUENTA",}}]}
    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 contextual con una aplicación Symfony.

Configurando el Editor contextual

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.

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

Modifique 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 anulados o se puede crear una versión envuelta para usar en las plantillas.

Ejemplo:

const t = (clave: 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 Editor Contextual:

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 editor contextual convierte todas las claves a minúsculas. Si experimenta problemas con este comportamiento y desea usar claves sensibles a mayúsculas dentro del Editor Contextual, deshabilite la función automática de minúsculas:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar decoradores de clave

Al usar el editor contextual, los nombres de clave 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, cambia el prefijo y sufijo del decorador del editor contextual en la configuración. Para indicar al editor contextual qué decoradores debe buscar el analizador, agrega los siguientes valores de configuración antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

Si no se utiliza la gema, 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 Contextual

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

El Editor contextual está deshabilitado por defecto.

El Editor contextual 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 vincular 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 contextual 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 Editor contextual 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 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 Editor contextual 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 Editor Contextual: Configuración

Instalaciones de Marco 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 de un 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 dentro del editor, deshabilite la función automática de minúsculas:
```
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 demo app muestra una integración del editor contextual con Angular y ngx-translate.

AngularJS (angular-translate)

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

Instalar 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']);
```
Configurar el módulo:
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
El ID del 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 phrase-javascript directiva a la aplicación dentro de la <head> etiqueta:
```
<phrase-javascript></phrase-javascript>
```
Abra la aplicación en cualquier navegador web para ver el editor contextual 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 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:

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 sobrescriba 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 Contextual 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 editor contextual 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 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 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 de un proyecto se encuentra en la configuración del proyecto.

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

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 demo muestra una integración del editor contextual de Phrase con react-intl.

Ruby on Rails (i18n)

Para instalar 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 Contextual:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
y instálala 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 de perfil o a través de la API de Autorizaciones.

--project-id

El ID del 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.
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>
```
Abra la aplicación en cualquier navegador web para ver el editor contextual 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 Editor Contextual de la página en cada carga de página.

Agrega 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 editor contextual de Phrase con react-i18next.

Spring

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

Asegúrate de que el package 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 la <script> etiqueta a tus plantillas dentro de la <head> etiqueta de cada página:

<head>

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

</head>

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

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

Cómo localizar aplicaciones de Spring como un profesional

Paquete de inicio de Spring Boot (proporcionado por ePages)

Symfony 2.x

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

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

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

imports:

    - { resource: config.yml }

parameters:

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

Crea un controlador para hacer que el navegador del entorno sea accesible:

# 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 contextual:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

    public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

        if (!isset($this->catalogues[$locale])) {

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Agrega el fragmento de JavaScript al diseño:

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

Abra la aplicación en cualquier navegador web para ver el editor contextual 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:

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

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

imports:

   - { resource: config.yml }
```

Crea un controlador para hacer que el navegador del entorno sea accesible:

# 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 contextual:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

   public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

       // Return ID of translation key with pre- and suffix for PhraseApp

       return $prefix.$id.$suffix;

   }

}

Asegúrate de que la clase siempre se sobrescriba cuando el paquete se use 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 usas pases de compilador separados, regístralos en el método build() de la clase del paquete:

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

class AppBundle extends Bundle

{

   public function build(ContainerBuilder $container)

   {

       parent::build($container);

       if($container->getParameter("kernel.environment") == 'translation') {

           $container->addCompilerPass(new OverrideServiceCompilerPass());

       };

   }

}

Agrega el fragmento de JavaScript al diseño:

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

Abra la aplicación en cualquier navegador web para ver el editor contextual 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 editor contextual de frases de 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 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 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 Configuración de Phrase como segundo.

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

Usando el Antiguo Editor contextual

Modo Ajax

El Editor en Contexto soporta Ajax y manipulación del DOM (es decir, a través de JavaScript) usando observadores de mutación.

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modo Debug

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forzando una Localización

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Claves Ignoradas

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

Las claves pueden ser excluidas de ser renderizadas con el editor en contexto. 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 el phraseapp-in-context-editor-ruby gem, agrega un arreglo 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 Editor contextual y se renderizan normalmente.