Editor contextual (Strings)

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

Disponible para

Planes Team, Professional, Business y Enterprise

Ponte en contacto con Ventas para preguntas sobre licencias.

Disponible para

Avanzado y plan Enterprise (heredado)

Ponte en contacto con Ventas para preguntas sobre licencias.

El Editor contextual tiene por objeto Ayudar al equipo de traducción a hacer las cosas con mayor eficacia y traducir la página web mediante su integración directa con el editor de traducción Strings.

Actualmente, hay dos versiones disponibles:

El Editor contextual:

Incluye nuevas funcionalidades (vista multilingüe, opciones de diseño, acciones por lotes, funciones de colaboración, etc.) e interfaz de usuario desde el editor de traducción.
El antiguo Editor contextual.

Después de instalar el Editor contextual, se puede personalizar para trabajo con muchas tecnologías.

Instalación del Editor contextual Strings

Requisitos

Para usar el Editor contextual, 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 fuera necesario.
Una estructura de archivos de localización de valor clave.

Sitios web con Strings traducibles extraídas y una capa de vista que utiliza una estructura de valor clave para realizar traducciones.
Nombres clave expuestos a la capa de vista o plantilla.
Fragmento de JavaScript que representa el editor.
Idealmente, un entorno dedicado a las traducciones. Esto puede ser un clonado de un entorno de puesta en escena y aunque hay más trabajo por configuración inicial, proporciona un mejor flujo de trabajo y más estabilidad.

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

JavaScript Snippet

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

El snippet incluye el código necesario para:

Comunícate con la Phrase Strings API.
Renderizar la interfaz de usuario.
Proporcionar inicio de sesión.

Proyecto ID se encuentra en configuración proyecto.

Cuenta ID se encuentra en configuración Strings organización.

Muestra:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // No cambiar este nombre para que la configuración trabajo
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      centro de datos: 'eu', // Cambiar a 'us' para centro de datos estadounidense
      prefijo: '{___', // Establece el prefijo para el formato clave en las plantillas de vista
      sufijo: '_}}', // Establecer al sufijo para el formato clave en las plantillas de vista
      disableShortcuts: false, // Establecido como verdadero para deshabilitar teclas de acceso rápido
      autoMinúsculas: verdadero, // Establecido como falso si las claves contienen mayúsculas
    };
  </script>
  <script type="module" async="" src="https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js"></script>

Instalaciones de marco web

i18siguiente

Nota

El postprocesador i18next Phrase Editor contextual admite todas las versiones i18next anteriores a la 19.5.1. Aunque esta biblioteca también podría trabajo con versiones anteriores, no es compatible oficialmente y es posible que no reciba actualizaciones específicas o correcciones de errores.

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

# hilo
hilo Agregar i18next-Phrase-in-context-editor-post-procesador

# npm
npm install i18next-Phrase-in-context-edit-post-processor

Nota

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

o cárguela a través de CDN:

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

Bootstrap (muestra):

importar i18next desde 'i18next';
importar i18nextXHRBackend desde «i18next-xhr-backend»;

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

Para integrar la biblioteca:

Importar PhraseInContextEditorPostProcessor de la biblioteca i18next Phrase in Context Editor Post-Process.
Crear nueva instancia de postprocesador i18next Phrase Editor contextual, pasando PhraseConfig como argumento.
Pasar la instancia de postprocesador i18next Phrase Editor contextual recién creada a i18next usar método.
Agregar cadena phraseInContextEditor a la propiedad postProcess array (pasada dentro del objeto de configuración del método i18next init).

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

Fragmento de muestra:

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

Nota

se debe proporcionar el accountId para configurar ICE con éxito. La cuenta ID se encuentra en configuración organización Strings.

Si es necesario, configure el atributo useOldICE para que cambie al ICE antiguo:

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

Inicie el Editor contextual.
Abra la aplicación en un navegador web para mostrar el Editor contextual. Inicia sesión con cualquier usuario organización Phrase.

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

Vue I18n

Nota

Vue I18n Phrase Editor contextual admite todas las versiones 8.17.5 y posteriores de Vue I18n. Esta biblioteca puede trabajo con versiones anteriores, pero no es compatible oficialmente y no obtendrá actualizaciones específicas o correcciones de errores.

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

# hilo
hilo Agregar editor de Phrase en Contexto vue-i18n

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

o cargar con CDN (regístrese manualmente en la ventana ['vue-i18n- Phrase-in-context- editor'] ):

<script src="https://unpkg.com/vue-i18n- Phrase en editor contextual/dist/vue-i18n- Phrase en editor contextual.umd.min.js"></script>

Bootstrap (muestra):

importar Vue desde 'vue';
importar VueI18n desde 'vue-i18n';

Vue.use(VueI18n);

const i18n = nuevo VueI18n({
  localización: process.env.VUE_APP_I18N_LOCALIZACIÓN || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  mensajes: {
      hello: ¡Hola mundo!
  }
});

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

Para integrar la biblioteca:

Importar la biblioteca Vue I18n Phrase Editor contextual.
Crear nueva instancia Vue I18n Phrase Editor contextual, pasando la instancia Vue I18n como primer argumento y Phrase Config como segundo.

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

Reaccionar (intl)

Nota

Es posible que esta biblioteca no trabajo con IE11 o navegadores anteriores. Agregar Babel a la cartera de creación si se requiere soporte de navegador antiguo.

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

Para instalar el Editor contextual en este entorno, siga estos pasos:

Instala el paquete más reciente a través de NPM:
```
npm install react-intl-phraseapp
```
o construir desde fuente:
```
npm ejecutar dist
```
```
npm instalar
```

Configurar:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_CUENTA_ID>',
  phraseEnabled: true,
  prefijo: "[__",
  sufijo: "__]",
  fullReparse: verdadero
};

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

ID cuenta se encuentra en configuración organización Strings.

Agregar el snippet a la aplicación react:

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

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_CUENTA_ID>',
  phraseEnabled: true,
  prefijo: "[__",
  sufijo: "__]",
  fullReparse: verdadero
};

initializePhraseAppEditor(config);

Busca todas las importaciones de mensajes con formato y cambia la fuente de react-intl a react-intl-phraseapp.
```
importar {FormattedMessage} desde 'react-intl-phraseapp'
```
Ejecuta pruebas unitarias usando jest:
```
prueba npm
```

Muestra de código

Esta demo muestra una integración del Editor contextual de Phrase con react-intl.

Angular 2 (ngx-traducir)

Requisitos previos

Registrarse en una cuenta Phrase Strings.
Usar módulo ngx-translate para la localización en aplicaciones Angular 2.

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

Configurar:

importar { initializePhraseAppEditor, PhraseConfig } desde 'ngx-translate-phraseapp';

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

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

ID cuenta se encuentra en configuración organización Strings.

Si es necesario, configure el atributo useOldICE para que cambie al ICE antiguo:

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

initializePhraseAppEditor(config);

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

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 manera predeterminada, 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 las minúsculas dentro del editor, deshabilite la función de minúsculas automáticas:
```
let config = {
  // ...
  autoMinúsculas: falsas
}
```

Agregar estos fragmentos a la aplicación Angular:

app.component.ts

importar { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} desde 'ngx-translate-phraseapp'

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

initializePhraseAppEditor(config);

app.module.ts

importar { TranslateModule, TranslateLoader, TranslateCompiler } desde '@ngx-translate/core';
importar { HttpClientModule, HttpClient } desde '@angular/common/http';
importar { PhraseAppCompiler } desde 'ngx-translate-phraseapp'
importar { AppComponent } desde './app.component';


exportar función HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  importaciones: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      cargador: {
        proporcionar: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        proporcionar: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  proveedores: [],
  bootstrap: [AppComponent]
})

Muestra de código

Esta aplicación de demostración muestra una integración del Editor contextual con Angular y ngx-translate.

Ruby on Rails (i18n)

Nota

Es posible que esta biblioteca no trabajo listo para Box para navegadores antiguos o Microsoft IE11. Agregar Babel a la cartera de creación si esos navegadores necesitan ser compatibles.

Requisitos previos

Registrarse en una cuenta Phrase Strings.
Usa la excelente joya i18n que también usan Rails.

Para instalar el Editor contextual en este entorno, siga estos pasos:

Agrega la biblioteca phraseapp-in-context editor - Ruby al entorno deseado utilizando uno de los siguientes métodos:
- Vía joya
```
gema instalar phraseapp-in-context- editor - Ruby
```
- Vía Bundler
  
  Lo Agregaremos al Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Construye directamente desde fuente para obtener lo último y lo mejor:
```
bundle && gem build
```
Crear el archivo inicializador ejecutando el generador Rails:
```
Rails genera phraseapp_in_context_editor:install --cuenta_id=<SU_CUENTA_ID> --proyecto ID=<SU_PROYECTO_ID>
```
proyecto ID de un proyecto se encuentra en configuración proyecto.

ID cuenta se encuentra en configuración organización Strings.
Agregar Ruby snippet 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, configure el centro de datos estadounidense para habilitar trabajar con puntos finales estadounidenses:

  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 organización Phrase.

Muestra de código

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

Django

Requisitos previos

Registrarse en una cuenta Phrase Strings.
Usa el marco de Django para Python.

Nota

La versión anterior de ICE no está disponible desde la versión 2.0.0.

Para instalar el Editor contextual en este entorno, siga estos pasos:

Instala el paquete Django Phrase con pip:
```
$ pip install Phrase de django
```
Agregar 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 %}
```
Use la etiqueta Phrase _i18n plantilla en las plantillas (por ejemplo, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Agrega la siguiente configuración a configuración.py:

    # Configuración Phrase Editor contextual
    PHRASE_ENABLED = Verdadero
    PHRASE_CUENTA_ID = "TU_CUENTA_ID" # Establece tu propia cuenta ID
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID" # Establece tu propio proyecto ID
    PHRASE_DATACENTER = "eu" # Elige tu centro de datos 'eu' | 'us'
    PHRASE_PREFIX = "{__"
    PHRASE_SUFFIX = "__}}"

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

ID cuenta se encuentra en configuración organización Strings.

En caso de problemas, es posible integrar el snippet de 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 organización Phrase.

Código adaptador Dango en GitHub

Muestra de código

Esta aplicación de demostración demuestra cómo integrar el Editor contextual con una aplicación Django.

Frasco

Requisitos previos

Registrarse en una cuenta Phrase Strings.
Usa el marco de frasco para Python.

Nota

La versión anterior de ICE no está disponible desde la versión 2.0.0.

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

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

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

El código de la aplicación debería ser similar a este:

del matraz importar Frasco, [...]
desde matraz_babel importar Babel
desde matraz_Phrase Importar Phrase, gettext, ngettext
app = Flask(__name__)
babel = Babel(app)
phrase = Phrase(app)

Agrega el fragmento 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: "SU PROYECTO ID",
        accountId: "SU ID DE CUENTA",
        datacenter: "eu",
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

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

ID cuenta se encuentra en configuración organización Strings.

Si es necesario, configure el centro de datos estadounidense para habilitar trabajar con puntos finales estadounidenses:

window.PHRASEAPP_CONFIG = {
    projectId: "SU PROYECTO ID",
    accountId: "SU ID DE CUENTA",
    centro de datos: "nosotros",
};

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

Muestra de código

Esta aplicación de demostración demuestra cómo integrar el Editor contextual con una aplicación Frasco.

Symfony 5.x

Requisitos previos

Registrarse en una cuenta Phrase Strings.
Usa el marco de Symfony para PHP.

Nota

La versión 2.0.0 es compatible con Symfony 5 y superiores. Si utiliza Symfony 2, 3 o 4, consulte el Editor contextual la versión antigua del ICE.

Para integrar el Editor contextual con la aplicación Symfony, siga estos pasos:

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

Ajuste config/services.yaml para decorar el servicio de traducción con el adaptador Phrase:

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

Agregar el siguiente fragmento de JavaScript a la plantilla base o de diseño Twig entre los {% bloques javascripts %} para que el Editor contextual pueda leer la página web:

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        centro de datos: 'eu',
        origen: 'Phrase',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

La aplicación Symfony ya está conectada al Editor contextual.

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

ID cuenta se encuentra en configuración organización Strings.

Si es necesario, configure el centro de datos estadounidense para habilitar trabajar con puntos finales estadounidenses:

window.PHRASEAPP_CONFIG = {
    projectId: "SU PROYECTO ID",
    accountId: "SU ID DE CUENTA",
    centro de datos: "nosotros",
};

Vuelve a cargar la aplicación e inicia sesión con credenciales Phrase para iniciar el proceso de traducción directamente en la página web.

Muestra de código

Esta aplicación de demostración demuestra cómo integrar el Editor contextual con una aplicación Symfony.

Configuración del Editor contextual

Exponiendo nombres clave

Normalmente, una capa de vista representa las traducciones pasando el nombre de una cadena traducible (es decir, la clave) a algún clasifique de método de traducción o ayudante de vista.

Código PHP 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 representaría entonces la salida del método traducir() en lugar de la cadena traducida real:

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

Formato

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

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

{{__phrase_NameOfYourKey__}}

Ejemplo:

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

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

function translate($keyName) {

  if ($phraseModeEnabled) {

    regresar "";

  } else {

    return $translations[$keyName];

  }

}

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

Ejemplo:

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

Eludir nombres clave y caracteres especiales

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

Es necesario evitar los caracteres de la siguiente lista cuando se exponen al Editor contextual:

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

De manera predeterminada, 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 minúsculas dentro del Editor contextual, deshabilite la función de minúsculas automáticas:

window.PHRASEAPP_CONFIG = {

  autoMinúsculas: falsas

}

Personalizar decoradores clave

Cuando se utiliza el Editor contextual, los nombres clave suelen envolverse con decoradores (corsés rizados, de manera 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, como AngularJS y Ember.js) que usan una sintaxis similar, cambie el prefijo y sufijo de decorador del Editor contextual al configurar. Para indicar al Editor contextual qué decoradores debe buscar el analizador, Agregar los siguientes valores de configuración antes del snippet de JavaScript:

window.PHRASEAPP_CONFIG = {

  prefijo: '[__',

  sufijo: "__]"

}

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

[[__phrase_YOUR.KEY__]]

Si utilizas la gema Phraseapp-in-context editor Ruby para proporcionar funcionalidad Editor contextual, asegúrate de que los decoradores estén configurados:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

final

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

Activación y desactivación del Editor contextual

Esta configuración solo está disponible cuando se utiliza la gema Ruby del editor contextual de Phraseapp.

El Editor contextual está deshabilitado de forma predeterminada.

El Editor contextual se puede habilitar o deshabilitar explícitamente. Esto afecta a la inclusión del fragmento de JavaScript (cuando se usa el asistente para la vista) y a la representación de los nombres de clave decorados en las vistas:

PhraseApp::InContextEditor.enabled = true|false

Ejemplo de vinculación del marcado a una variable de entorno:

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

Reparación completa

Habilitar fullReparse si se usa el Editor contextual con un marco JavaScript que usa DOM virtual como React. Esto permite una reparación adecuada cuando se detectan cambios en el DOM:

window.PHRASEAPP_CONFIG = {

  fullReparse: verdadero

}

Desinfectar salida a página web

El Editor contextual se puede configurar para evitar o alterar las traducciones antes de que se inserten en la página web, proporcionando una función a la propiedad de desinfección.

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

importar escape de “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    desinfectar: escapar

}

autenticación de un solo paso

Si utiliza la autenticación de un solo paso y desea inicializar el Editor contextual con SSO habilitado, Agregue el siguiente valor de configuración antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    habilitado: verdadero,
    
    proveedor: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    forzado: verdadero

  }

}

Viejo Editor contextual: Configurar

Instalaciones de marco web

Angular 2 (ngx-traducir)

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

Configurar:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefijo: "{___",
  sufijo: "_}}",
  fullReparse: verdadero
};

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

De manera predeterminada, 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 las minúsculas dentro del editor, deshabilite la función de minúsculas automáticas:
```
let config = {
  // ...
  autoMinúsculas: falsas
}
```

Agregar estos fragmentos a la aplicación Angular:

app.component.ts

importar { initializePhraseAppEditor, PhraseAppCompiler} desde 'ngx-translate-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefijo: "{___",
  sufijo: "_}}",
  fullReparse: verdadero
};

initializePhraseAppEditor(config);

app.module.ts

importar { TranslateModule, TranslateLoader, TranslateCompiler } desde '@ngx-translate/core';
importar { HttpClientModule, HttpClient } desde '@angular/common/http';
importar { PhraseAppCompiler } desde 'ngx-translate-phraseapp'

exportar función HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  importaciones: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      cargador: {
        proporcionar: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        proporcionar: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  proveedores: [],
  bootstrap: [AppComponent]
})

Muestra de código

Esta aplicación de demostración muestra una integración del Editor contextual con Angular y ngx-translate.

AngularJS (angular-translate)

Para instalar el Editor contextual en este entorno, siga estos pasos:

Instalar Phrase angular a través de Bower (o descargar manualmente):
```
$ bower install Phrase angular
```
Agregar el módulo de Phrase angular a la aplicación AngularJS existente después de cargar el módulo de traducción angular:
```
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", "");
```
proyecto ID de un proyecto se encuentra en configuración proyecto. Esto crea un archivo de inicialización con algunas opciones de configuración.
Agrega la directiva Phrase Javascript a la aplicación dentro de la etiqueta <head>:
```
<phrase-javascript></phrase-javascript>
```
Abre la aplicación en cualquier navegador web para ver el Editor contextual aplicado a la aplicación. Inicia sesión con cualquier usuario organización Phrase.

Phrase angular en GitHub

Muestra de código

Esta aplicación de demostración de Phrase angular muestra cómo localizar AngularJS con angular-translate.

Django

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

    'phrase',

)
```
Usa la etiqueta plantilla Phrase_i18n en las plantillas:
```
{% load phrase_i18n %}
```
Para permitir que Django Phrase sobrescriba los métodos de traducción, cargue Phrase i18n después de i18n.
Agregar el fragmento de JavaScript al diseño:
```
{% phrase_javascript %}
```

Configura el Editor contextual del proyecto con estas opciones:

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

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

Código adaptador Dango en GitHub

Muestra de código

Esta aplicación de demostración demuestra cómo integrar el Editor contextual con una aplicación Django.

Reaccionar (intl)

Nota

Es posible que esta biblioteca no trabajo con IE11 o navegadores anteriores. Agregar Babel a la cartera de creación si se requiere soporte de navegador antiguo.

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

Para instalar el Editor contextual en este entorno, siga estos pasos:

Instala el paquete a través de NPM:

npm install react-intl-phraseapp

o construir desde fuente:

npm ejecutar dist

npm instalar

Configurar:

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

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

Agregar el snippet a la aplicación react:

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

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

initializePhraseAppEditor(config);

Busca todas las importaciones de mensajes con formato y cambia la fuente de react-intl a react-intl-phraseapp.
```
importar {FormattedMessage} desde 'react-intl-phraseapp'
```
Ejecuta pruebas unitarias usando jest:
```
prueba npm
```

Muestra de código

Esta demo muestra una integración del Editor contextual de Phrase con react-intl.

Ruby on Rails (i18n)

Para instalar el Editor contextual en este entorno, siga estos pasos:

Agregar la joya phraseapp-in-context editor - Ruby al entorno que desea usar el Editor contextual con:
```
grupo :desarrollo hacer
  gem 'phraseapp-in-context-editor-ruby'
 final
```
e instálalo ejecutando el comando bundle:
```
$ paquete instalar
```
Instala la joya de fraseapp en editor contextual Ruby ejecutando el generador Rails:
```
$ bundle exec Rails genera phraseapp_in_context_editor:install --acceder al identificador único (token)=ACCEDER_Identificador único (token) --proyecto ID=SU PROYECTO ID
```
--access-token

crear y gestiona tokens de acceder en la configuración del perfil o a través de la API de autorizaciones.

--project-id

proyecto ID de un proyecto se encuentra en configuración proyecto. Esto crea un archivo de inicialización con algunas opciones de configuración.
Agrega el fragmento de JavaScript al diseño de tu aplicación dentro de la etiqueta <head> usando la ayuda de phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Abre la aplicación en cualquier navegador web para ver el Editor contextual aplicado a la aplicación. Inicia sesión con cualquier usuario organización Phrase.
Deshabilitar Turbolinks (si se utilizan)

Turbolinks elimina todos los elementos de la interfaz de usuario del Editor contextual de la página en cada extracción de página.

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

Muestra de código

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

Spring

Para instalar el Editor contextual en este entorno, siga estos pasos:

Asegúrate de que el paquete com.phraseapp.incontexteditor esté disponible en la aplicación.
Establece el ID correcto del proyecto y ajusta los demás parámetros en PhraseAppConfiguration.class.

Para representar todas las traducciones mediante Phrase, Agregar el grano a la aplicación:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Proporciona el ayudante de JavaScript requerido en las plantillas exponiendo el ayudante como un frijol:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

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

<head>

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

</head>

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

Ejemplo de código fuente en GitHub

Cómo localizar aplicaciones Spring como un profesional

Paquete Spring Boot Starter (proporcionado por ePages)

Symfony 2.x

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

Crear un nuevo archivo de configuración:

# app/config/config_translation.yml

importaciones:

    - { recurso: config.yml }

parámetros:

    translator.class: Acme\YourBundle\Translation\PhraseTranslator

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

Anule el método de traducción estándar en orden a exponer los nombres clave al Editor contextual:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

usar Symfony\Bundle\FrameworkBundle\Translation\Translator como BaseTranslator;

clase PhraseTranslator amplía BaseTranslator

{

    función pública trans($id, array $parámetros = array(), $dominio = 'mensajes', $localización = nulo)

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Devolver valores traducidos para dominio 'rutas'

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

        } else {

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

            return $prefix.$id.$suffix;

        }

    }

}

Agregar el fragmento de JavaScript al diseño:

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

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

Documentación de traducción de Symfony

Código adaptador Symfony 2.x en GitHub

Symfony 3.x

Para instalar el Editor contextual en este entorno, siga estos pasos:

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

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

importaciones:

   - { recurso: config.yml }
```

Crear un controlador para 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);

Anule el método de traducción estándar en orden a exponer los nombres clave al Editor contextual:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

usar Symfony\Bundle\FrameworkBundle\Translation\Translator como BaseTranslator;

clase PhraseTranslator amplía BaseTranslator

{

   función pública trans($id, array $parámetros = array(), $dominio = 'mensajes', $localización = nulo)

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

Asegúrate de que la clase siempre se anula cuando el paquete se usa 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

{

   proceso de función pública(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 bundle:

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

clase AppBundle extiende el paquete

{

   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

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

Documentación de traducción de Symfony

Vue I18n

Nota

Para instalar el Editor contextual en este entorno, siga estos pasos:

Instalar el paquete con el gestor de paquetes preferido:

# hilo
hilo Agregar editor de Phrase en Contexto vue-i18n

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

o cargar con CDN (regístrese manualmente en la ventana ['vue-i18n- Phrase-in-context- editor'] ):

<script src="https://unpkg.com/vue-i18n- Phrase en editor contextual/dist/vue-i18n- Phrase en editor contextual.umd.min.js"></script>

Bootstrap (muestra):

importar Vue desde 'vue';
importar VueI18n desde 'vue-i18n';

Vue.use(VueI18n);

const i18n = nuevo VueI18n({
  localización: process.env.VUE_APP_I18N_LOCALIZACIÓN || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  mensajes: {
      hello: ¡Hola mundo!
  }
});

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

Para integrar la biblioteca:

Importar la biblioteca Vue I18n Phrase Editor contextual.
Crear nueva instancia Vue I18n Phrase Editor contextual, pasando la instancia Vue I18n como primer argumento y Phrase Config como segundo.

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

Uso del Editor contextual antiguo

Modo Ajax

El Editor contextual admite la manipulación de Ajax y DOM (por ejemplo, a través de JavaScript) mediante observadores de mutaciones.

El modo Ajax puede causar problemas en algunos casos y puede resultar en problemas graves de rendimiento al utilizar el Editor contextual. Para deshabilitar el modo Ajax, Agregar el siguiente valor de configuración antes del fragmento de JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: falso

}

Modo de depuración

Para habilitar el modo 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 Editor contextual, utilice la configuración forceLocale. Esto es útil para preseleccionar la localización mostrada actualmente en su aplicación web en el Editor contextual:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Llaves ignoradas

Esta configuración solo está disponible cuando se utiliza la gema Ruby del editor contextual de Phraseapp.

Las claves se pueden excluir de la traducción con el Editor contextual. Cuando se trabaja con Rails, es posible que se ignoren las claves para datos como mensajes de error o claves formato fecha y hora. Para excluir que las claves sean manejadas automáticamente por la gema Phraseapp-in-context editor Ruby, Agregar una matriz de claves al archivo de inicialización phraseapp_in_context editor.rb. Los comodines también se pueden utilizar:

PhraseApp::InContextEditor.configure do |config|

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

final

Las claves que coincidan con cualquiera de estos patrones no se pondrán accesibles al Editor contextual y se renderizarán normalmente.