In-Context Editor (Strings)

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

사용 가능:

팀, 전문, 비즈니스, 엔터프라이즈 및 소프트웨어 UI/UX 요금제

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

사용 가능:

고급 및 엔터프라이즈 요금제(레거시)

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

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

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

In-Context 편집기:

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

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

Strings In-Context Editor 설치하기

요구 사항

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

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

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

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

JavaScript Snippet

애플리케이션 레이아웃에 JavaScript 코드 조각을 포함합니다.

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

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

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

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

샘플:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // 이 이름을 변경하지 마십시오. 구성 작동을 위해
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // 미국 데이터 센터의 경우 'us'로 설정하십시오.
      prefix: '{{__', // 보기 템플릿에서 키 형식의 접두사를 설정합니다.
      suffix: '__}}', // 보기 템플릿에서 키 형식의 접미사를 설정합니다.
      disableShortcuts: false, // 키보드 단축키를 비활성화하려면 true로 설정합니다.
      autoLowercase: true, // 키에 대문자가 포함된 경우 false로 설정합니다.
    };
  </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: {
      hello: '안녕하세요, 세계!'
  }
});

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

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

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

구성 옵션 및 샘플 메서드.

React (intl)

참고

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

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

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

NPM을 통해 newest package을 설치하십시오:
```
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 조직 설정에서 찾을 수 있습니다.

스니펫을 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);

모든 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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

코드 샘플

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

루비 온 레일스 (i18n)

참고

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

전제 조건

Phrase Strings 계정에 가입하십시오.
우수한 i18n 젬을 사용하세요. 이 젬은 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 조직 사용자로 로그인합니다.

코드 샘플

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

Django

전제 조건

Phrase Strings 계정에 가입하십시오.
Python을 위해 장고 프레임워크를 사용하세요.

참고

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

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

django-phrase 패키지를 pip로 설치하세요:
```
$ 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 설정
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # 자신의 계정 ID를 설정하세요
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # 자신의 프로젝트 ID를 설정하세요
    PHRASE_DATACENTER = "eu"  # 데이터 센터를 선택하세요 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

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

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

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

장고 어댑터 코드 GitHub에서

코드 샘플

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

Flask

전제 조건

Phrase Strings 계정에 가입하십시오.
Python을 위한 Flask 프레임워크를 사용하세요.

참고

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

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

다음과 같이 Flask-Phrase 패키지를 pip로 설치하세요:
```
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의 gettext 함수로 돌아갑니다.

코드 샘플

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

Symfony 5.x

전제 조건

Phrase Strings 계정에 가입하십시오.
PHP용 Symfony 프레임워크를 사용하세요.

참고

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

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

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

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

서비스:
    ...
    App\Service\PhraseStringsInContextEditor\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 자격 증명으로 로그인하여 웹 페이지에서 직접 번역 프로세스를 시작하세요.

코드 샘플

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

In-context Editor 설정하기

키 이름 노출하기

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

샘플 PHP 코드:

$translations = array(

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

  "page.link.label" => "나는 링크입니다",

  "page.link.hint" => "클릭하세요"

)

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 Editor에 노출될 때 이스케이프해야 합니다:

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

자동 대소문자 변환

기본적으로 In-context editor의 문서 파서는 모든 키를 소문자로 변환합니다. 이 동작에 문제가 발생하고 In-context Editor 내에서 대소문자를 구분하는 키를 사용하려면 자동 소문자 기능을 사용 안 함으로 설정하십시오:

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

키 장식자 사용자 지정

In-context editor를 사용할 때, 키 이름은 일반적으로 장식자(기본적으로 중괄호)로 감싸져 문서의 고유 식별 키를 생성합니다:

{{__phrase_YOUR.KEY__}}

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

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

In-Context Editor 활성화 및 비활성화

이 설정은 phraseapp-in-context-editor-ruby gem을 사용할 때만 가능합니다.

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

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

PhraseApp::InContextEditor.enabled = true|false

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

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

전체 재구문 분석

In-Context 편집자를 Virtual DOM을 사용하는 JavaScript 프레임워크(예: React)와 함께 사용하는 경우 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 편집기: 설정

웹 프레임워크 설치

Angular 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: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

코드 샘플

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

AngularJS (angular-translate)

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

Bower를 통해 angular-phrase를 설치하세요 (또는 수동으로 다운로드):
```
$ bower install angular-phrase
```
기존 AngularJS 애플리케이션에 angular-phrase 모듈을 추가하세요. angular-translate 모듈을 로드한 후에:
```
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를 사용하여 AngularJS를 어떻게 지역화하는지를 보여줍니다.

장고

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

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

    'phrase',

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

이 옵션으로 프로젝트에 대한 In-Context Editor를 구성하세요:

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

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

GitHub의 Django 어댑터 코드

코드 샘플

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

리액트 (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>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

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

스니펫을 리액트 앱에 추가하세요:

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

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

initializePhraseAppEditor(config);

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

코드 샘플

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

루비 온 레일스 (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> 태그 내에 phraseapp_in_context_editor_js 헬퍼를 사용하여 JavaScript 스니펫을 애플리케이션 레이아웃에 추가합니다:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
애플리케이션을 웹 브라우저에서 열어 In-Context 편집기가 애플리케이션에 적용된 것을 확인하세요. 어떤 Phrase 조직 사용자로 로그인하세요.
Turbolinks 비활성화 (사용하는 경우)

Turbolinks는 페이지를 가져올 때마다 모든 In-Context Editor UI 요소를 페이지에서 제거합니다.

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

코드 샘플

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

Spring

이 환경에 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 애플리케이션을 지역화하는 방법

ePages에서 제공하는 Spring Boot 스타터 패키지

Symfony 2.x

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

In-Context editor가 실행될 새로운 환경을 생성합니다. 예제에서 새로운 환경은 translation이라고 명명됩니다.

새로운 구성 파일을 생성하십시오:
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

매개 변수:

    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') {

            // 'routes' 도메인에 대한 번역된 값을 반환하십시오.

            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 editor가 실행될 새로운 환경을 생성합니다. 예제에서 새로운 환경은 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 Editor는 모든 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: {
      hello: 'Hello world!'
  }
});

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 Editor 사용

Ajax Mode

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

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

디버그 모드

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

로캘 강제 설정

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

무시된 키들

이 설정은 phraseapp-in-context-editor-ruby gem을 사용할 때만 가능합니다.

키는 In-Context editor에서 렌더링되지 않도록 제외할 수 있습니다. 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 편집기에 접근할 수 없으며 정상적으로 렌더링됩니다.