Editor em contexto (Strings)

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

Disponível a partir de

Planos Team, Professional, Business e Enterprise

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

Disponível a partir de

Plano Avançado e Enterprise (legado)

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

O Editor em contexto foi projetado para Ajuda tradutores a fazer as coisas com mais eficiência e traduzir uma página de site por meio da integração direta com o Strings editor de tradução.

Atualmente, há duas versões disponíveis:

O Editor em contexto:

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

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

Instalar o Strings Editor em contexto

Requisitos

Para usar o Editor em contexto, o aplicativo requer:

Sítios Web, aplicativos Web, sites móveis, etc.
Os tradutores podem acessar o servidor web que executa o editor. Se necessário, pode ser um ambiente local.
Uma estrutura de arquivo de localização de valor-chave.

Web sites com Strings traduzíveis extraídos e uma camada de visualização que usa uma estrutura de chave-valor para renderizar traduções.
Nomes de chaves expostas à camada de visualização ou modelo.
Fragmento JavaScript que renderiza o editor.
Idealmente, um ambiente dedicado para traduções. Pode ser um clonar de um ambiente de apresentação e, embora tenha mais trabalho de configurar inicialmente, fornece um melhor fluxo de fluxo de trabalho e mais estabilidade.

Se um ambiente dedicado não for possível, um ambiente de teste existente poderá ser usado com a opção de ativar o Editor em contexto quando necessário.

JavaScript Snippet

Inclua o trecho JavaScript no layout do aplicativo.

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

Comunica com a Phrase Strings API.
Renderir a interface do usuário.
Fornecer login.

O ID do projeto está nas configurações do projeto.

O ID da conta está nas configurações da organização Strings.

Amostra:

<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://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js"></script>

Instalações de Framework da Web

i18next

Nota

O i18next phrase Editor em contexto Post Processor aceita todas as versões i18next mais recentes do que 19.5.1. Embora esta biblioteca possa trabalhar com versões anteriores também, elas não são aceitas oficialmente e podem não receber atualizações específicas ou correções de erros.

Para instalar o Editor em contexto neste ambiente, execute estas etapas:

Instale a biblioteca i18next-phrase-in-context-editor-postprocessor com o gerente de pacotes preferencial:

# 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 por meio de CDN:

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

Bootstrap (amostra):

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

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // load some translations from i18next-gitbook repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // do something on i18next initialization
    });

Para integrar a biblioteca:

Importe PhraseInContextEditorPostProcessor da biblioteca i18next-phrase-in-context-editor-post-processor.
Criar nova instância i18next phrase Editor em contexto Post Processor, passando PhraseConfig como argumento.
Passe a instância do editor em contexto post processador i18next recém-criada ao método de usar i18next.
Adicionar phraseInContextEditor string à propriedade do array postProcess (passada dentro do objeto de configuração do método i18next inicial).

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

Trecho da amostra:

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

Nota

É necessário fornecer accountId para configuração do ICE. O ID da conta está nas configurações da organização Strings.

Se necessário, configure o atributo OldICE para mudar para o antigo ICE:

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

Comece o Editor em contexto.
Abra o aplicativo em um navegador da web para mostrar o Editor em contexto. entrar com qualquer usuário do phrase da organização.

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

Vue I18n

Nota

O Vue I18n phrase Editor em contexto aceita todas as versões do Vue I18n 8.17.5 e superiores. Esta biblioteca pode trabalhar com versões anteriores, mas elas não são aceitas oficialmente e não receberão atualizações específicas ou correções de erros.

Para instalar o Editor em contexto neste ambiente, execute estas etapas:

Instale o pacote mais recente com o gerente de pacotes preferencial:

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

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

ou carregue com CDN (registrar manualmente finestra['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 (amostra):

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

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      hello: 'Hello world!'
  }
});

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

Para integrar a biblioteca:

Importe a biblioteca Vue I18n phrase Editor em contexto.
Criar nova instância do Vue I18n Phrase Editor em contexto, passando a instância do Vue I18n como um primeiro argumento e Phrase Configurar como um segundo.

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

Reaccionar (intl)

Nota

Esta biblioteca pode não trabalhar com IE11 ou navegadores antigos. Adicione Babel ao pipeline de desenvolvimento se necessário suporte a navegadores antigos.

Esta biblioteca herda componentes comuns dos pacotes react-intl. Se o phrase for ativado chamando inicializarPhraseAppEditor, o comportamento dos componentes será alterado.

Para instalar o Editor em contexto neste ambiente, siga estes passos:

Instale o pacote mais recente por meio do NPM:
```
npm install react-intl-phraseapp
```
ou construir a partir do texto original:
```
npm run dist
```
```
npm install
```

Configuração:

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

O ID do projeto de um projeto está nas configurações do projeto.

O ID da conta está nas configurações da organização Strings.

Adicione o trecho ao aplicativo react:

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

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

initializePhraseAppEditor(config);

Encontre todas as importações de FormattedMessage e altere o texto original de react-intl para react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Executar testes de unidade usando jest:
```
npm test
```

Amostra de código

Esta demonstração mostra uma integração do phrase Editor em contexto com react-intl.

Angular 2 (ngx-translate)

Requisitos

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

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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

Configuração:

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

permitir configuração: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

O ID do projeto de um projeto está nas configurações do projeto.

O ID da conta está nas configurações da organização Strings.

Se necessário, configure o atributo OldICE para mudar para o antigo ICE:

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

initializePhraseAppEditor(config);

Se necessário, adicione os URLs específicos dos EUA para ativar o trabalho por meio do centro de dados dos EUA:

baseUrl: "https://us.app.phrase.com",
apiBaseUrl: 'https://api.us.app.phrase.com/api/v2',
oauthEndpointUrl: "https://api.us.app.phrase.com/api/v2/authorizations",
profileUrl: "https://us.app.phrase.com/settings/profile",

Por padrão, o analisador de documentos do editor converte todas as chaves para letra minúscula. Se tiver problemas com esse comportamento e quiser usar chaves com diferenciação de caso no editor, desabilite o recurso de letra minúscula automática:
```
let config = {
  // ...
  autoLowercase: false
}
```

Adicione estes trechos ao aplicativo Angular:

app.component.ts

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

permitir configuração: 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';


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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        Forneça: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Forneça: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Amostra de código

Este app de demonstração mostra uma integração do Editor em contexto com o Angular e o ngx-translate.

Ruby on Rails (i18n)

Nota

Esta biblioteca pode não trabalhar fora de Box para navegadores antigos ou Microsoft IE11. Adicione Babel ao pipeline de desenvolvimento se precisar de suporte a esses navegadores.

Requisitos

Inscreva-se para uma conta Phrase Strings.
Use a excelente joia i18n também usada por Rails.

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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 pacote
  
  Adicione ao Gemfile:
```
gem 'phraseapp-in-context-editor-ruby
```
- Crie diretamente do texto original para obter o mais recente e maior:
```
bundle && gem build
```
Criar o arquivo inicializador executando o gerador Rails:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
O ID do projeto de um projeto está nas configurações do projeto.

O ID da conta está nas configurações da organização Strings.
Adicione o trecho Ruby ao layout do aplicativo app/views//layouts/application.html.erb:
```
<%= load_in_context_editor %>
```

Adicione a seguinte configuração ao inicializador /config/initializers/phraseapp_in_context_editor.rb:

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

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

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

Abra o aplicativo em qualquer navegador para ver o Editor em contexto aplicado ao aplicativo. entrar com qualquer usuário do phrase da organização.

Amostra de código

Esta demonstração mostra uma integração do phrase Editor em contexto com react-i18next.

Django

Requisitos

Inscreva-se para uma conta Phrase Strings.
Use a estrutura 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 Editor em contexto neste ambiente, siga estes passos:

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

    'phrase',

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

Adicione a seguinte configuração às configurações.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 = "__}}"

O ID do projeto de um projeto está nas configurações do projeto.

O ID da conta está nas configurações da organização Strings.

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

Abra o aplicativo em qualquer navegador para ver o Editor em contexto aplicado ao aplicativo. entrar com qualquer usuário do phrase da organização.

Código do adaptador Django no GitHub

Amostra de código

Este aplicativo de demonstração demonstra como integrar o Editor em contexto com um aplicativo Django.

Flasco

Requisitos

Inscreva-se para uma conta Phrase Strings.
Use a estrutura Flask para Python.

Nota

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

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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

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

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

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

from flask import Flask, [...]
from flask_babel import Babel
from flask_phrase import Phrase, gettext, ngettext
app = Flask(__name__)
babel = Babel(app)
phrase = Phrase(app)

Adicione o trecho do phrase JavaScript ao arquivo de layout do base com o seguinte código (deve ficar dentro da seção do arquivo do modelo):

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "O ID DO SEU PROJETO",
        accountId: "O ID DA SUA CONTA",
        datacenter: "eu",
    };
    (function() {
        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 ID do projeto de um projeto está nas configurações do projeto.

O ID da conta está nas configurações da organização Strings.

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

window.PHRASEAPP_CONFIG = {
    projectId: "O ID DO SEU PROJETO",
    accountId: "O ID DA SUA CONTA",
    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 de gettext padrão de Flask-Babel.

Amostra de código

Este aplicativo de demonstração demonstra como integrar o Editor em contexto com um aplicativo Flask.

Symfony 5.x

Requisitos

Inscreva-se para uma conta Phrase Strings.
Use a estrutura Symfony para PHP.

Nota

A versão 2.0.0 é compatível com o Symfony 5 e superior. Se estiver usando o Symfony 2, 3 ou 4, consulte a versão antiga do ICE.

Para integrar o Editor em contexto com o aplicativo Symfony, execute estas etapas:

Copie PhraseStringsInContextEditor e seus conteúdos na pasta /src/Service do repositório ou na localização desejada. Se colocada em outro lugar, ajuste o espaço de nome de acordo.

Ajustar config/services.yaml para decorar o serviço tradutor com o adaptador do phrase:

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

Adicione o seguinte trecho JavaScript ao modelo de layout do glossário ou Twig entre os javascritos de {% %} de bloco para que o Editor em contexto possa ler a página 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://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

O aplicativo Symfony está agora conectado ao Editor em contexto.

O ID do projeto de um projeto está nas configurações do projeto.

O ID da conta está nas configurações da organização Strings.

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

window.PHRASEAPP_CONFIG = {
    projectId: "O ID DO SEU PROJETO",
    accountId: "O ID DA SUA CONTA",
    datacenter: "us",
};

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

Amostra de código

Este aplicativo de demonstração demonstra como integrar o Editor em contexto com um aplicativo Symfony.

Configuração do Editor em contexto

Exponendo nomes de chaves

Normalmente, uma camada de visualização renderiza traduções pasando o nome de uma string traduzível (p. ex. a chave) a algum ordenar de método de tradução ou assistente de visualização.

Exemplo de código PHP:

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

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

Formatação

Deve ser indicada no modelo para o qual as chaves devem 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 {{__phrase_page.headline__}} string.

Modifique o método de ajuda de traduzir() para expor nomes de chaves no formato necessário:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

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

Exemplo:

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

Nomes de chave escape e caracteres especiais

Certifique-se de que os nomes das chaves são convertidos em um formato reconhecível.

Os caracteres da seguinte lista precisam ser escapes quando expostos ao Editor em contexto:

Caractere	Escape sequence	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 caso

Por padrão, o analisador de documentos do Editor em contexto converte todas as chaves em letra minúscula. Se tiver problemas com esse comportamento e quiser usar chaves com diferenciação de caso no Editor em contexto, desabilite o recurso de letra minúscula automática:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

Personalizar decoradores de chave

Ao usar o Editor em contexto, os nomes das chaves são normalmente envoltos com decoradores (botas curly, como padrão) para gerar chaves de identificação exclusivas no contexto de um documento:

{{__phrase_YOUR.KEY__}}

Se isso causar conflitos com outras librarias (p.ex., mecanismos de modelo do cliente, incluindo AngularJS e Ember.js) que usam uma sintaxe semelhante, altere o prefixo e o sufixo do decorador do Editor em contexto na configuração. Para informar o Editor em contexto quais decoradores o investigador deve procurar, adicione os seguintes valores de configuração antes do trecho JavaScript:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

Se utilizar o joio phraseapp-in-context- editor- Ruby para fornecer a funcionalidade Editor em contexto, certifique-se de que os decoradores estão configurados:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

Habilitando e desabilitando o Editor em contexto

Esta configuração só está disponível quando estiver usando a joia phraseapp-in-context-editor- Ruby.

O Editor em contexto está desativado como padrão.

O Editor em contexto pode ser explicitamente habilitado ou desabilitado. Isso afeta a inclusão do trecho JavaScript (quando você usa o assistente de visualização) e a renderização dos nomes de chave decorados em exibições:

PhraseApp::InContextEditor.enabled = true|false

Exemplo de vincular a marca a uma variável do ambiente:

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

Reposição integral

Ative fullReparse seusar o Editor em contexto com uma estrutura JavaScript que usa DOM virtual como React. Isso permite que o reparso adequado quando as alterações do DOM forem detectadas:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Sanitar saída para a página Web

O Editor em contexto pode ser configurado para escapar ou alterar traduções antes de serem inseridas na página web, fornecendo uma função à propriedade de sanitar.

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 o logon único e quiser inicializar o Editor em contexto com Logon único habilitado, adicione o seguinte valor de configuração antes do trecho JavaScript:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

Old Editor em contexto: Configuração

Instalações de framework

Angular 2 (ngx-translate)

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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

Configuração:

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

O ID do projeto de um projeto está nas configurações do projeto.

Por padrão, o analisador de documentos do editor converte todas as chaves para letra minúscula. Se tiver problemas com esse comportamento e quiser usar chaves com diferenciação de caso no editor, desabilite o recurso de letra minúscula automática:
```
let config = {
  // ...
  autoLowercase: false
}
```

Adicione estes trechos ao aplicativo Angular:

app.component.ts

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

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

initializePhraseAppEditor(config);

app.module.ts

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        Forneça: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        Forneça: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Amostra de código

Este app de demonstração mostra uma integração do Editor em contexto com o Angular e o ngx-translate.

AngularJS (angular-translate)

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
O ID do projeto de um projeto está 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 do código <head>:
```
<phrase-javascript></phrase-javascript>
```
Abra o aplicativo em qualquer navegador para ver o Editor em contexto aplicado ao aplicativo. entrar com qualquer usuário do phrase da organização.

Phrase no GitHub

Amostra de código

Este aplicativo de demonstração para o Phrase angular mostra como localizar o AngularJS com o Phrase angular.

Django

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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

    'phrase',

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

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

Phrase_ENABLED = TruePhrase_PROJECT_ID = 'YOUR_PROJECT_ID'PHRASE_PREFIX = '{{__'PHRASE_SUFFIX = '__}}'

Abra o aplicativo em qualquer navegador para ver o Editor em contexto aplicado ao aplicativo. entrar com qualquer usuário do phrase da organização.

Código do adaptador Django no GitHub

Amostra de código

Este aplicativo de demonstração demonstra como integrar o Editor em contexto com um aplicativo Django.

Reaccionar (intl)

Nota

Esta biblioteca pode não trabalhar com IE11 ou navegadores antigos. Adicione Babel ao pipeline de desenvolvimento se necessário suporte a navegadores antigos.

Esta biblioteca herda componentes comuns dos pacotes react-intl. Se o phrase for ativado chamando inicializarPhraseAppEditor, o comportamento dos componentes será alterado.

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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

Configuração:

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

O ID do projeto de um projeto está nas configurações do projeto.

Adicione o trecho ao aplicativo react:

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

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

initializePhraseAppEditor(config);

Encontre todas as importações de FormattedMessage e altere o texto original de react-intl para react-intl-phraseapp.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
Executar testes de unidade usando jest:
```
npm test
```

Amostra de código

Esta demonstração mostra uma integração do phrase Editor em contexto com react-intl.

Ruby on Rails (i18n)

Para instalar o Editor em contexto neste ambiente, siga estes passos:

Adicione o joio phraseapp-in-context-editor-ruby ao ambiente que você deseja usar o Editor em contexto com:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
e instalá-lo executando o comando do pacote:
```
$ bundle install
```
Instale o gem phraseapp-in-context- editor- Ruby executando o gerador Rails:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

Crie e gerencie tokens de acesso nas Configurações do perfil ou por meio da API de autorizações.

--project-id

O ID do projeto de um projeto está nas configurações do projeto. Isso cria um arquivo de inicialização com algumas opções de configuração.
Adicione o trecho JavaScript ao seu layout do aplicativo dentro do código <head> usando o ajudante phraseapp_in_context_editor_js:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
Abra o aplicativo em qualquer navegador para ver o Editor em contexto aplicado ao aplicativo. entrar com qualquer usuário do phrase da organização.
Desabilitar Turbolinks (se usado)

O Turbolinks remove todos os elementos de interface do Editor em contexto da página em cada pull da página.

Adicione o atributo data-no-turbolink ao código <body>:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

Amostra de código

Esta demonstração mostra uma integração do phrase Editor em contexto com react-i18next.

Abril

Para instalar o Editor em contexto neste ambiente, siga estes passos:

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

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

Forneça o ajudante JavaScript necessário nos modelos expondo o ajudante como um feijão:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

Adicione o código <script> aos modelos dentro do código de <head> de cada página:

<head>

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

</head>

Reinicie o aplicativo e faça entrar crecredenciaisuário do phrase.

Exemplo de código do texto original do aplicativo no GitHub

Como localizar aplicativos de primavera como um profissional

Paquete de Spring Boot Starter (fornecido por ePages)

Symfony 2.x

Para instalar o Editor em contexto neste ambiente, siga estes passos:

Criar um novo ambiente no qual o Editor em contexto será executado. No exemplo, o novo ambiente é nomeado tradução.

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

Substitui o método de tradução padrão para pedido para expor os nomes das chaves ao Editor em contexto:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

Adicione o trecho JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador para ver o Editor em contexto aplicado ao aplicativo. entrar com qualquer usuário do phrase da organização.

Documentação de tradução Symfony

Código do adaptador Symfony 2.x no GitHub

Symfony 3.x

Para instalar o Editor em contexto neste ambiente, siga estes passos:

Criar um novo ambiente no qual o Editor em contexto será executado. No exemplo, o novo ambiente é nomeado tradução.

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

imports:

   - { resource: config.yml }
```

Criar 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);

Substitui o método de tradução padrão para pedido para expor os nomes das chaves ao Editor em contexto:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

Certifique-se de que a classe sempre é substituída quando o pacote é usado com um passe do compilador:

# src/AppBundle/DependencyInjection/Compiler/OverrideServiceCompilerPass.php

<?php

namespace AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

use Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   public function process(ContainerBuilder $container)

   {

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

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

   }

}

Se usar passes de compilador separados, registre-os no método build () da classe pacote:

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

class AppBundle extends Bundle

{

   public function build(ContainerBuilder $container)

   {

       parent::build($container);

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

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

       };

   }

}

Adicione o trecho JavaScript ao layout:

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

Abra o aplicativo em qualquer navegador para ver o Editor em contexto aplicado ao aplicativo. entrar com qualquer usuário do phrase da organização.

Documentação de tradução Symfony

Vue I18n

Nota

Para instalar o Editor em contexto neste ambiente, execute estas etapas:

Instale o pacote com o gerente de pacotes preferencial:

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

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

ou carregue com CDN (registrar manualmente finestra['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 (amostra):

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

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      hello: 'Hello world!'
  }
});

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

Para integrar a biblioteca:

Importe a biblioteca Vue I18n phrase Editor em contexto.
Criar nova instância do Vue I18n Phrase Editor em contexto, passando a instância do Vue I18n como um primeiro argumento e Phrase Configurar como um segundo.

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

Usar o Editor em contexto antigo

Modo Ajax

O Editor em contexto aceita a manipulação de Ajax e DOM (p. ex. via JavaScript) usando observadores de mutação.

O modo Ajax pode causar problemas em alguns casos e pode causar problemas graves de desempenho ao usar o Editor em contexto. Para desabilitar o modo Ajax, adicione o seguinte valor de configuração antes do trecho JavaScript:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

Modo de debug

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

Forçar um local

Para definir um local específico explicitamente ao iniciar o Editor em contexto, use a configuração forceLocale. Isso também é útil para selecionar o local exibido atualmente em seu aplicativo web no Editor em contexto:

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

Chaves ignoradas

Esta configuração só está disponível quando estiver usando a joia phraseapp-in-context-editor- Ruby.

As chaves podem ser excluídas da renderização com o Editor em contexto. Ao trabalhar com Rails, chaves podem ser ignoradas em relação a dados como mensagens de Error ou chaves de formato de data e hora. Para excluir chaves de serem processadas automaticamente pelo gem phraseapp-in-context- editor- Ruby, adicione uma matriz de chaves ao arquivo de inicialização phraseapp_in_context_ editor.rb. Caracteres-curinga também podem ser usados:

PhraseApp::InContextEditor.configure do |config|

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

end

As chaves correspondentes a qualquer um destes padrões não serão acessíveis ao Editor em contexto e serão reproduzidas normalmente.