Editor de contexto interno (cadeias de caracteres)

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

Entre em contato com o departamento de vendas para dúvidas sobre licenciamento.

Disponível para

Plano Avançado e Enterprise (Legado)

Entre em contato com o departamento de vendas para dúvidas sobre licenciamento.

O editor In-Context foi projetado para ajudar os tradutores a fazer as coisas com mais eficiência e traduzir uma página do site por meio da integração direta com o editor de tradução Strings.

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

O editor de contexto:

Inclui novas funcionalidades (visualização multilíngue, opções de layout, ações em lote, recursos de colaboração, etc.) e interface do usuário do editor de tradução.
O editor de contexto interno antigo.

Depois de instalar o editor In-Context, ele pode ser personalizado para trabalhar com muitas tecnologias.

Instalando o Editor de contexto interno de cadeias de caracteres

Requisitos

Para usar o editor de 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. Este pode ser um ambiente local, se necessário.
Uma estrutura de arquivo de localização chave-valor.

Sites com cadeias de caracteres traduzíveis extraídas e uma camada de exibição que usa uma estrutura chave-valor para renderizar traduções.
Nomes de chave expostos à camada de exibição ou modelo.
Trecho de JavaScript que renderiza o editor.
Idealmente, um ambiente dedicado para traduções. Isso pode ser um clone de um ambiente de preparo e, embora mais trabalho para configurar inicialmente, fornece um fluxo de trabalho melhor e mais estabilidade.

Se um ambiente dedicado não for possível, um ambiente de preparo existente poderá ser usado com a opção de habilitar o Editor de contexto interno, conforme necessário.

JavaScript Snippet

Inclua o trecho JavaScript no layout do aplicativo.

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

Comunique-se com a API Phrase Strings.
Renderize a interface do usuário.
Forneça login.

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

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

Amostra:

<script type="text/javascript">
    janela. PHRASEAPP_CONFIG={ // Não altere este nome para que a configuração funcione
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Definir como 'us' para data center dos EUA
      prefixo: '{{__', // Defina como o prefixo para o formato de chave nos modelos de exibição
      sufixo: '__}}', // Defina como o sufixo para o formato de chave nos modelos de exibição
      disableShortcuts: false, // Defina como true para desativar os atalhos de teclado
      autoLowermin: true, // Defina como false se as chaves contiverem letras maiúsculas
    };
  </script>
  <script type="module" async="" src="https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js"></script>

Instalações do Web Framework

i18next

Nota

O i18next Phrase In-Context Editor Post Processor suporta todas as versões do i18next mais recentes que a 19.5.1. Embora essa biblioteca também possa funcionar com versões anteriores, elas não são oficialmente suportadas e podem não receber atualizações específicas ou correções de bugs.

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

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

# fios
yarn adicionar i18next-phrase-in-context-editor-post-processor

# npm
npm instalar 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):

importar i18next de 'i18next';
importar i18nextXHRBackend de 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        Depurar: verdadeiro,
        ns: ['especial', 'comum'],
        defaultNS: 'especial',
        Back-end: {
            carregar algumas traduções do repositório i18next-gitbook
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, função(err, t) {
        Fazer algo na inicialização do i18Next
    });

Para integrar a biblioteca:

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

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

Exemplo de trecho:

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

Nota

accountId deve ser fornecido para configurar o ICE com êxito. 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 de contexto.
Abra o aplicativo em um navegador da Web para exibir o editor de contexto interno. Entre com qualquer usuário da organização Phrase.

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

Vue I18n

Nota

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

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

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

# fios
yarn adicionar vue-i18n-phrase-in-context-editor

# npm
npm instalar 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):

importar Vue de 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  Localidade: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  mensagens: {
      Olá: 'Olá mundo!'
  }
});

novo Vue({
  i18n,
  renderização: h => h (App)
}).$mount('#app');

Para integrar a biblioteca:

Importe a biblioteca do Editor de contexto de frase do Vue I18n.
Crie uma nova instância do Editor de contexto de frase I18n do Vue, passando a instância do Vue I18n como um primeiro argumento e a configuração da frase como um segundo.

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

Reagir (intl)

Nota

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

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

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

Instale o pacote mais recente via NPM:
```
npm install react-intl-phraseapp
```
ou compilar a partir do código-fonte:
```
npm executar dist
```
```
Instalação do npm
```

Configurar:

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

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

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

Adicione o snippet ao aplicativo react:

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

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

initializePhraseAppEditor(config);

Localize todas as importações de FormattedMessage e altere a origem de react-intl para react-intl-phraseapp.
```
importar {FormattedMessage} de 'react-intl-phraseapp'
```
Execute testes de unidade usando jest:
```
Teste npm
```

Exemplo de código

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

Angular 2 (ngx-traduzir)

Pré-requisitos

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

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

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

Configurar:

import { initializePhraseAppEditor, PhraseConfig } from 'ngx-translate-phraseapp';

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

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

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

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

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

initializePhraseAppEditor(config);

Se necessário, adicione as URLs específicas dos EUA para habilitar o trabalho por meio do data center 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 em minúsculas. Se tiver problemas com esse comportamento e quiser usar chaves que diferenciam maiúsculas de minúsculas no editor, desative o recurso automático de minúsculas:
```
let config = {
  // ...
  autoLowermin: false
}
```

Adicione estes trechos ao aplicativo Angular:

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} de 'ngx-translate-phraseapp'

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

initializePhraseAppEditor(config);

app.module.ts

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


função de exportação HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  Declarações: [
    AppComponent
  ],
  importações: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      carregador: {
        fornecer: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compilador: {
        fornecer: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  provedores: [],
  bootstrap: [AppComponent]
})

Exemplo de código

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

Rubi sobre Trilhos (i18n)

Nota

Essa biblioteca pode não funcionar pronta para uso para navegadores mais antigos ou para o Microsoft IE11. Adicione Babel ao pipeline de compilação se esses navegadores precisarem ser suportados.

Pré-requisitos

Inscreva-se em uma conta Phrase Strings.
Use a excelente gema i18n também usada pela Rails.

Para instalar o editor de contexto interno neste ambiente, execute 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-o ao Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Crie diretamente do código fonte para obter o que há de mais recente e melhor:
```
bundle && compilação de gemas
```
Crie o arquivo inicializador executando o gerador do Rails:
```
rails geram phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
A ID do projeto de um projeto é encontrada nas configurações do projeto.

A ID da conta é encontrada nas configurações da organização Strings.
Adicione o snippet Ruby ao aplicativo de layout do aplicativo/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 data center dos EUA para habilitar o trabalho com pontos de extremidade dos EUA:

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

Abra o aplicativo em qualquer navegador da Web para ver o editor de contexto aplicado ao aplicativo. Entre com qualquer usuário da organização Phrase.

Exemplo de código

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

Django

Pré-requisitos

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

Nota

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

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

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

    «frase»,

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

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

    # Configurações do Editor de contexto de frase
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID" # Defina seu próprio ID de conta
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID" # Defina sua própria ID do projeto
    PHRASE_DATACENTER = "eu" # Escolha seu datacenter 'eu' | 'nós'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

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

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

Abra o aplicativo em qualquer navegador da Web para ver o editor de contexto aplicado ao aplicativo. Entre com qualquer usuário da organização Phrase.

Código do adaptador Django no GitHub

Exemplo de código

Este aplicativo de demonstração demonstra como integrar o editor In-Context com um aplicativo Django.

Frasco

Pré-requisitos

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

Nota

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

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

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

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

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

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

de flask de importação de frasco, [...]
de flask_babel importar Babel
de flask_phrase importar Frase, gettext, ngettext
app = Flask(__name__)
babel = Babel(app)
frase = Frase(app)

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

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "YOUR-PROJECT-ID",
        accountId: "YOUR-ACCOUNT-ID",
        datacenter: "eu",
    };
    (função() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

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

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

Se necessário, defina o data center dos EUA para habilitar o trabalho com pontos de extremidade 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 possa ler. Quando definido como False, ele retornará às funções gettext padrão do Flask-Babel .

Exemplo de código

Este aplicativo de demonstração demonstra como integrar o editor In-Context com um aplicativo Flask.

Symfony 5.x

Pré-requisitos

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

Nota

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

Para integrar o editor de contexto com o aplicativo Symfony, execute estas etapas:

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

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

Serviços:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decodifica: tradutor

Adicione o seguinte trecho JavaScript ao modelo de layout base ou Twig entre os javascripts de bloco {% %} para que o Editor de contexto interno possa ler a página da Web:

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        Datacenter: «UE»,
        origem: «frase-symfony»,
    };
    (função() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

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

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

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

Se necessário, defina o data center dos EUA para habilitar o trabalho com pontos de extremidade dos EUA:

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

Recarregue o aplicativo e faça login com credenciais de frase para iniciar o processo de tradução diretamente na página da Web.

Exemplo de código

Este aplicativo de demonstração demonstra como integrar o editor In-Context com um aplicativo Symfony.

Configurando o Editor de contexto

Expondo nomes de chaves

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

Código PHP de exemplo:

$translations = array(

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

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

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

)

função translate($keyName) {

  return $translations[$keyName];

}

O modelo renderizaria a saída do método translate() em vez da cadeia de caracteres traduzida real:

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

Formatação

Deve ser indicado no modelo para 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 modelo, renderize a cadeia de caracteres {{__phrase_page.headline__}}.

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

função translate($keyName) {

  se ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

Dependendo da estrutura, os auxiliares de tradução no código podem ser substituídos ou uma versão encapsulada pode ser criada para uso em modelos.

Exemplo:

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

Escapando de nomes de chave e caracteres especiais

Verifique se os nomes das chaves são convertidos em um formato reconhecível.

Os caracteres na lista a seguir precisam ser escapados quando expostos ao Editor de contexto interno:

Caractere	Sequência de fuga	Exemplo
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} Fica {{__phrase__key[[[[[[html_open]]]]]]__}}
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} Fica {{__phrase__[[[[[[html_close]]]]]]key__}}

Conversão automática de casos

Por padrão, o analisador de documentos do editor de contexto interno converte todas as chaves em minúsculas. Se tiver problemas com esse comportamento e quiser usar chaves que diferenciam maiúsculas de minúsculas no Editor de contexto interno, desabilite o recurso automático de minúsculas:

window.PHRASEAPP_CONFIG = {

  autoLowermin: false

}

Personalize os principais decoradores

Ao usar o editor In-Context, os nomes de chave são normalmente encapsulados com decoradores (chaves, por padrão) para gerar chaves de identificação exclusivas no 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 editor de contexto na configuração. Para informar ao editor de contexto interno quais decoradores o analisador deve procurar, adicione os seguintes valores de configuração antes do trecho 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 editor In-Context, verifique se os decoradores estão configurados:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

fim

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

Habilitando e desabilitando o Editor de contexto interno

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

O editor de contexto interno está desabilitado por padrão.

O editor de contexto interno pode ser explicitamente habilitado ou desabilitado. Isso afeta a inclusão do snippet JavaScript (ao usar o auxiliar de exibição) e a renderização dos nomes de chave decorados em modos de exibição:

PhraseApp::InContextEditor.enabled = true|false

Exemplo de vinculação do sinalizador a uma variável de ambiente:

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

Reparação Completa

Habilite o fullReparse se estiver usando o editor In-Context com uma estrutura JavaScript que usa o DOM Virtual, como o React. Isso permite o reparo adequado quando alterações no DOM são detectadas:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Higienizar a saída para a página da Web

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

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

importar fuga de "lodash/escape";

window.PHRASEAPP_CONFIG = {  

    Higienizar: Escapar

}

Logon único

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

window.PHRASEAPP_CONFIG = {

  sso: {

    habilitado: true,
    
    fornecedor: 'saml',

    Identificador: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    imposto: verdadeiro

  }

}

Editor de contexto antigo no local: Configuração

Instalações do Web Framework

Angular 2 (ngx-traduzir)

Para instalar o editor de contexto interno neste ambiente, execute 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 do projeto de um projeto é encontrada nas configurações do projeto.

Por padrão, o analisador de documentos do editor converte todas as chaves em minúsculas. Se tiver problemas com esse comportamento e quiser usar chaves que diferenciam maiúsculas de minúsculas no editor, desative o recurso automático de minúsculas:
```
let config = {
  // ...
  autoLowermin: false
}
```

Adicione estes trechos ao aplicativo Angular:

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler} de 'ngx-translate-phraseapp'

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

initializePhraseAppEditor(config);

app.module.ts

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

função de exportação HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  Declarações: [
    AppComponent
  ],
  importações: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      carregador: {
        fornecer: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compilador: {
        fornecer: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  provedores: [],
  bootstrap: [AppComponent]
})

Exemplo de código

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

AngularJS (angular-translate)

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

Instale angular-phrase via Bower (ou faça o download manualmente):
```
$ bower instalar angular-frase
```
Adicione o módulo angular-phrase ao aplicativo AngularJS existente depois de carregar o módulo angular-translation:
```
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 do projeto de um projeto é encontrada nas configurações do projeto. Isso cria um arquivo de inicialização com algumas opções de configuração.
Adicione a diretiva phrase-javascript ao aplicativo dentro da tag <head> :
```
<phrase-javascript></phrase-javascript>
```
Abra o aplicativo em qualquer navegador da Web para ver o editor de contexto aplicado ao aplicativo. Entre com qualquer usuário da organização Phrase.

frase angular no GitHub

Exemplo de código

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

Django

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

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

    «frase»,

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

Configure o Editor de contexto interno para o projeto com estas opções:

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

Abra o aplicativo em qualquer navegador da Web para ver o editor de contexto aplicado ao aplicativo. Entre com qualquer usuário da organização Phrase.

Código do adaptador Django no GitHub

Exemplo de código

Este aplicativo de demonstração demonstra como integrar o editor In-Context com um aplicativo Django.

Reagir (intl)

Nota

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

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

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

Instale o pacote via NPM:

npm install react-intl-phraseapp

ou compilar a partir do código-fonte:

npm executar dist

Instalação do npm

Configurar:

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

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

Adicione o snippet ao aplicativo react:

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

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

initializePhraseAppEditor(config);

Localize todas as importações de FormattedMessage e altere a origem de react-intl para react-intl-phraseapp.
```
importar {FormattedMessage} de 'react-intl-phraseapp'
```
Execute testes de unidade usando jest:
```
Teste npm
```

Exemplo de código

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

Rubi sobre Trilhos (i18n)

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

Adicione a gem phraseapp-in-context-editor-ruby ao ambiente que você deseja usar o Editor de contexto interno com:
```
Grupo :d Desenvolvimento do
  gem 'phraseapp-in-context-editor-ruby'
 fim
```
e instale-o executando o comando bundle:
```
$ pacote instalar
```
Instale o gem phraseapp-in-context-editor-ruby executando o gerador Rails:
```
$ bundle exec rails geram phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

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

--project-id

A ID do projeto 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 snippet JavaScript ao layout do aplicativo dentro da tag <head> usando o auxiliar phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Abra o aplicativo em qualquer navegador da Web para ver o editor de contexto aplicado ao aplicativo. Entre com qualquer usuário da organização Phrase.
Desativar Turbolinks (se usado)

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

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

Exemplo de código

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

Spring

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

Verifique se o pacote com.phraseapp.incontexteditor está disponível no aplicativo.
Defina a ID de projeto correta e ajuste os outros parâmetros em PhraseAppConfiguration.class.

Para renderizar todas as traduções por meio de Frase, adicione o bean ao aplicativo:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Forneça o auxiliar JavaScript necessário nos modelos expondo o auxiliar como um bean:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Adicione a tag <script> aos seus modelos dentro da tag <cabeçalho> de cada página:

<head>

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

</head>

Reinicie o aplicativo e entre com credenciais de usuário de frase.

Exemplo de código-fonte do aplicativo no GitHub

Como localizar aplicativos Spring como um profissional

Pacote inicial do Spring Boot (fornecido pelo ePages)

Symfony 2.x

Para instalar o editor de contexto interno neste ambiente, execute estas etapas:

Crie um novo ambiente no qual o editor de contexto interno será executado. No exemplo, o novo ambiente é chamado de tradução.

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

Importações:

    - { recurso: config.yml }

Parâmetros:

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

Crie um controlador para tornar o navegador do ambiente acessível:

# 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 de contexto interno:

# Acme/YourBundle/Tradução/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

classe PhraseTranslator estende BaseTranslator

{

    função pública trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

    {

        $prefix = "";

        se (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            Retornar valores traduzidos para o domínio 'rotas'

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

        } else {

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

            return $prefix.$id.$suffix;

        }

    }

}

Adicione o trecho JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador da Web para ver o editor de contexto aplicado ao aplicativo. 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 de contexto interno neste ambiente, execute estas etapas:

Crie um novo ambiente no qual o editor de contexto interno será executado. No exemplo, o novo ambiente é chamado de tradução.

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

Importações:

   - { recurso: config.yml }
```

Crie um controlador para tornar o navegador do ambiente acessível:

# 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 de contexto interno:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

classe PhraseTranslator estende BaseTranslator

{

   função pública trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

       ID de retorno da chave de tradução com pre e sufixo para PhraseApp

       return $prefix.$id.$suffix;

   }

}

Certifique-se de que a classe seja sempre substituída quando o pacote for usado com um passo 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

{

   processo de função pública(ContainerBuilder $container)

   {

       $definition = $container->getDefinition('translator.default');

       $definition->setClass('AppBundle\Translation\PhraseTranslator');

   }

}

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

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

classe AppBundle estende Bundle

{

   compilação de função pública(ContainerBuilder $container)

   {

       parent::build($container);

       if($container->getParameter("kernel.environment") == 'translation') {

           $container->addCompilerPass(new OverrideServiceCompilerPass());

       };

   }

}

Adicione o trecho JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador da Web para ver o editor de contexto aplicado ao aplicativo. 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 suporta todas as versões 8.17.5 e mais recentes do Vue I18n. 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 editor de contexto interno neste ambiente, execute estas etapas:

Instale o pacote com o gerenciador de pacotes preferido:

# fios
yarn adicionar vue-i18n-phrase-in-context-editor

# npm
npm instalar 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):

importar Vue de 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  Localidade: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  mensagens: {
      Olá: 'Olá mundo!'
  }
});

novo Vue({
  i18n,
  renderização: h => h (App)
}).$mount('#app');

Para integrar a biblioteca:

Importe a biblioteca do Editor de contexto de frase do Vue I18n.
Crie uma nova instância do Editor de contexto de frase I18n do Vue, passando a instância do Vue I18n como um primeiro argumento e a configuração da frase como um segundo.

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

Usando o Editor de contexto antigo

Modo Ajax

O In-Context Editor suporta manipulação de Ajax e 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 editor de contexto interno. Para desativar o modo Ajax, adicione o seguinte valor de configuração antes do trecho JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modo de depuração

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

window.PHRASEAPP_CONFIG = {

  debugMode: verdadeiro

}

Forçando uma localidade

Para definir uma localidade específica explicitamente ao iniciar o editor In-Context, use a configuração forceLocale. Isso também é útil para pré-selecionar a localidade exibida atualmente em seu aplicativo Web no editor de contexto interno:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chaves ignoradas

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

As chaves podem ser excluídas de serem renderizadas com o editor In-Context. Ao trabalhar com o Rails, as chaves podem ser ignoradas para dados como mensagens de erro ou chaves de formato de data e hora. Para excluir que as chaves sejam manipuladas automaticamente pelo gem phraseapp-in-context-editor-ruby, 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*"]

fim

As chaves correspondentes a qualquer um desses padrões não serão disponibilizadas ao editor In-Context e serão renderizadas normalmente.