Editor In-Context (Strings)

O conteúdo de toda a Central de Ajuda é traduzido automaticamente de inglês pelo Phrase Language AI.

Disponível para

Planos Team, Professional, Business, Enterprise e Software UI/UX

Entre em contato com Vendas para perguntas sobre licenciamento.

Disponível para

Plano Avançado e Enterprise (legado)

Entre em contato com Vendas para perguntas sobre licenciamento.

O editor In-Context foi projetado para ajudar os tradutores a realizarem suas tarefas de forma mais eficiente e traduzirem uma página da web através da integração direta com o editor de tradução Strings.

Atualmente, duas versões estão disponíveis:

O editor In-Context:

Inclui novas funcionalidades (visualização multilíngue, opções de layout, ações em lote, recursos de colaboração, etc.) e UI do editor de tradução.
O antigo editor In-Context.

Após instalar o editor In-Context, ele pode ser personalizado para trabalhar com muitas tecnologias.

Instalando o Editor In-Context Strings

Requisitos

Para usar o editor In-Context, a aplicação requer:

Sites baseados na web, aplicações web, sites móveis, etc.
Os tradutores têm acesso ao servidor web que executa o editor. Isso pode ser um ambiente local, se necessário.
Uma estrutura de arquivo de localização chave-valor.

Sites web com strings traduzíveis extraídas e uma camada de visualização que utiliza uma estrutura chave-valor para renderizar traduções.
Nomes de chave expostos à camada de visualização ou modelo.
Trecho de JavaScript que renderiza o editor.
Idealmente, um ambiente dedicado para traduções. Isso pode ser um clone de um ambiente de homologação e, embora exija mais trabalho para ser configurado inicialmente, proporciona um fluxo de trabalho melhor e mais estabilidade.

Se um ambiente dedicado não for possível, um ambiente de homologação existente pode ser usado com a opção de habilitar o Editor In-Context conforme necessário.

JavaScript Snippet

Inclua o trecho de JavaScript no layout da aplicação.

O trecho inclui o código necessário para:

Comunicar-se com a API de Strings Phrase.
Renderizar a interface do usuário.
Fornecer login.

ID do Projeto é encontrado nas configurações do projeto.

ID da Conta é encontrado nas configurações da organização de Strings.

Exemplo:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Não altere este nome para que a configuração funcione
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Defina como 'us' para o centro de dados dos EUA
      prefix: '{{__', // Defina como o prefixo para o formato da chave nos templates de visualização
      suffix: '__}}', // Defina como o sufixo para o formato da chave nos templates de visualização
      disableShortcuts: false, // Defina como verdadeiro para desabilitar os atalhos de teclado
      autoLowercase: true, // Defina como falso se as chaves contiverem letras maiúsculas
    };
  </script>
  <script type="module" async="" src="https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js"></script>

Instalações de Framework Web

i18next

Nota

O processador pós-editor de frases i18next In-Context suporta todas as versões do i18next mais recentes que 19.5.1. Embora esta biblioteca possa funcionar com versões anteriores também, elas não são oficialmente suportadas e podem não receber atualizações ou correções de bugs específicas.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale a biblioteca i18next-phrase-in-context-editor-post-processor com o gerenciador de pacotes preferido:

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

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

Nota

As versões recomendadas da biblioteca são 1.4.0 ou mais recentes.

ou carregue via CDN:

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

Bootstrap (exemplo):

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

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // carregar algumas traduções do repositório i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // faça algo na inicialização do i18next
    });

Para integrar a biblioteca:

Importe PhraseInContextEditorPostProcessor da biblioteca i18next-phrase-in-context-editor-post-processor.
Crie uma nova instância de i18next Phrase In-Context Editor Post Processor, passando PhraseConfig como argumento.
Passe a nova instância criada de i18next Phrase In-Context Editor Post Processor para o método use do i18next.
Adicione a string phraseInContextEditor à propriedade de array postProcess (passada dentro do objeto de configuração do método init do i18next).

Adicione o trecho de JavaScript do ICE à instância do i18next na configuração.

Trecho de exemplo:

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

Nota

accountId deve ser fornecido para configurar o ICE com sucesso. O ID da conta é encontrado nas configurações da organização Strings.

Se necessário, configure o atributo useOldICE para alternar para o old ICE:

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

Inicie o editor In-Context.
Abra o aplicativo em um navegador da web para exibir o editor In-Context. Entre com qualquer usuário da organização Phrase.

Opções de configuração e métodos de exemplo.

Vue I18n

Nota

O Vue I18n Phrase In-Context Editor suporta todas as versões do Vue I18n 8.17.5 e mais recentes. Esta biblioteca pode funcionar com versões anteriores, mas elas não são oficialmente suportadas e não receberão atualizações ou correções de bugs específicas.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o pacote mais recente com o gerenciador de pacotes preferido:

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

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

ou carregue com CDN (registre manualmente window['vue-i18n-phrase-in-context-editor']):

<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>

Bootstrap (exemplo):

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: 'Olá mundo!'
  }
});

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

Para integrar a biblioteca:

Importe a biblioteca Vue I18n Phrase In-Context Editor.
Crie uma nova instância Vue I18n Phrase In-Context Editor, passando a instância Vue I18n como primeiro argumento e Phrase Config como segundo.

Opções de configuração e métodos de exemplo.

React (intl)

Nota

Esta biblioteca pode não funcionar com IE11 ou navegadores mais antigos. Adicione o Babel ao pipeline de construção se o suporte a navegadores mais antigos for necessário.

Esta biblioteca herda componentes comuns dos pacotes react-intl. Se o Phrase estiver habilitado chamando initializePhraseAppEditor, o comportamento dos componentes mudará.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o pacote mais recente via NPM:
```
npm install react-intl-phraseapp
```
ou construa a partir do código-fonte:
```
npm run dist
```
```
npm install
```

Configurar:

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

A ID de um projeto é encontrada nas configurações do projeto.

A ID da conta é encontrada nas configurações da organização Strings.

Adicione o trecho ao aplicativo 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);

Encontre todas as importações de FormattedMessage e altere a origem de react-intl para react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Execute testes unitários usando jest:
```
npm test
```

Amostra de código

Esta demonstração mostra uma integração do editor In-Context do Phrase com react-intl.

Angular 2 (ngx-translate)

Pré-requisitos

Inscreva-se para uma conta do Phrase Strings.
Use o módulo ngx-translate para localização em aplicações Angular 2.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale com 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,
};

A ID de um projeto é encontrada nas configurações do projeto.

A ID da conta é encontrada nas configurações da organização Strings.

Se necessário, configure o atributo useOldICE para alternar para o old ICE:

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

initializePhraseAppEditor(config);

Se necessário, adicione as URLs específicas dos EUA para ativar o funcionamento através do centro de dados:

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 padrão, o analisador de documentos do editor converte todas as chaves para minúsculas. Se estiver enfrentando problemas com esse comportamento e quiser usar chaves sensíveis a maiúsculas e minúsculas dentro do editor, desabilite o recurso automático de minúsculas:
```
let config = {
  // ...
  autoLowercase: false
}
```

Adicione esses trechos ao aplicativo 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]
})

Amostra de código

Este aplicativo de demonstração demonstra uma integração do editor In-Context com Angular e ngx-translate.

Ruby on Rails (i18n)

Nota

Esta biblioteca pode não funcionar imediatamente em navegadores mais antigos ou no Microsoft IE11. Adicione Babel ao pipeline de construção se esses navegadores precisarem ser suportados.

Pré-requisitos

Inscreva-se para uma conta do Phrase Strings.
Use a excelente gem i18n também utilizada pelo Rails.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Adicione a biblioteca phraseapp-in-context-editor-ruby ao ambiente desejado usando um dos seguintes métodos:
- Via Gem
```
gem install phraseapp-in-context-editor-ruby
```
- Via Bundler
  
  Adicione ao Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Construa diretamente a partir do código-fonte para obter a versão mais recente e melhor:
```
bundle && gem build
```
Crie o arquivo inicializador executando o gerador do Rails:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
A ID de um projeto é encontrada nas configurações do projeto.

A ID da conta é encontrada nas configurações da organização Strings.
Adicione o trecho Ruby ao layout da aplicação app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Adicione a seguinte configuração ao 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"

Se necessário, defina o centro de dados dos EUA para habilitar o trabalho com endpoints dos EUA:

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

Abra a aplicação em qualquer navegador da web para ver o editor In-Context aplicado ao app. Entre com qualquer usuário da organização Phrase.

Amostra de código

Esta demo mostra uma integração do editor In-Context do Phrase com react-i18next.

Django

Pré-requisitos

Inscreva-se para uma conta do Phrase Strings.
Use o Django framework para Python.

Nota

A versão antiga do ICE não está disponível desde a versão 2.0.0.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o pacote django-phrase com pip:
```
$ pip install django-phrase
```
Adicione o Phrase à lista de aplicativos instalados:
```
INSTALLED_APPS = (

    'phrase',

)
```
Adicione os seguintes trechos de template ao arquivo de layout templates/base_generic.html ou equivalente:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Use a tag de template phrase_i18n em templates (por exemplo, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

Adicione a seguinte configuração a settings.py:

    # Configurações do Phrase In-Context Editor
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Defina seu próprio ID de conta
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Defina seu próprio ID de projeto
    PHRASE_DATACENTER = "eu"  # Escolha seu datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

A ID de um projeto é encontrada nas configurações do projeto.

A ID da conta é encontrada nas configurações da organização Strings.

Em caso de problemas, é possível integrar o JavaScript snippet manualmente.

Abra a aplicação em qualquer navegador da web para ver o editor In-Context aplicado ao app. Entre com qualquer usuário da organização Phrase.

Código do adaptador Django no GitHub

Amostra de código

Este demo aplicativo demonstra como integrar o editor In-Context com um aplicativo Django.

Flask

Pré-requisitos

Inscreva-se para uma conta do Phrase Strings.
Use o framework Flask para Python.

Nota

A versão antiga do ICE não está disponível desde a versão 2.0.0.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o pacote Flask-Phrase com pip:
```
pip install Flask-Phrase
```

Adicione a seguinte configuração ao aplicativo Flask (app.config ou config.py):

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

O código do aplicativo deve ser semelhante a isto:

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)

Adicione o snippet de JavaScript ao arquivo de layout base com a seguinte tag (deve ir dentro da seção do arquivo de template):

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

A ID de um projeto é encontrada nas configurações do projeto.

A ID da conta é encontrada nas configurações da organização Strings.

Se necessário, defina o centro de dados dos EUA para habilitar o trabalho com endpoints dos EUA:

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

Quando PHRASEAPP_ENABLED = True, o pacote modifica os valores retornados das funções de tradução para apresentar um formato que o ICE pode ler. Quando definido como False, ele retornará às funções gettext padrão Flask-Babel's.

Amostra de código

Este demo aplicativo demonstra como integrar o In-Context editor com um aplicativo Flask.

Symfony 5.x

Pré-requisitos

Inscreva-se para uma conta do Phrase Strings.
Use o Symfony framework para PHP.

Nota

A versão 2.0.0 suporta Symfony 5 e superior. Se estiver usando Symfony 2, 3 ou 4, confira a versão antiga do ICE.

Para integrar o In-Context editor com o aplicativo Symfony, siga estas etapas:

Copie PhraseStringsInContextEditor e seu conteúdo para a pasta /src/Service do repositório ou para o local desejado. Se colocado em outro lugar, ajuste o namespace de acordo.

Ajuste config/services.yaml para decorar o serviço translator com o adaptador do Phrase:

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

Adicione o seguinte trecho de JavaScript ao template base ou de layout Twig entre o {% block javascripts %} para que o In-Context Editor possa ler a página da 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>

O aplicativo Symfony agora está conectado ao In-Context Editor.

A ID de um projeto é encontrada nas configurações do projeto.

A ID da conta é encontrada nas configurações da organização Strings.

Se necessário, defina o centro de dados dos EUA para habilitar o trabalho com endpoints dos EUA:

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

Recarregue o aplicativo e faça login com as credenciais do Phrase para iniciar o processo de tradução diretamente na página da web.

Amostra de código

Este demo aplicativo demonstra como integrar o In-Context editor com um aplicativo Symfony.

Configurando o In-context Editor

Expondo Nomes de Chaves

Normalmente, uma camada de visualização renderiza traduções passando o nome de uma string traduzível (ou seja, a chave) para algum tipo de método de tradução ou helper de visualização.

Código PHP de exemplo:

$translations = array(

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

  "page.link.label" => "Eu sou um link",

  "page.link.hint" => "Clique em mim"

)

function translate($keyName) {

  return $translations[$keyName];

}

O template então renderizaria a saída do translate() método em vez da string traduzida real:

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

Formatando

Deve ser indicado no template quais chaves renderizar traduções.

Use esta formatação para expor nomes de chaves em vez de traduções:

{{__phrase_NameOfYourKey__}}

Exemplo:

Se a chave page.headline estiver no template, renderize a string {{__phrase_page.headline__}}.

Modifique o método auxiliar translate() para expor os nomes das chaves no formato requerido:

function translate($keyName) {

  if ($phraseModeEnabled) {

    retornar "";

  } senão {

    return $translations[$keyName];

  }

}

Dependendo do framework, os auxiliares de tradução no código podem ser sobrescritos ou uma versão envolvida pode ser criada para usar em modelos.

Exemplo:

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

Escapando Nomes de Chaves e Caracteres Especiais

Certifique-se de que os nomes das chaves sejam convertidos para um formato reconhecível.

Os caracteres na lista a seguir precisam ser escapados quando expostos ao Editor In-Context:

Caractere	Sequência de escape	Exemplo
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} se torna {{__phrase__key[[[[[[html_open]]]]]]__}}
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} se torna {{__phrase__[[[[[[html_close]]]]]]key__}}

Conversão Automática de Caso

Por padrão, o parser de documentos do editor In-Context converte todas as chaves para minúsculas. Se você estiver enfrentando problemas com esse comportamento e quiser usar chaves sensíveis a maiúsculas e minúsculas dentro do Editor In-Context, desabilite o recurso automático de minúsculas:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar Decoradores de Chaves

Ao usar o editor In-Context, os nomes das chaves são tipicamente envoltos com decoradores (chaves, por padrão) para gerar chaves de identificação únicas dentro do contexto de um documento:

{{__phrase_YOUR.KEY__}}

Se isso causar conflitos com outras bibliotecas (por exemplo, motores de template do lado do cliente, incluindo AngularJS e Ember.js) que usam uma sintaxe semelhante, altere o prefixo e o sufixo do decorador do editor In-Context na configuração. Para informar ao editor In-Context quais decoradores o parser deve procurar, adicione os seguintes valores de configuração antes do trecho de JavaScript:

window.PHRASEAPP_CONFIG = {

  prefixo: '[[__',

  suffix: "__]]"

}

Isso informa ao editor para procurar tags que começam com [[__ e terminam com __]]:

[[__phrase_YOUR.KEY__]]

Se estiver usando a gem phraseapp-in-context-editor-ruby para fornecer funcionalidade de editor In-Context, certifique-se de que os decoradores estão configurados:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

fim

Se não estiver usando a gem, certifique-se de que o padrão de exposição do nome da chave seja ajustado no código personalizado.

Ativando e desativando o Editor In-Context

Esta configuração está disponível apenas ao usar a gem phraseapp-in-context-editor-ruby.

O editor In-Context está desativado por padrão.

O editor In-Context pode ser explicitamente ativado ou desativado. Isso afeta a inclusão do trecho de JavaScript (ao usar o helper de visualização) e a renderização dos nomes das chaves decoradas nas visualizações:

PhraseApp::InContextEditor.enabled = true|false

Exemplo de vinculação da marca a uma variável de ambiente:

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

Reanálise Completa

Ativar fullReparse se estiver usando o editor In-Context com um framework JavaScript que utiliza Virtual DOM, como o React. Isso permite a reanálise adequada quando mudanças no DOM são detectadas:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizar Saída para a Página da Web

O editor In-Context pode ser configurado para escapar ou alterar traduções antes de serem inseridas na página da web, fornecendo uma função para a propriedade sanitize.

A função aceita a string de tradução como o primeiro argumento e deve retornar uma string:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Logon Único

Se estiver usando logon único e quiser inicializar o editor In-Context com SSO habilitado, adicione o seguinte valor de configuração antes do trecho de JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Para exigir que os usuários façam login usando SSO, defina o parâmetro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Antigo Editor In-Context: Configuração

Instalações de Framework Web

Angular 2 (ngx-translate)

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale com NPM:
```
npm install ngx-translate-phraseapp
```

Configurar:

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

A ID de um projeto é encontrada nas configurações do projeto.

Por padrão, o analisador de documentos do editor converte todas as chaves para minúsculas. Se você estiver enfrentando problemas com esse comportamento e quiser usar chaves sensíveis a maiúsculas e minúsculas dentro do editor, desabilite o recurso de minúsculas automático:
```
let config = {
  // ...
  autoLowercase: false
}
```

Adicione esses trechos ao aplicativo 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]
})

Amostra de código

Este aplicativo de demonstração apresenta uma integração do editor In-Context com Angular e ngx-translate.

AngularJS (angular-translate)

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o angular-phrase via Bower (ou baixe manualmente):
```
$ bower install angular-phrase
```
Adicione o módulo angular-phrase à aplicação AngularJS existente após carregar o módulo angular-translate:
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
Configure o módulo:
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
A ID de um projeto é encontrada nas configurações do projeto. Isso cria um arquivo de inicialização com algumas opções de configuração.
Adicione a diretiva phrase-javascript ao aplicativo dentro da tag <head>:
```
<phrase-javascript></phrase-javascript>
```
Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao app. Entre com qualquer usuário da organização Phrase.

angular-phrase no GitHub

Amostra de código

Este aplicativo demo para angular-phrase mostra como localizar AngularJS com angular-translate.

Django

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o pacote django-phrase com pip:
```
$ pip install django-phrase
```
Adicione o Phrase à lista de aplicativos instalados:
```
INSTALLED_APPS = (

    'phrase',

)
```
Use a tag de template phrase_i18n em templates:
```
{% load phrase_i18n %}
```
Para permitir que django-phrase substitua os métodos de tradução, carregue phrase_i18n após i18n.
Adicione o trecho de JavaScript ao layout:
```
{% phrase_javascript %}
```

Configure o Editor In-Context para o projeto com estas opções:

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

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao app. Entre com qualquer usuário da organização Phrase.

Código do adaptador Django no GitHub

Amostra de código

Este aplicativo demo demonstra como integrar o editor In-Context com um aplicativo Django.

React (intl)

Nota

Esta biblioteca pode não funcionar com IE11 ou navegadores mais antigos. Adicione o Babel ao pipeline de construção se o suporte a navegadores mais antigos for necessário.

Esta biblioteca herda componentes comuns dos pacotes react-intl. Se o Phrase estiver habilitado chamando initializePhraseAppEditor, o comportamento dos componentes mudará.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o pacote via NPM:
```
npm install react-intl-phraseapp
```
ou construa a partir do código-fonte:
```
npm run dist
```
```
npm install
```

Configurar:

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

A ID de um projeto é encontrada nas configurações do projeto.

Adicione o trecho ao aplicativo react:

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

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

initializePhraseAppEditor(config);

Encontre todas as importações de FormattedMessage e mude a origem de react-intl para react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Execute testes unitários usando jest:
```
npm test
```

Amostra de código

Esta demo mostra uma integração do editor In-Context do Phrase com react-intl.

Ruby on Rails (i18n)

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Adicione a gem phraseapp-in-context-editor-ruby ao ambiente que você deseja usar o In-Context Editor:
```
grupo :development do
  gem 'phraseapp-in-context-editor-ruby'
 fim
```
e instale-a executando o comando bundle:
```
$ bundle install
```
Instale a gem phraseapp-in-context-editor-ruby executando o gerador Rails:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

Crie e gerencie tokens de acesso nas configurações de perfil ou via API de Autorizações.

--project-id

A ID de um projeto é encontrada nas configurações do projeto. Isso cria um arquivo de inicialização com algumas opções de configuração.
Adicione o trecho de JavaScript ao layout da sua aplicação dentro da tag <head> usando o helper phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao app. Entre com qualquer usuário da organização Phrase.
Desabilite o Turbolinks (se usado)

O Turbolinks remove todos os elementos da interface do usuário do In-Context Editor da página em cada carregamento de página.

Adicione o atributo data-no-turbolink à tag <body>:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Amostra de código

Esta demo mostra uma integração do editor In-Context da Phrase com react-i18next.

Spring

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Certifique-se de que o package com.phraseapp.incontexteditor esteja disponível no aplicativo.
Defina o ID do projeto correto e ajuste os outros parâmetros em PhraseAppConfiguration.class.

Para renderizar todas as traduções através do Phrase, adicione o bean à aplicação:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Forneça o helper JavaScript necessário nos templates expondo o helper como um bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Adicione a tag <script> aos seus templates dentro da tag <head> de cada página:

<head>

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

</head>

Reinicie a aplicação e faça login com as credenciais do usuário do Phrase.

Exemplo de código fonte da aplicação no GitHub

Como Localizar Aplicações Spring Como um Profissional

Pacote starter do Spring Boot (fornecido pela ePages)

Symfony 2.x

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Crie um novo ambiente no qual o editor In-Context será executado. No exemplo, o novo ambiente é nomeado tradução.

Crie um novo arquivo de configuração:

# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

    translator.class: Acme\YourBundle\Translation\PhraseTranslator

Crie um controlador para tornar o ambiente acessível ao 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();

Substitua o método de tradução padrão para expor os nomes das chaves ao editor In-Context:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Retornar valores traduzidos para o domínio 'routes'

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

        } else {

            // Retornar chaves de tradução do PhraseApp para todos os outros domínios

            return $prefix.$id.$suffix;

        }

    }

}

Adicione o trecho de JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao app. Entre com qualquer usuário da organização Phrase.

Documentação de Tradução do Symfony

Código do adaptador Symfony 2.x no GitHub

Symfony 3.x

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Crie um novo ambiente no qual o editor In-Context será executado. No exemplo, o novo ambiente é nomeado tradução.

Crie um novo arquivo de configuração:
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

Crie um controlador para tornar o ambiente acessível ao 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);

Substitua o método de tradução padrão para expor os nomes das chaves ao editor In-Context:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

       // Retornar ID da chave de tradução com prefixo e sufixo para o PhraseApp

       return $prefix.$id.$suffix;

   }

}

Certifique-se de que a classe seja sempre sobrescrita quando o bundle for usado com um compilador pass:

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

   }

}

Se estiver usando passes de compilador separados, registre-os no método build() da classe do bundle:

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

       };

   }

}

Adicione o trecho de JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador da web para ver o editor In-Context aplicado ao app. Entre com qualquer usuário da organização Phrase.

Documentação de Tradução do Symfony

Vue I18n

Nota

O Editor In-Context de Frases do Vue I18n suporta todas as versões do Vue I18n 8.17.5 e superiores. Esta biblioteca pode funcionar com versões anteriores, mas elas não são oficialmente suportadas e não receberão atualizações ou correções de bugs específicas.

Para instalar o editor In-Context neste ambiente, siga estas etapas:

Instale o pacote com o gerenciador de pacotes preferido:

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

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

ou carregue com CDN (registre manualmente window['vue-i18n-phrase-in-context-editor']):

<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>

Bootstrap (exemplo):

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 a biblioteca:

Importe a biblioteca Vue I18n Phrase In-Context Editor.
Crie uma nova instância de Vue I18n Phrase In-Context Editor, passando a instância de Vue I18n como primeiro argumento e Phrase Config como segundo.

Opções de configuração e métodos de exemplo.

Usando o Antigo Editor In-context

Modo Ajax

O Editor In-Context suporta Ajax e manipulação do DOM (ou seja, via JavaScript) usando observadores de mutação.

O modo Ajax pode causar problemas em alguns casos e pode resultar em sérios problemas de desempenho ao usar o editor In-Context. Para desabilitar o modo Ajax, adicione o seguinte valor de configuração antes do trecho de JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modo de Depuração

Para ativar o modo de depuração, adicione o seguinte valor de configuração antes do trecho de JavaScript:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forçando um Locale

Para definir um locale específico explicitamente ao iniciar o editor In-Context, use a configuração forceLocale. Isso é útil para pré-selecionar o locale atualmente exibido em sua aplicação web no editor In-Context também:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chaves Ignoradas

Essa configuração está disponível apenas ao usar a gem phraseapp-in-context-editor-ruby.

Chaves podem ser excluídas de serem renderizadas com o editor In-Context. Ao trabalhar com Rails, chaves podem ser ignoradas para dados como mensagens de erro ou chaves de formato de data e hora. Para excluir chaves de serem tratadas automaticamente pelo phraseapp-in-context-editor-ruby gem, adicione um array das chaves ao arquivo de inicialização phraseapp_in_context_editor.rb. Os curingas também podem ser usados:

PhraseApp::InContextEditor.configure do |config|

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

fim

Chaves que correspondem a qualquer um desses padrões não serão acessíveis ao editor In-Context e são renderizadas normalmente.