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 tradutores a realizar tarefas com mais eficiência e traduzir uma página de website 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, a aplicação requer:

Websites baseados na web, aplicações web, sites móvel, etc.
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.

Websites com Strings traduzível 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.
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, proporciona 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.

JavaScript Snippet

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

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

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

O ID<1> do projeto está localizado nas configurações do projeto.

O ID<1> da conta está localizado 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 i18next Phrase In-context Editor Post Processor 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 estes passos:

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-a 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 de i18next Phrase In-Context Editor Post Processor, passando PhraseConfig como argumento.
Passe a instância recém-criada de 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 a configuração do 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 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 estes passos:

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:

Instalar o pacote mais recente via NPM:
```
npm install react-intl-phraseapp
```
ou compilar 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 do 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 todos os imports de FormattedMessage, e alterar o texto original de react-intl para react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Executar testes unitários usando jest:
```
npm test
```

Amostra de código

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

Angular 2 (ngx-translate)

Pré-requisitos

inscrever-se para uma conta do 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 do 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 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, 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

Esta aplicação de demonstração apresenta uma integração do In-context Editor com Angular e ngx-translate.

Ruby on Rails (i18n)

Nota

Esta biblioteca pode não funcionar imediatamente para navegadores mais antigos ou Microsoft IE11. Adicionar Babel ao pipeline de compilação se esses navegadores precisarem ser suportados.

Pré-requisitos

inscrever-se para uma conta do 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 a versão mais recente e melhor:
```
bundle && gem build
```
Criar o arquivo de inicialização 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.

O ID da conta é encontrado nas configurações da organização do Strings.
Adicionar o snippet Ruby ao layout da aplicação app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Adicionar a seguinte configurações 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, 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 a aplicação em qualquer navegador web para ver o In-context Editor aplicado à aplicação. Entre com qualquer usuário da organização Phrase.

Amostra de código

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

Django

Pré-requisitos

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

Instalar o pacote django-phrase com pip:
```
$ pip install django-phrase
```
Adicionar Phrase à lista de aplicações instaladas:
```
INSTALLED_APPS = (

    'phrase',

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

Adicionar a seguinte configurações a settings.py:

    # Phrase In-Context Editor settings
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Set your own account id
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Set your own project id
    PHRASE_DATACENTER = "eu"  # Choose your datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

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

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

Abrir a aplicação em qualquer navegador web para ver o In-context Editor aplicado à aplicação. 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 do Phrase Strings.
Usar 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 In-context Editor neste ambiente, siga estas etapas:

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

Adicionar a seguinte configurações à aplicação 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)

Adicionar o snippet JavaScript da Phrase ao arquivo de layout base com o seguinte código (ele deve ir dentro da seção do 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 do 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

Este aplicativo demo demonstra como integrar o In-context Editor com um aplicativo Flask.

Symfony 5.x

Pré-requisitos

inscrever-se para uma conta do Phrase Strings.
Usar o framework Symfony para PHP.

Nota

A versão 2.0.0 oferece suporte ao 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 adequadamente.

Ajuste config/services.yaml para decorar o serviço 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>

O aplicativo Symfony agora está conectado 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 do 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 o aplicativo e faça login com as credenciais da Phrase para iniciar o processo de tradução diretamente na página da web.

Amostra de código

Este aplicativo demo demonstra como integrar o In-context Editor com um aplicativo Symfony.

Configurando o In-context Editor

Expondo nomes de chave

Tipicamente, 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 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 esta formatação 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 helper translate() para expor nomes de chave no formato exigido:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Dependendo do framework, os helpers de tradução no código podem ser sobrescritos 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

Garanta que os nomes de chave sejam convertidos para um formato reconhecível.

Caracteres na lista a seguir 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 caixa

Por padrão, o analisador de documento do In-context 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 no In-context Editor, desabilite o recurso de minúsculas automático:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar decoradores de chave

Ao usar o In-context Editor, os nomes de chave são normalmente 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 phraseapp-in-context-editor-ruby gem 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.

Ativando e desabilitando o In-context Editor

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

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

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

PhraseApp::InContextEditor.enabled = true|false

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

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

Reparsing completo

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

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

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, adicionar 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 da 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 editor de documento 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 de minúsculas automático:
```
let config = {
  // ...
  autoLowercase: false
}
```

Adicionar estes snippets 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 In-context Editor com Angular e ngx-translate.

AngularJS (angular-translate)

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

Instale angular-phrase via Bower (ou download manualmente):
```
$ bower install angular-phrase
```
Adicionar 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.
Adicionar a diretiva phrase-javascript à aplicação dentro da tag <head>:
```
<phrase-javascript></phrase-javascript>
```
Abra a aplicação em qualquer navegador web para ver o In-context Editor aplicado ao aplicativo. entrar com qualquer usuário da organização Phrase.

angular-phrase no GitHub

Amostra de código

Esta aplicação demo 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 a tag 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 snippet 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 aplicativo. entrar com qualquer usuário da organização Phrase.

Código do adaptador Django no GitHub

Amostra de código

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

React (intl)

Nota

Esta biblioteca pode não trabalho com o IE11 ou navegadores mais antigos. Adicionar Babel ao pipeline de build 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 build 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 snippet 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 alterar o texto original de react-intl para react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Executar testes unitários usando jest:
```
npm test
```

Amostra de código

Este demo mostra uma integração do Phrase In-context Editor 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 do 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 access tokens no perfil configurações 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 do seu aplicativo 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 aplicativo. entrar 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 Phrase In-context Editor com react-i18next.

Spring

Para instalar o In-context Editor 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, 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 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 entrar com as credenciais de usuário do 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 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();

Substituir 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 snippet 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 aplicativo. entrar 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 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);

Substituir 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 snippet 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 aplicativo. entrar 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 suporta todas as versões do Vue I18n 8.17.5 e mais recentes. Esta biblioteca pode trabalho 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 estes passos:

Instale 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 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 a 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 suporta 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 graves 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çando 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.

Chaves podem ser Excluir de serem renderizadas com o In-context Editor. 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 manipuladas automaticamente pela gem phraseapp-in-context-editor-ruby, adicionar 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 serão renderizadas normalmente.