In-Context Editor (Strings)

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

Disponível para

Equipe, Profissional, Negócio, Empresa e Planos de UI/UX de Software

Entre em contato com o departamento de Vendas para perguntas sobre o licenciamento.

Disponível a partir de

Plano avançado e Enterprise (legado)

Entre em contato com Comércio para perguntas de licenciamento.

O editor em contexto foi projetado para ajudar os tradutores a realizar as tarefas de forma mais eficiente e traduzir uma página da web através da integração direta com o editor de tradução editor de tradução.

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

O editor em contexto:

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 em contexto.

Após instalar o editor em contexto, ele pode ser personalizado para trabalhar com muitas tecnologias.

Instalando o Editor em Contexto de Strings

Requisitos

Para usar o editor em contexto, o aplicativo requer:

Sites baseados na web, aplicativos 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 usa 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 uma cópia de um ambiente de homologação e, embora exija mais trabalho para configurar inicialmente, proporciona um melhor fluxo de trabalho 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 em Contexto 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 Phrase Strings.
Renderizar a interface do usuário.
Fornecer login.

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

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

Exemplo:

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

Instalações de Framework Web

i18next

Nota

O Processador Pós Editor em Contexto do i18next Phrase suporta todas as versões do i18next mais novas 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 em contexto 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: {
            // 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 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 em contexto.
Abra o aplicativo em um navegador da web para exibir o editor em contexto. Faça login com qualquer usuário da organização Phrase.

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

Vue I18n

Nota

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

Para instalar o editor em contexto 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 Editor em contexto do Vue I18n biblioteca.
Crie uma nova instância do Editor em contexto do Vue I18n, passando a instância do Vue I18n como primeiro argumento e Configuração de Frase 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 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 a Frase estiver habilitada chamando initializePhraseAppEditor, o comportamento dos componentes mudará.

Para instalar o editor em contexto 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
```

Configure:

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.

O ID da conta é encontrado 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 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 demonstração mostra uma integração do editor em contexto da Frase com react-intl.

Angular 2 (ngx-translate)

Pré-requisitos

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

Para instalar o editor em contexto neste ambiente, siga estas etapas:

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

Configure:

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.

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:

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 dos EUA:

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: {
        fornecer: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        fornecer: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Amostra de código

Este aplicativo de demonstração demonstra uma integração do editor em contexto 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 de Phrase Strings.
Use a excelente i18n gem também usada pelo Rails.

Para instalar o editor em contexto 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 do código-fonte para obter o mais recente e melhor:
```
bundle && gem build
```
Crie o arquivo inicializador executando o gerador 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.

O ID da conta é encontrado nas configurações da organização Strings.
Adicione o snippet 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 ativar 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 em contexto aplicado ao app. Faça login com qualquer usuário da organização Phrase.

Amostra de código

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

Django

Pré-requisitos

Inscreva-se para uma conta de 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 em contexto neste ambiente, siga estas etapas:

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

    'phrase',

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

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

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

O ID da conta é encontrado 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 em contexto aplicado ao app. Faça login 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 em contexto com um aplicativo Django.

Flask

Pré-requisitos

Inscreva-se para uma conta de Phrase Strings.
Use o Flask 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 em contexto neste ambiente, siga estas etapas:

Instale o Flask-Phrase pacote 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 a Phrase JavaScript snippet ao arquivo de layout base com a seguinte tag (deve ir dentro da seção do arquivo de template):

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "SEU-ID-PROJETO",
        accountId: "SEU-ID-CONTA",
        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.

O ID da conta é encontrado nas configurações da organização Strings.

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

window.PHRASEAPP_CONFIG = {
    projectId: "SEU-ID-PROJETO",
    accountId: "SEU-ID-CONTA",
    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 voltará para as funções gettext padrão do Flask-Babel.

Amostra de código

Este demo aplicativo demonstra como integrar o Editor em contexto com um aplicativo Flask.

Symfony 5.x

Pré-requisitos

Inscreva-se para uma conta de 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 Editor em contexto com o aplicativo Symfony, siga estas etapas:

Copie StringsDeFraseNoEditorEmContexto e seu conteúdo para a pasta /src/Serviço 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 tradutor 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 {% block javascripts %} para que o Editor em Contexto 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>

A aplicação Symfony agora está conectada ao Editor em Contexto.

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

O ID da conta é encontrado nas configurações da organização Strings.

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

window.PHRASEAPP_CONFIG = {
    projectId: "SEU-ID-PROJETO",
    accountId: "SEU-ID-CONTA",
    datacenter: "us",
};

Recarregue a aplicação 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

Esta demo aplicação demonstra como integrar o editor em contexto com uma aplicação Symfony.

Configurando o Editor em Contexto

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" => "I am a link",

  "page.link.hint" => "Click me"

)

function translate($keyName) {

  return $translations[$keyName];

}

O template então renderizaria a saída do método translate() 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 helper translate() para expor nomes de chaves no formato requerido:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Dependendo do framework, helpers de tradução no código podem ser sobrescritos ou uma versão encapsulada pode ser criada para uso em templates.

Exemplo:

const t = (key: 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 em contexto:

Caractere	Escape sequence	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 analisador de documentos do editor em contexto 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 em contexto, desabilite o recurso automático de minúsculas:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar Decoradores de Chave

Ao usar o editor em contexto, 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 em contexto na configuração. Para informar ao editor em contexto quais decoradores o analisador deve procurar, adicione os seguintes valores de configuração antes do trecho de JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

Isso diz ao editor para procurar tags começando com [[__ e terminando com __]]:

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

Ativando e desativando o Editor em Contexto

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

O Editor em Contexto está desativado por padrão.

O Editor em Contexto pode ser explicitamente ativado ou desativado. Isso afeta a inclusão do trecho de JavaScript (quando usando o helper de visualização) e a renderização dos nomes de chave decorados 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

Ative fullReparse se estiver usando o Editor em Contexto com um framework JavaScript que usa Virtual DOM, como React. Isso permite uma reanálise adequada quando mudanças no DOM são detectadas:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitizar Saída para Página da Web

O Editor em Contexto 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 em Contexto com SSO ativado, 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

  }

}

Editor em Contexto Antigo: Configuração

Instalações de Framework Web

Angular 2 (ngx-translate)

Para instalar o editor em contexto neste ambiente, siga estas etapas:

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

Configure:

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 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} 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: {
        fornecer: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        fornecer: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Amostra de código

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

AngularJS (angular-translate)

Para instalar o editor em contexto neste ambiente, siga estas etapas:

Instale 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 à aplicação dentro da tag <head>:
```
<phrase-javascript></phrase-javascript>
```
Abra a aplicação em qualquer navegador da web para ver o editor em contexto aplicado ao app. Entre com qualquer usuário da organização Phrase.

angular-phrase no GitHub

Amostra de código

Esta aplicação de demonstração para angular-phrase mostra como localizar o AngularJS com angular-translate.

Django

Para instalar o editor em contexto 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 modelo 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 em Contexto para o projeto com estas opções:

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

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

Código do adaptador Django no GitHub

Amostra de código

Esta aplicação de demonstração demonstra como integrar o editor em contexto com uma aplicação Django.

React (intl)

Nota

Esta biblioteca pode não funcionar com IE11 ou navegadores mais antigos. Adicione 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 em contexto 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
```

Configure:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  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,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

initializePhraseAppEditor(config);

Encontre todas as importações de FormattedMessage e altere o código-fonte 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 em contexto neste ambiente, siga estas etapas:

Adicione a phraseapp-in-context-editor-ruby gem ao ambiente que você deseja usar com o Editor em Contexto:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e instale executando o comando bundle:
```
$ bundle install
```
Instale a phraseapp-in-context-editor-ruby gem 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 do perfil ou via a 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 JavaScript ao layout da sua aplicação dentro da <head> tag usando o phraseapp_in_context_editor_js helper:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Abra a aplicação em qualquer navegador da web para ver o editor em contexto aplicado ao app. Entre com qualquer usuário da organização Phrase.
Desabilitar Turbolinks (se usado)

Turbolinks remove todos os elementos da interface do usuário do Editor em Contexto da página em cada busca de página.

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

Amostra de código

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

Spring

Para instalar o editor em contexto neste ambiente, siga estas etapas:

Certifique-se de que o package com.phraseapp.incontexteditor está 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 <script> tag aos seus templates dentro da tag <head> de cada página:

<head>

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

</head>

Reinicie a aplicação e entre com as credenciais do usuário 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 em contexto neste ambiente, siga estas etapas:

Crie um novo ambiente no qual o editor em contexto 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 pelo 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 em contexto:

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

        }

    }

}

Adicione o trecho de JavaScript ao layout:

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

Abra a aplicação em qualquer navegador da web para ver o editor em contexto 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 em contexto neste ambiente, siga estas etapas:

Crie um novo ambiente no qual o editor em contexto 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 pelo 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 em contexto:

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

   }

}

Certifique-se de que a classe seja sempre substituída quando o pacote for usado com uma passagem 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');

   }

}

Se estiver usando passagens de compilador separadas, registre-as no método build() da classe do pacote:

# 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 a aplicação em qualquer navegador da web para ver o editor em contexto aplicado ao app. Entre com qualquer usuário da organização Phrase.

Documentação de Tradução do Symfony

Vue I18n

Nota

O Editor em Contexto 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 específicas.

Para instalar o editor em contexto 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: '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 Configuração de Frases como segundo.

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

Usando o Antigo Editor em Contexto

Modo Ajax

O Editor em Contexto 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 em contexto. 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 local específico explicitamente ao iniciar o Editor em contexto, use a configuração forceLocale. Isso é útil para pré-selecionar o local atualmente exibido em sua aplicação web no Editor em contexto também:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chaves Ignoradas

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

Chaves podem ser excluídas de serem renderizadas com o Editor em contexto. 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. Curingas também podem ser usados:

PhraseApp::InContextEditor.configure do |config|

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

end

Chaves que correspondem a qualquer um desses padrões não serão acessíveis ao Editor em contexto e são renderizadas normalmente.