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

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

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 In-context Editor foi projetado para ajudar os tradutores a realizar tarefas com mais eficiência e traduzir uma página de site por meio de integração direta com o editor de tradução de Strings.

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

O In-context Editor:

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

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

Instalando o In-context Editor de Strings

Requisitos

Para usar o In-context Editor, o aplicativo requer:

Sites baseados na web, aplicativos da 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 de chave-valor.

Sites com Strings traduzíveis extraídas e uma camada de visualização que usa uma estrutura de chave-valor para renderizar traduções.
Nomes de chave expostos à camada de visualização ou modelo.
Snippet de JavaScript que renderiza o editor.
Idealmente, um ambiente dedicado para traduções. Isso pode ser um clone de um ambiente de staging e, embora dê mais trabalho para configurar inicialmente, oferece um melhor fluxo de trabalho e mais estabilidade.

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

Snippet JavaScript

Inclua o snippet JavaScript no layout da aplicação.

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

Comunicar-se com a API de Strings do Phrase.
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 de 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 pós-processador do In-context Editor do Phrase para i18next suporta todas as versões do i18next posteriores à 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 específicas ou correções de bugs.

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Instale a biblioteca i18next-phrase-in-context-editor-post-processor com o gerenciador de pacotes de sua preferência:

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

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

Adicionar o snippet JavaScript do ICE à instância do i18next na configuração.

Snippet 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 In-context Editor.
Abra o aplicativo em um navegador da web para exibir o In-context Editor. Entre com qualquer usuário da organização Phrase.

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

Vue I18n

Nota

O In-context Editor do Vue I18n Phrase oferece suporte a 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 específicas ou correções de bugs.

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Instale o pacote mais recente com o gerenciador de pacotes de sua preferência:

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

Importar a biblioteca Vue I18n Phrase In-context Editor.
Criar uma nova instância do Vue I18n Phrase In-context Editor, passando a instância do 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 o IE11 ou navegadores mais antigos. Adicionar Babel ao pipeline de compilação se for necessário suporte a navegadores mais antigos.

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

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Instale o pacote mais recente via NPM:
```
npm install react-intl-phraseapp
```
ou compile a partir do texto original:
```
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.

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

Adicionar o snippet 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 o texto original 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 Phrase In-context Editor com react-intl.

Angular 2 (ngx-translate)

Pré-requisitos

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

Para instalar o In-context Editor neste ambiente, siga estas etapas:

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

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, adicionar as URLs específicas dos EUA para ativar o trabalho 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 parser de documento do editor converte todas as chaves para minúsculas. Se estiver enfrentando problemas com este comportamento e quiser usar chaves que diferenciam maiúsculas de minúsculas dentro do editor, desabilitar o recurso automático de minúsculas:
```
let config = {
  // ...
  autoLowercase: false
}
```

Adicionar estes snippets à aplicação 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 demo app demonstra uma integração do In-context Editor com Angular e ngx-translate.

Ruby on Rails (i18n)

Nota

Esta biblioteca pode não funcionar nativamente em navegadores mais antigos ou no Microsoft IE11. Adicionar Babel ao pipeline de build se esses navegadores precisarem ser suportados.

Pré-requisitos

Inscrever-se para uma conta Phrase Strings.
Usar a excelente gem i18n também usada pelo Rails.

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Adicionar 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
  
  Adicionar ao Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Compilar diretamente do texto original para obter o que há de mais recente e melhor:
```
bundle && gem build
```
Criar o arquivo de inicialização 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.
Adicionar o snippet Ruby ao layout do aplicativo app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Adicionar a seguinte configuração ao arquivo de inicialização /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, definir 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"

Abrir o aplicativo em qualquer navegador da web para ver o In-context Editor aplicado ao aplicativo. Entre com qualquer usuário da organização Phrase.

Amostra de código

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

Django

Pré-requisitos

Inscrever-se para uma conta Phrase Strings.
Usar o framework Django para Python.

Nota

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

Para instalar o In-context Editor neste ambiente, siga estas etapas:

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

    'phrase',

)
```
Adicionar os seguintes trechos de modelo ao arquivo de layout templates/base_generic.html ou equivalente:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
Usar o código phrase_i18n de modelo em modelos (por exemplo, demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

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

Abrir o aplicativo em qualquer navegador da web para ver o In-context Editor aplicado ao aplicativo. Entre com qualquer usuário da organização Phrase.

Código do adaptador Django no GitHub

Amostra de código

Esta demo aplicação demonstra como integrar o In-context Editor com uma aplicação Django.

Flask

Pré-requisitos

Inscrever-se para uma conta Phrase Strings.
Usar 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 In-context Editor neste ambiente, siga estas etapas:

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

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

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

O código do app 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)

Adicionar o código JavaScript da Phrase ao arquivo de layout base com a seguinte tag (deve ir dentro da seção do arquivo de modelo):

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

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

Se necessário, definir o centro de dados dos EUA para Ativar 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 de retorno 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 do Flask-Babel.

Amostra de código

Esta demo aplicação demonstra como integrar o In-context Editor com uma aplicação Flask.

Symfony 5.X

Pré-requisitos

Inscrever-se para uma conta Phrase Strings.
Usar o framework Symfony 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 a aplicação Symfony, siga estes passos:

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

Ajuste config/services.yaml para decorar o serviço de tradutor com o adaptador da Phrase:

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

Adicionar o seguinte snippet JavaScript ao modelo de layout base ou Twig entre {% 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>

A aplicação Symfony está agora conectada ao In-context Editor.

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, definir o centro de dados dos EUA para Ativar o trabalho com endpoints dos EUA:

window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "YOUR-ACCOUNT-ID",
    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 aplicação demo demonstra como integrar o In-context Editor com uma aplicação Symfony.

Configurando o In-context Editor

Expondo nomes de chave

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 auxiliar 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 modelo renderizaria então a saída do método translate() em vez da string traduzida real:

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

Formatação

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

Usar este formato para expor nomes de chave em vez de traduções:

{{__phrase_NameOfYourKey__}}

Exemplo:

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

Modifique o método auxiliar translate() para expor nomes de chave no formato necessário:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Dependendo do framework, auxiliares de tradução no código podem ser substituídos ou uma versão encapsulada pode ser criada para usar em modelos.

Exemplo:

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

Escapando nomes de chave e caracteres especiais

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

Caracteres na seguinte lista precisam ser escapados quando expostos ao In-context Editor:

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

Conversão automática de maiúsculas e minúsculas

Por padrão, o analisador de documento do In-context Editor converte todas as chaves para minúsculas. Se estiver enfrentando problemas com esse comportamento e quiser usar chaves que diferenciam maiúsculas de minúsculas no In-context Editor, desabilite o recurso automático de minúsculas:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar decoradores de chave

Ao usar o In-context Editor, os nomes das chaves geralmente são envolvidos com decoradores (chaves, por padrão) para gerar chaves de identificação exclusivas dentro do contexto de um documento:

{{__phrase_YOUR.KEY__}}

Se isso causar conflitos com outras bibliotecas (por exemplo, mecanismos de modelo do lado do cliente, incluindo AngularJS e Ember.js) que usam uma sintaxe semelhante, altere o prefixo e o sufixo do decorador do In-context Editor na configuração. Para informar ao In-context Editor quais decoradores o analisador deve procurar, adicione os seguintes valores de configuração antes do snippet 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 a gem phraseapp-in-context-editor-ruby para fornecer a funcionalidade do In-context Editor, certifique-se de que os decoradores estejam 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 seja ajustado no código Personalizado.

Habilitando e desabilitando o In-context Editor

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

O In-context Editor está desativado por padrão.

O In-context Editor pode ser explicitamente ativado ou desativado. Isso afeta a inclusão do snippet JavaScript (ao usar o view helper) e a renderização dos nomes de chave decorados nas views:

PhraseApp::InContextEditor.enabled = true|false

Exemplo de como marcar a flag para uma variável de ambiente:

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

Reparsing completo

Ative fullReparse se estiver usando o In-context Editor com um framework JavaScript que usa Virtual DOM, como o React. Isso permite o reparsing adequado quando alterações no DOM são detectadas:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Ocultando elementos do In-context Editor

Classes listadas na opção hidingClasses são tratadas como ocultas e excluídas pelo scanner do In-context Editor. Para tornar elementos com uma determinada classe escaneáveis, remover esse nome de classe da matriz hidingClasses em vez de adicioná-lo. Adicionar um nome de classe à matriz exclui elementos correspondentes e oculta o botão editar; remover um nome de classe da matriz inclui elementos correspondentes e exibe o botão editar.

A opção hidingClasses realiza uma verificação estática de presença de classe em um elemento e seus ancestrais. Ela não avalia a visibilidade computada ou responsiva. Um elemento que usa uma classe utilitária responsiva que corresponde a uma entrada em hidingClasses (por exemplo, uma classe chamada "hidden" combinada com uma classe de visibilidade específica de breakpoint) é excluído da varredura, independentemente de estar realmente visível na viewport atual. Evite usar nomes de classe listados em hidingClasses puramente para estilização responsiva em elementos que precisam ser escaneados.

Higienizar saída para a página da web

O In-context Editor pode ser configurado para escapar ou alterar traduções antes que sejam 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 In-context Editor com Logon único habilitado, adicione o seguinte valor de configuração antes do snippet JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

Para exigir que os usuários façam logon usando Logon único, defina o parâmetro enforced:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

In-context Editor antigo: configuração

Instalações de framework web

Angular 2 (ngx-translate)

Para instalar o In-context Editor neste ambiente, siga estas etapas:

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

Adicione estes snippets ao app 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 demo app demonstra uma integração do In-context Editor com Angular e ngx-translate.

AngularJS (angular-translate)

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Instale o angular-phrase via Bower (ou faça o download 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 <head> código:
```
<phrase-javascript></phrase-javascript>
```
Abra a aplicação em qualquer navegador web para ver o In-context Editor aplicado ao app. Entre com qualquer usuário da organização Phrase.

angular-phrase no GitHub

Amostra de código

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

Django

Para instalar o In-context Editor neste ambiente, siga estas etapas:

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

    'phrase',

)
```
Usar o código de modelo phrase_i18n em modelos:
```
{% load phrase_i18n %}
```
Para permitir que django-phrase substitua métodos de tradução, carregue phrase_i18n após i18n.
Adicionar o trecho JavaScript ao layout:
```
{% phrase_javascript %}
```

Configurar o In-context Editor 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 web para ver o In-context Editor aplicado ao app. Entre com qualquer usuário da organização Phrase.

Código do adaptador Django no GitHub

Amostra de código

Esta demonstração de aplicativo mostra como integrar o In-context Editor com um aplicativo Django.

React (intl)

Nota

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

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

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Instale o pacote via NPM:
```
npm install react-intl-phraseapp
```
ou compile a partir do texto original:
```
npm run dist
```
```
npm install
```

Configurar:

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

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

Adicionar 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 texto original 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 In-context Editor da Phrase com o react-intl.

Ruby on Rails (i18n)

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Adicionar a gem phraseapp-in-context-editor-ruby ao ambiente com o qual você deseja usar o In-context Editor:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
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

Criar e gerenciar 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.
Adicionar o snippet 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 a aplicação em qualquer navegador web para ver o In-context Editor aplicado ao app. Entre com qualquer usuário da organização Phrase.
Desabilitar Turbolinks (se usado)

O Turbolinks remove todos os elementos da interface do In-context Editor da página a cada carregamento de página.

Adicionar 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 In-context Editor da Phrase com o react-i18next.

Spring

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Certifique-se de que o pacote com.phraseapp.incontexteditor esteja disponível na aplicação.
Defina o ID do projeto correto e ajuste os outros parâmetros em PhraseAppConfiguration.class.

Para renderizar todas as traduções através da Phrase, adicionar 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();

}

Adicionar a <script> código aos seus templates dentro de cada <head> código da página:

<head>

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

</head>

Reinicie a aplicação e entrar com as credenciais de usuário Phrase.

Código-fonte da aplicação de exemplo no GitHub

Como localizar aplicações Spring como um profissional

Pacote Starter do Spring Boot (fornecido pela ePages)

Symfony 2.x

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Criar um novo ambiente no qual o In-context Editor será executado. No exemplo, o novo ambiente é chamado de translation.

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

imports:

    - { resource: config.yml }

parameters:

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

Criar um controller 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 chave ao In-context Editor:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Adicionar o trecho JavaScript ao layout:

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

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

Criar um novo ambiente no qual o In-context Editor será executado. No exemplo, o novo ambiente é chamado de translation.

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

imports:

   - { resource: config.yml }
```

Criar um controller 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 chave ao In-context Editor:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

Certifique-se de que a classe seja sempre substituída quando o bundle for usado com um compiler 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 compiler passes 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());

       };

   }

}

Adicionar o trecho JavaScript ao layout:

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

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

Documentação de Tradução do Symfony

Vue I18n

Nota

O Vue I18n Phrase In-context Editor oferece suporte a 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 específicas ou correções de bugs.

Para instalar o In-context Editor neste ambiente, siga estas etapas:

Instalar o pacote com o gerenciador de pacotes de sua preferência:

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

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

ou carregar com CDN (registrar 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:

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

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

Usando o In-context Editor antigo

Modo Ajax

O In-context Editor oferece suporte a Ajax e manipulação de 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 In-context Editor. Para desabilitar o modo Ajax, adicionar o seguinte valor de configuração antes do snippet JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modo de depuração

Para Ativar o modo de depuração, adicionar o seguinte valor de configuração antes do snippet JavaScript:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forçar um local

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chaves ignoradas

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

As chaves podem ser excluídas de serem renderizadas com o In-context Editor. Ao trabalhar com Rails, as chaves podem ser ignoradas para dados como mensagens de erro ou chaves de formato de data e hora. Para Excluir chaves de serem manipuladas automaticamente pela phraseapp-in-context-editor-ruby gem, adicione uma matriz 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 disponibilizadas para o In-context Editor e são renderizadas normalmente.