In-Context Editor (Strings)

컨텐츠는 영어 텍스트를 Phrase Language AI를 이용해 기계 번역한 것입니다.

사용 가능:

팀, 전문, 비즈니스, 기업 및 소프트웨어 UI/UX 계획

라이선스에 관한 질문은 영업팀에 문의하십시오.

사용 가능:

고급 및 Enterprise 요금제(레거시)

라이선스에 관한 질문은 영업팀에 문의하십시오.

In-Context 편집기는 번역가들이 더 효율적으로 작업을 수행하고 Strings 번역 편집기와의 직접 통합을 통해 웹사이트 페이지를 번역할 수 있도록 설계되었습니다.

현재 두 가지 버전이 제공됩니다:

In-Context 편집기:

새로운 기능(다국어 보기, 레이아웃 옵션, 일괄 작업, 협업 기능 등)과 번역 편집기의 UI를 포함합니다.
구형 In-Context 편집기.

In-Context 편집기를 설치한 후에는 여러 기술과 함께 작동하도록 사용자 정의할 수 있습니다.

Strings In-Context 편집기 설치하기

요구 사항

In-Context 편집기를 사용하려면 애플리케이션이 다음을 요구합니다:

웹 기반 웹사이트, 웹 애플리케이션, 모바일 사이트 등.
번역가는 편집기를 실행하는 웹 서버에 액세스할 수 있습니다. 필요한 경우 로컬 환경일 수 있습니다.
키-값 로컬라이제이션 파일 구조.

번역 가능한 문자열이 추출된 웹사이트와 번역을 렌더링하기 위해 키-값 구조를 사용하는 뷰 레이어.
뷰 또는 템플릿 레이어에 노출된 키 이름.
편집기를 렌더링하는 JavaScript 스니펫.
이상적으로는 번역을 위한 전용 환경. 이것은 스테이징 환경의 클론일 수 있으며, 초기 설정에 더 많은 작업이 필요하지만 더 나은 워크플로와 더 많은 안정성을 제공합니다.

전용 환경이 불가능한 경우, 필요에 따라 In-Context 편집기를 활성화할 수 있는 기존 스테이징 환경을 사용할 수 있습니다.

JavaScript Snippet

애플리케이션 레이아웃에 자바스크립트 스니펫을 포함하세요.

스니펫에는 다음을 수행하는 데 필요한 코드가 포함되어 있습니다:

문구 문자열 API와 통신합니다.
사용자 인터페이스를 렌더링합니다.
로그인을 제공합니다.

프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

계정 ID는 문자열 조직 설정에서 찾을 수 있습니다.

샘플:

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

웹 프레임워크 설치

i18next

참고

i18next 문구 인-컨텍스트 편집기 후처리는 19.5.1보다 최신의 모든 i18next 버전을 지원합니다. 이 라이브러리는 이전 버전에서도 작동할 수 있지만, 공식적으로 지원되지 않으며 특정 업데이트나 버그 수정이 제공되지 않을 수 있습니다.

이 환경에 인-컨텍스트 편집기를 설치하려면 다음 단계를 따르세요:

선호하는 패키지 관리자를 사용하여 i18next-phrase-in-context-editor-post-processor 라이브러리를 설치하세요:
```
# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor
```
참고

권장 라이브러리 버전은 1.4.0 이상입니다.

또는 CDN을 통해 로드하세요:
```
<script src="https://unpkg.com/i18next-phrase-in-context-editor-post-processor"></script>
```

부트스트랩 (샘플):

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

라이브러리를 통합하려면:

PhraseInContextEditorPostProcessor를 i18next-phrase-in-context-editor-post-processor 라이브러리에서 가져옵니다.
새로운 i18next Phrase In-Context Editor Post Processor 인스턴스를 생성하고 PhraseConfig를 인수로 전달합니다.
새로 생성된 i18next Phrase In-Context Editor Post Processor 인스턴스를 i18next use 메서드에 전달합니다.
phraseInContextEditor 문자열을 postProcess 배열 속성에 추가합니다 (i18next init 메서드의 구성 객체 내에서 전달됨).

설정에서 i18next 인스턴스에 ICE JavaScript 스니펫을 추가합니다.

샘플 스니펫:

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

참고

ICE를 성공적으로 설정하려면 accountId가 제공되어야 합니다. 계정 ID는 Strings 조직 설정에서 찾을 수 있습니다.

필요한 경우 useOldICE 속성을 구성하여 old ICE로 전환합니다:

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

In-Context 편집기를 시작합니다.
웹 브라우저에서 애플리케이션을 열어 In-Context 편집기를 표시합니다. 모든 Phrase 조직 사용자로 로그인합니다.

구성 옵션 및 샘플 메서드.

Vue I18n

참고

Vue I18n Phrase In-Context Editor는 모든 Vue I18n 버전 8.17.5 이상을 지원합니다. 이 라이브러리는 이전 버전에서도 작동할 수 있지만 공식적으로 지원되지 않으며 특정 업데이트나 버그 수정이 제공되지 않습니다.

이 환경에 인-컨텍스트 편집기를 설치하려면 다음 단계를 따르세요:

선호하는 패키지 관리자를 사용하여 최신 패키지를 설치합니다:

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

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

또는 CDN으로 로드(수동으로 등록 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>

부트스트랩 (샘플):

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: {
      안녕하세요: '안녕하세요, 세상! '
  }
});

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

라이브러리를 통합하려면:

Vue I18n Phrase In-Context Editor 라이브러리를 가져옵니다.
새로운 Vue I18n Phrase In-Context Editor 인스턴스를 생성하고, 첫 번째 인수로 Vue I18n 인스턴스를 전달하고, 두 번째로 Phrase Config를 전달합니다.

구성 옵션 및 샘플 메서드.

리액트 (intl)

참고

이 라이브러리는 IE11 또는 이전 브라우저와 호환되지 않을 수 있습니다. 구형 브라우저 지원이 필요한 경우 빌드 파이프라인에 Babel을 추가하십시오.

이 라이브러리는 react-intl 패키지의 공통 구성 요소를 상속합니다. Phrase가 initializePhraseAppEditor를 호출하여 활성화되면 구성 요소의 동작이 변경됩니다.

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

NPM을 통해 최신 패키지를 설치하십시오:
```
npm install react-intl-phraseapp
```
또는 소스에서 빌드하십시오:
```
npm run dist
```
```
npm install
```

구성:

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

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

계정 ID는 Strings 조직 설정에서 찾을 수 있습니다.

리액트 앱에 스니펫을 추가하십시오:

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

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

initializePhraseAppEditor(config);

모든 FormattedMessage의 가져오기를 찾아서 소스를 react-intl에서 react-intl-phraseapp으로 변경하십시오.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
jest를 사용하여 단위 테스트를 실행하십시오:
```
npm test
```

코드 샘플

이 demo는 Phrase In-Context 편집기와 react-intl의 통합을 보여줍니다.

Angular 2 (ngx-translate)

전제 조건

가입하여 Phrase Strings 계정을 만드세요.
Angular 2 애플리케이션에서 지역화를 위해 ngx-translate 모듈을 사용하세요.

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

NPM으로 설치:
```
npm install ngx-translate-phraseapp
```

구성:

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

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

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

계정 ID는 Strings 조직 설정에서 찾을 수 있습니다.

필요한 경우 useOldICE 속성을 구성하여 old ICE로 전환합니다:

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

initializePhraseAppEditor(config);

필요한 경우, 미국 데이터 센터를 통해 작업할 수 있도록 미국 특정 URL을 추가하세요:

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

기본적으로, 편집기의 문서 파서는 모든 키를 소문자로 변환합니다. 이 동작에 문제가 발생하고 편집기 내에서 대소문자를 구분하는 키를 사용하려면 자동 소문자 기능을 사용 안 함으로 설정하세요:
```
let config = {
  // ...
  autoLowercase: false
}
```

이 스니펫을 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: {
        다음을 제공합니다: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        다음을 제공합니다: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

코드 샘플

이 demo app은 In-Context 편집기와 Angular 및 ngx-translate의 통합을 보여줍니다.

Ruby on Rails (i18n)

참고

이 라이브러리는 구형 브라우저나 Microsoft IE11에서 즉시 작동하지 않을 수 있습니다. 이 브라우저를 지원해야 하는 경우 Babel을 빌드 파이프라인에 추가하세요.

Prerequisites

가입하여 Phrase Strings 계정을 만드세요.
우수한 i18n gem을 사용하여 Rails에서도 사용하세요.

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

원하는 환경에 phraseapp-in-context-editor-ruby 라이브러리를 다음 방법 중 하나로 추가하세요:
- Gem을 통해
```
gem install phraseapp-in-context-editor-ruby
```
- Bundler를 통해
  
  Gemfile에 추가하세요:
```
gem 'phraseapp-in-context-editor-ruby
```
- 최신 버전을 얻기 위해 소스에서 직접 빌드하세요:
```
bundle && gem build
```
Rails 생성기를 실행하여 초기화 파일을 생성하세요:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

계정 ID는 Strings 조직 설정에서 찾을 수 있습니다.
응용 프로그램 레이아웃 app/views//layouts/application.html.erb에 Ruby 코드를 추가하세요:
```
<%= load_in_context_editor %>
```

초기화 파일 /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"

필요한 경우, 미국 엔드포인트와 작업할 수 있도록 미국 데이터 센터를 활성화하세요:

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

어떤 웹 브라우저에서든 응용 프로그램을 열어 In-Context 편집기가 적용된 앱을 확인하세요. 모든 Phrase 조직 사용자로 로그인합니다.

코드 샘플

이 demo는 Phrase In-Context 편집기와 react-i18next의 통합을 보여줍니다.

Django

Prerequisites

가입하여 Phrase Strings 계정을 만드세요.
Python을 위한 Django 프레임워크를 사용하세요.

참고

ICE의 이전 버전은 2.0.0 버전 이후로 사용할 수 없습니다.

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

pip로 django-phrase 패키지를 설치하세요:
```
$ pip install django-phrase
```
설치된 앱 목록에 Phrase를 추가하세요:
```
INSTALLED_APPS = (

    'phrase',

)
```
다음 템플릿 스니펫을 레이아웃 파일 templates/base_generic.html 또는 동등한 파일에 추가하세요:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
템플릿에서 phrase_i18n 템플릿 태그를 사용하세요 (예: demo/ice_demo/templates/index.html):
```
{% load phrase_i18n %}
```

다음 구성을 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 = "__}}"

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

계정 ID는 Strings 조직 설정에서 찾을 수 있습니다.

문제가 발생할 경우, JavaScript snippet을 수동으로 통합할 수 있습니다.

어떤 웹 브라우저에서든 응용 프로그램을 열어 In-Context 편집기가 적용된 앱을 확인하세요. 모든 Phrase 조직 사용자로 로그인합니다.

Django adapter code on GitHub

코드 샘플

이 demo 애플리케이션은 In-Context 편집기를 Django 애플리케이션과 통합하는 방법을 보여줍니다.

Flask

Prerequisites

가입하여 Phrase Strings 계정을 만드세요.
Python을 위한 Flask 프레임워크를 사용하세요.

참고

ICE의 이전 버전은 2.0.0 버전 이후로 사용할 수 없습니다.

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

pip로 Flask-Phrase 패키지를 설치하세요:
```
pip install Flask-Phrase
```

Flask 앱에 다음 구성을 추가하세요 (app.config 또는 config.py):

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

앱 코드는 다음과 비슷해야 합니다:

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)

기본 레이아웃 파일에 Phrase JavaScript snippet을 다음 태그와 함께 추가하세요 (템플릿 파일의 섹션 안에 있어야 합니다):

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

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

계정 ID는 Strings 조직 설정에서 찾을 수 있습니다.

필요한 경우, 미국 엔드포인트와 작업할 수 있도록 미국 데이터 센터를 활성화하세요:

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

PHRASEAPP_ENABLED = True일 때, 패키지는 번역 함수의 반환 값을 ICE가 읽을 수 있는 형식으로 수정합니다. False로 설정하면, 표준 Flask-Babel's gettext 함수로 돌아갑니다.

코드 샘플

이 demo 애플리케이션은 In-Context 편집기를 Flask 애플리케이션과 통합하는 방법을 보여줍니다.

Symfony 5.x

Prerequisites

가입하여 Phrase Strings 계정을 만드세요.
PHP용 Symfony 프레임워크를 사용하세요.

참고

버전 2.0.0은 Symfony 5 및 그 이상을 지원합니다. Symfony 2, 3 또는 4를 사용하는 경우, ICE의 old version을 확인하세요.

In-Context 편집기를 Symfony 애플리케이션과 통합하려면 다음 단계를 따르세요:

PhraseStringsInContextEditor 및 그 내용을 리포지토리의 /src/Service 폴더 또는 원하는 위치에 복사하세요. 다른 곳에 배치된 경우, 네임스페이스를 적절히 조정하세요.

config/services.yaml을 조정하여 translator 서비스를 Phrase의 어댑터로 장식하세요:

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

In-Context Editor가 웹 페이지를 읽을 수 있도록 기본 또는 Twig 레이아웃 템플릿의 {% block javascripts %} 사이에 다음 JavaScript 코드를 추가하세요:

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

이제 Symfony 애플리케이션이 In-Context Editor에 연결되었습니다.

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

계정 ID는 Strings 조직 설정에서 찾을 수 있습니다.

필요한 경우, 미국 엔드포인트와 작업할 수 있도록 미국 데이터 센터를 활성화하세요:

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

애플리케이션을 새로 고치고 Phrase 자격 증명으로 로그인하여 웹 페이지에서 직접 번역 프로세스를 시작하세요.

코드 샘플

이 demo 애플리케이션은 In-Context 편집기를 Symfony 애플리케이션과 통합하는 방법을 보여줍니다.

In-context Editor 설정하기

키 이름 노출하기

일반적으로, 뷰 레이어는 번역 가능한 문자열(즉, 키)의 이름을 번역 방법이나 뷰 헬퍼에 전달하여 번역을 렌더링합니다.

샘플 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];

}

템플릿은 실제 번역된 문자열 대신 translate() 메서드의 출력을 렌더링합니다:

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

형식 지정하기

어떤 키에 대해 번역을 렌더링할지를 템플릿에서 명시해야 합니다.

이 형식을 사용하여 번역 대신 키 이름을 노출하십시오:

{{__phrase_NameOfYourKey__}}

예:

템플릿에 키 page.headline이 있는 경우 문자열 {{__phrase_page.headline__}}을 렌더링합니다.

필요한 형식으로 키 이름을 노출하도록 translate() 도우미 메서드를 수정하십시오:

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

프레임워크에 따라 코드의 번역 도우미를 재정의하거나 템플릿에서 사용할 래핑된 버전을 만들 수 있습니다.

예:

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

키 이름 및 특수 문자 이스케이프

키 이름이 인식 가능한 형식으로 변환되도록 하십시오.

다음 목록의 문자는 In-Context 편집기에 노출될 때 이스케이프해야 합니다:

글자	이스케이프 시퀀스	예
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}}은 {{__phrase__key[[[[[[html_open]]]]]]__}}가 됩니다
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}}은 {{__phrase__[[[[[[html_close]]]]]]key__}}가 됩니다

자동 대소문자 변환

기본적으로 In-Context 편집기의 문서 파서는 모든 키를 소문자로 변환합니다. 이 동작에 문제가 발생하고 In-Context 편집기 내에서 대소문자를 구분하는 키를 사용하려면 자동 소문자 기능을 비활성화하십시오:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

키 장식자 사용자 정의

In-Context 편집기를 사용할 때 키 이름은 일반적으로 장식자(기본적으로 중괄호)로 감싸져 문서의 맥락 내에서 고유한 식별 키를 생성합니다:

{{__phrase_YOUR.KEY__}}

이로 인해 유사한 구문을 사용하는 다른 라이브러리(예: AngularJS 및 Ember.js를 포함한 클라이언트 측 템플릿 엔진)과 충돌이 발생하는 경우 설정에서 In-Context 편집기의 장식자 접두사 및 접미사를 변경하십시오. In-Context 편집기에 파서가 찾아야 할 장식자를 알려주려면 JavaScript 스니펫 이전에 다음 구성 값을 추가하십시오:

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

이것은 편집자에게 [[__로 시작하고 __]]로 끝나는 태그를 찾으라고 지시합니다:

[[__phrase_YOUR.KEY__]]

In-Context 편집기 기능을 제공하기 위해 phraseapp-in-context-editor-ruby gem을 사용하는 경우, 장식자가 구성되어 있는지 확인하십시오:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

gem을 사용하지 않는 경우, 사용자 지정 코드에서 키 이름 노출 패턴이 조정되었는지 확인하십시오.

In-Context 편집기 활성화 및 비활성화

이 설정은 phraseapp-in-context-editor-ruby gem을 사용할 때만 사용할 수 있습니다.

In-Context 편집기는 기본적으로 비활성화되어 있습니다.

In-Context 편집기는 명시적으로 활성화하거나 비활성화할 수 있습니다. 이것은 JavaScript 스니펫(뷰 헬퍼를 사용할 때)의 포함과 뷰에서 장식된 키 이름의 렌더링에 영향을 미칩니다:

PhraseApp::InContextEditor.enabled = true|false

환경 변수에 플래그를 바인딩하는 예:

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

전체 재구문 분석

React와 같은 가상 DOM을 사용하는 JavaScript 프레임워크와 함께 In-Context 편집기를 사용하는 경우 fullReparse을 활성화하십시오. 이것은 DOM 변경이 감지될 때 적절한 재구문 분석을 허용합니다:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

웹페이지에 대한 출력 정리

In-Context 편집기는 웹페이지에 삽입되기 전에 번역을 이스케이프하거나 변경하도록 구성할 수 있으며, sanitize 속성에 함수를 제공해야 합니다.

이 함수는 번역 문자열을 첫 번째 인수로 받아야 하며 문자열을 반환해야 합니다:

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

싱글 사인온

싱글 사인온을 사용하고 SSO가 활성화된 상태에서 In-Context 편집기를 초기화하려면, JavaScript 스니펫 전에 다음 구성 값을 추가하십시오:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

사용자가 SSO를 사용하여 로그인하도록 요구하려면, enforced 매개변수를 설정하십시오:

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

구식 In-Context 편집기: 설정

웹 프레임워크 설치

앵귤러 2 (ngx-translate)

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

NPM으로 설치:
```
npm install ngx-translate-phraseapp
```

구성:

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

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

기본적으로 편집기의 문서 파서는 모든 키를 소문자로 변환합니다. 이 동작에 문제가 발생하고 편집기 내에서 대소문자를 구분하는 키를 사용하려면 자동 소문자 기능을 사용 안 함으로 설정하십시오:
```
let config = {
  // ...
  autoLowercase: false
}
```

이 스니펫을 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: {
        제공: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        제공: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

코드 샘플

이 데모 앱은 Angular 및 ngx-translate와 In-Context 편집기의 통합을 보여줍니다.

AngularJS (angular-translate)

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

Bower를 통해 angular-phrase를 설치하거나 수동으로 다운로드:
```
$ bower install angular-phrase
```
angular-translate 모듈을 로드한 후 기존 AngularJS 애플리케이션에 angular-phrase 모듈을 추가합니다:
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
모듈을 구성합니다:
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다. 이것은 몇 가지 구성 옵션이 포함된 초기화 파일을 생성합니다.
phrase-javascript 지시어를 <head> 태그 안의 애플리케이션에 추가합니다:
```
<phrase-javascript></phrase-javascript>
```
애플리케이션을 웹 브라우저에서 열어 In-Context 편집기가 앱에 적용된 것을 확인합니다. 어떤 Phrase 조직 사용자로 로그인합니다.

GitHub의 angular-phrase

코드 샘플

이 데모 애플리케이션은 angular-phrase가 angular-translate로 AngularJS를 지역화하는 방법을 보여줍니다.

Django

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

django-phrase 패키지를 pip로 설치합니다:
```
$ pip install django-phrase
```
설치된 앱 목록에 Phrase를 추가합니다:
```
INSTALLED_APPS = (

    'phrase',

)
```
템플릿에서 phrase_i18n 템플릿 태그를 사용합니다:
```
{% load phrase_i18n %}
```
django-phrase가 번역 방법을 재정의할 수 있도록 하려면 i18n 후에 phrase_i18n을 로드합니다.
레이아웃에 JavaScript 스니펫을 추가합니다:
```
{% phrase_javascript %}
```

이 옵션으로 프로젝트에 대한 In-Context Editor를 구성합니다:

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

애플리케이션을 웹 브라우저에서 열어 In-Context 편집기가 앱에 적용된 것을 확인합니다. 어떤 Phrase 조직 사용자로 로그인합니다.

GitHub의 Django 어댑터 코드

코드 샘플

이 demo 애플리케이션은 In-Context 편집기를 Django 애플리케이션과 통합하는 방법을 보여줍니다.

React (intl)

참고

이 라이브러리는 IE11 또는 이전 브라우저와 호환되지 않을 수 있습니다. 구형 브라우저 지원이 필요한 경우 Babel을 빌드 파이프라인에 추가하십시오.

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

NPM을 통해 패키지를 설치하십시오:
```
npm install react-intl-phraseapp
```
또는 소스에서 빌드하십시오:
```
npm run dist
```
```
npm install
```

구성:

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

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다.

react 앱에 스니펫을 추가하십시오:

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

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

initializePhraseAppEditor(config);

모든 FormattedMessage의 임포트를 찾아서 소스를 react-intl에서 react-intl-phraseapp으로 변경하십시오.
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
jest를 사용하여 단위 테스트를 실행하십시오:
```
npm test
```

코드 샘플

이 demo는 Phrase In-Context 편집기와 react-intl의 통합을 보여줍니다.

Ruby on Rails (i18n)

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

In-Context Editor와 함께 사용하려는 환경에 phraseapp-in-context-editor-ruby gem을 추가하십시오:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
그리고 번들 명령을 실행하여 설치하십시오:
```
$ bundle install
```
Rails 생성기를 실행하여 phraseapp-in-context-editor-ruby gem을 설치하십시오:
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

프로필 설정 또는 Authorizations API를 통해 액세스 토큰을 생성하고 관리하십시오.

--project-id

프로젝트의 프로젝트 ID는 프로젝트 설정에서 찾을 수 있습니다. 이것은 몇 가지 구성 옵션이 포함된 초기화 파일을 생성합니다.
<head> 태그 내에서 애플리케이션 레이아웃에 JavaScript 스니펫을 추가하고 phraseapp_in_context_editor_js 헬퍼를 사용하십시오:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
애플리케이션을 웹 브라우저에서 열어 In-Context 편집기가 앱에 적용된 것을 확인합니다. 어떤 Phrase 조직 사용자로 로그인합니다.
Turbolinks를 비활성화하십시오(사용하는 경우)

Turbolinks는 모든 페이지 가져오기에서 페이지의 In-Context 편집기 UI 요소를 제거합니다.

data-no-turbolink 속성을 <body> 태그에 추가하세요:
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

코드 샘플

이 demo는 Phrase In-Context 편집기를 react-i18next와 통합한 예시입니다.

봄

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

앱에서 package com.phraseapp.incontexteditor가 사용 가능하도록 하세요.
올바른 프로젝트 ID를 설정하고 PhraseAppConfiguration.class의 다른 매개변수를 조정하세요.

모든 번역을 Phrase를 통해 렌더링하려면, 애플리케이션에 빈을 추가하세요:

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

빈으로 헬퍼를 노출하여 템플릿에 필요한 JavaScript 헬퍼를 제공하세요:

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

각 페이지의 <head> 태그 내의 템플릿에 <script> 태그를 추가하세요:

<head>

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

</head>

애플리케이션을 재시작하고 Phrase 사용자 자격 증명으로 로그인하세요.

GitHub의 예제 애플리케이션 소스 코드

전문가처럼 Spring 애플리케이션을 지역화하는 방법

Spring Boot 스타터 패키지 (ePages에서 제공)

Symfony 2.x

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

In-Context 편집기가 실행될 새로운 환경을 만드세요. 예제에서 새로운 환경은 translation이라고 명명됩니다.

새로운 구성 파일을 만드세요:
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

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

환경 브라우저에 접근할 수 있도록 컨트롤러를 만드세요:

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

In-Context 편집기에 키 이름을 노출하기 위해 표준 번역 방법을 재정의하세요:

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

        }

    }

}

레이아웃에 JavaScript 스니펫을 추가합니다:
```
# Acme/YourBundle/Resources/views/layout.html.twig
```
애플리케이션을 웹 브라우저에서 열어 In-Context 편집기가 앱에 적용된 것을 확인합니다. 어떤 Phrase 조직 사용자로 로그인합니다.

Symfony 번역 문서

GitHub의 Symfony 2.x 어댑터 코드

Symfony 3.x

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

In-Context 편집기가 실행될 새로운 환경을 만드세요. 예제에서 새로운 환경은 translation이라고 명명됩니다.

새로운 구성 파일을 만드세요:
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

환경 브라우저에 접근할 수 있도록 컨트롤러를 만드세요:

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

In-Context 편집기에 키 이름을 노출하기 위해 표준 번역 방법을 재정의하세요:

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

   }

}

번들이 컴파일러 패스와 함께 사용될 때 클래스가 항상 재정의되도록 하십시오:

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

   }

}

별도의 컴파일러 패스를 사용하는 경우, 번들 클래스의 build() 메서드에 등록하십시오:

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

       };

   }

}

레이아웃에 JavaScript 스니펫을 추가합니다:
```
# src/YourBundle/Resources/views/layout.html.twig
```
애플리케이션을 웹 브라우저에서 열어 In-Context 편집기가 앱에 적용된 것을 확인합니다. 어떤 Phrase 조직 사용자로 로그인합니다.

Symfony 번역 문서

Vue I18n

참고

Vue I18n Phrase In-Context 편집기는 모든 Vue I18n 버전 8.17.5 이상을 지원합니다. 이 라이브러리는 이전 버전에서도 작동할 수 있지만 공식적으로 지원되지 않으며 특정 업데이트나 버그 수정이 제공되지 않습니다.

이 환경에 In-Context 편집기를 설치하려면 다음 단계를 따르십시오:

선호하는 패키지 관리자를 사용하여 패키지를 설치하십시오:

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

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

또는 CDN으로 로드하십시오 (수동으로 등록 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>

부트스트랩 (샘플):

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: {
      안녕하세요: '안녕하세요, 세계!'
  }
});

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

라이브러리를 통합하려면:

Vue I18n Phrase In-Context Editor 라이브러리를 가져옵니다.
새로운 Vue I18n Phrase In-Context Editor 인스턴스를 생성하고, 첫 번째 인수로 Vue I18n 인스턴스를 전달하고 두 번째로 Phrase Config를 전달합니다.

구성 옵션 및 샘플 메서드.

구형 In-context 편집기 사용

Ajax 모드

In-Context 편집기는 Ajax 및 DOM 조작(즉, JavaScript를 통해)을 지원합니다. 변이 관찰자를 사용합니다.

Ajax 모드는 일부 경우에 문제를 일으킬 수 있으며, In-Context 편집기를 사용할 때 심각한 성능 문제를 초래할 수 있습니다. Ajax 모드를 비활성화하려면 JavaScript 스니펫 이전에 다음 구성 값을 추가하십시오:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

디버그 모드

디버그 모드를 활성화하려면 JavaScript 스니펫 이전에 다음 구성 값을 추가하십시오:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

로캘 강제 설정

In-Context 편집기를 시작할 때 특정 로캘을 명시적으로 설정하려면 forceLocale 설정을 사용하십시오. 이는 In-Context 편집기에서 현재 웹 애플리케이션에 표시된 로캘을 미리 선택하는 데 유용합니다.

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

무시된 키

이 설정은 phraseapp-in-context-editor-ruby gem을 사용할 때만 사용할 수 있습니다.

키는 In-Context 편집기에서 렌더링되지 않도록 제외할 수 있습니다. Rails로 작업할 때, 키는 오류 메시지나 날짜 및 시간 형식 키와 같은 데이터에 대해 무시될 수 있습니다. phraseapp-in-context-editor-ruby gem에 의해 자동으로 처리되지 않도록 키를 제외하려면, 키 배열을 phraseapp_in_context_editor.rb 초기화 파일에 추가하십시오. 와일드카드도 사용할 수 있습니다:

PhraseApp::InContextEditor.configure do |config|

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

end

이러한 패턴 중 하나와 일치하는 키는 In-Context 편집기에 접근할 수 없으며 정상적으로 렌더링됩니다.