In-Context Editor (Strings)

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

사용 가능:

Team, Professional, Business, Enterprise 및 Software UI/UX 요금제

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

사용 가능:

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

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

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

현재 두 가지 버전을 사용할 수 있습니다:

In-Context Editor:

새로운 기능(다국어 보기, 레이아웃 옵션, 일괄 작업, 협업 기능 등)과 번역 편집기의 UI가 포함되어 있습니다.
이전 In-Context Editor.

In-Context Editor를 설치한 후에는 많은 기술과 함께 작동하도록 사용자 지정할 수 있습니다.

Strings In-Context Editor 설치

요구 사항

In-Context Editor를 사용하려면 애플리케이션에 다음이 필요합니다:

웹 기반 웹사이트, 웹 애플리케이션, 모바일 사이트 등.
번역자는 에디터가 실행되는 웹 서버에 액세스할 수 있어야 합니다. 필요한 경우 로컬 환경일 수도 있습니다.
키-값 현지화 파일 구조.

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

전용 환경을 사용할 수 없는 경우, 필요에 따라 In-Context Editor를 활성화하는 옵션을 사용하여 기존 스테이징 환경을 사용할 수 있습니다.

JavaScript 스니펫

애플리케이션 레이아웃에 JavaScript 스니펫을 포함하십시오.

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

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

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

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

예시:

<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 Phrase In-Context Editor Post Processor는 19.5.1보다 최신인 모든 i18next 버전을 지원합니다. 이 라이브러리가 이전 버전에서도 작동할 수 있지만, 공식적으로 지원되지 않으며 특정 업데이트나 버그 수정이 제공되지 않을 수 있습니다.

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

선호하는 패키지 관리자를 사용하여 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>
```

Bootstrap (샘플):

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 라이브러리에서 가져옵니다.
PhraseConfig를 인수로 전달하여 새로운 i18next Phrase In-Context Editor Post Processor 인스턴스를 생성합니다.
새로 생성된 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 Editor를 시작합니다.
웹 브라우저에서 애플리케이션을 열어 In-Context Editor를 표시합니다. Phrase 조직 사용자 계정으로 로그인하십시오.

구성 옵션 및 샘플 메서드.

Vue I18n

참고

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

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

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

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

Bootstrap (샘플):

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를 전달하십시오.

구성 옵션 및 샘플 메서드.

React (intl)

참고

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

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

이 환경에 In-Context Editor를 설치하려면 다음 단계를 따르십시오.

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 조직 설정에서 찾을 수 있습니다.

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

코드 샘플

이 데모는 react-intl과 Phrase In-Context Editor의 통합을 보여줍니다.

Angular 2 (ngx-translate)

필수 조건

Phrase Strings 계정에 가입하십시오.
Angular 2 애플리케이션의 현지화를 위해 ngx-translate 모듈을 사용하십시오.

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

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 Editor와 Angular 및 ngx-translate의 통합을 보여줍니다.

Ruby on Rails (i18n)

참고

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

필수 조건

Phrase Strings 계정에 가입하십시오.
i18n gem을 Rails에서도 사용하십시오.

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

다음 방법 중 하나를 사용하여 원하는 환경에 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"

필요한 경우 US 데이터 센터를 설정하여 US 엔드포인트 작업을 활성화하십시오:

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

웹 브라우저에서 애플리케이션을 열어 앱에 적용된 In-Context Editor를 확인하십시오. Phrase 조직 사용자 계정으로 로그인하십시오.

코드 샘플

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

Django

필수 조건

Phrase Strings 계정에 가입하십시오.
Python용 Django 프레임워크를 사용하십시오.

참고

버전 2.0.0부터는 이전 버전의 ICE를 사용할 수 없습니다.

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

pip를 사용하여 django-phrase 패키지를 설치하십시오:
```
$ pip install django-phrase
```
설치된 앱 목록에 Phrase를 추가하십시오:
```
INSTALLED_APPS = (

    'phrase',

)
```
레이아웃 파일 templates/base_generic.html 또는 이에 상응하는 파일에 다음 템플릿 스니펫을 추가하십시오:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
템플릿(예: demo/ice_demo/templates/index.html)에서 phrase_i18n 템플릿 태그를 사용하십시오:
```
{% 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 Editor를 확인하십시오. Phrase 조직 사용자로 로그인하십시오.

GitHub의 Django 어댑터 코드

코드 샘플

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

Flask

필수 조건

가입하여 Phrase Strings 계정을 만드십시오.
Python용 Flask 프레임워크를 사용하십시오.

참고

버전 2.0.0부터는 이전 버전의 ICE를 사용할 수 없습니다.

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

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 조직 설정에서 찾을 수 있습니다.

필요한 경우 US 데이터 센터를 설정하여 US 엔드포인트 작업을 활성화하십시오:

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

PHRASEAPP_ENABLED = True인 경우, 패키지는 번역 함수에서 반환되는 값을 수정하여 In-Context Editor가 읽을 수 있는 형식으로 제공합니다. False로 설정하면 표준 Flask-Babel의 gettext 함수로 대체됩니다.

코드 샘플

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

Symfony 5.x

필수 조건

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

참고

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

In-Context Editor를 Symfony 애플리케이션과 통합하려면 다음 단계를 따르십시오:

PhraseStringsInContextEditor와 그 내용을 리포지토리의 /src/Service 폴더 또는 원하는 위치에 복사하십시오. 다른 곳에 배치한 경우 네임스페이스를 그에 맞게 조정하십시오.
config/services.yaml을 조정하여 translator 서비스를 Phrase 어댑터로 데코레이션하십시오:
```
services:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator
```

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

<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 조직 설정에서 찾을 수 있습니다.

필요한 경우 US 데이터 센터를 설정하여 US 엔드포인트 작업을 활성화하십시오:

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

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

코드 샘플

이 demo 애플리케이션은 In-Context Editor를 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 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__]]

phraseapp-in-context-editor-ruby gem을 사용하여 In-Context Editor 기능을 제공하는 경우, 데코레이터가 구성되었는지 확인하십시오:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

In-Context Editor 사용 및 사용 안 함

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

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

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

PhraseApp::InContextEditor.enabled = true|false

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

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

전체 재구문 분석

React와 같이 Virtual DOM을 사용하는 JavaScript 프레임워크에서 In-Context Editor를 사용하는 경우 fullReparse를 활성화하십시오. DOM 변경이 감지될 때 적절한 재구문 분석을 허용합니다:

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

In-Context Editor에서 요소 숨기기

hidingClasses 옵션에 나열된 클래스는 숨겨진 것으로 처리되며 In-Context Editor 스캐너에서 제외됩니다. 특정 클래스가 있는 요소를 스캔 가능하게 만들려면 해당 클래스 이름을 hidingClasses 배열에 추가하는 대신 제거하십시오. 배열에 클래스 이름을 추가하면 일치하는 요소가 제외되고 편집 버튼이 숨겨지며, 배열에서 클래스 이름을 제거하면 일치하는 요소가 포함되고 편집 버튼이 표시됩니다.

hidingClasses 옵션은 요소와 그 상위 요소에 대해 정적 클래스 존재 여부 확인을 수행합니다. 계산된 가시성이나 반응형 가시성은 평가하지 않습니다. hidingClasses의 항목과 일치하는 반응형 유틸리티 클래스를 사용하는 요소(예: "hidden"이라는 클래스와 중단점별 가시성 클래스가 결합된 경우)는 현재 뷰포트에서 실제로 보이는지 여부와 관계없이 스캔에서 제외됩니다. 스캔이 필요한 요소에 반응형 스타일링 목적으로만 hidingClasses에 나열된 클래스 이름을 사용하지 마십시오.

웹페이지에 출력 정제하기

In-Context Editor는 sanitize 속성에 함수를 제공하여 번역이 웹페이지에 삽입되기 전에 이스케이프하거나 변경하도록 구성할 수 있습니다.

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

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

Single Sign-On

Single Sign-On을 사용 중이고 SSO가 활성화된 상태로 In-Context Editor를 초기화하려면 JavaScript 스니펫 앞에 다음 구성 값을 추가하십시오:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

이전 In-Context Editor: 설정

웹 프레임워크 설치

Angular 2 (ngx-translate)

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

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

구성:

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

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

기본적으로 편집자의 문서 파서는 모든 키를 소문자로 변환합니다. 이 동작에 문제가 발생하여 In-Context Editor 내에서 대소문자를 구분하는 키를 사용하려면 자동 소문자 기능을 사용하지 않도록 설정하십시오:
```
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 Editor와 Angular 및 ngx-translate의 통합을 보여줍니다.

AngularJS (angular-translate)

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

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는 프로젝트 설정에서 찾을 수 있습니다. 이렇게 하면 몇 가지 구성 옵션이 포함된 초기화 파일이 생성됩니다.
<head> 태그 내의 애플리케이션에 phrase-javascript 태그를 추가하세요:
```
<phrase-javascript></phrase-javascript>
```
웹 브라우저에서 애플리케이션을 열어 앱에 적용된 In-Context Editor를 확인하세요. Phrase 조직 사용자로 로그인하십시오.

GitHub의 angular-phrase

코드 샘플

angular-phrase를 위한 이 데모 애플리케이션은 angular-translate를 사용하여 AngularJS를 현지화하는 방법을 보여줍니다.

Django

이 환경에 In-context Editor를 설치하려면 다음 단계를 따르십시오:

pip를 사용하여 django-phrase 패키지를 설치하십시오:
```
$ 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 Editor를 확인하십시오. Phrase 조직 사용자로 로그인하십시오.

GitHub의 Django 어댑터 코드

코드 샘플

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

React (intl)

참고

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

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

이 환경에 In-context Editor를 설치하려면 다음 단계를 따르십시오:

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 Editor와 react-intl의 통합을 보여줍니다.

Ruby on Rails (i18n)

이 환경에 In-context Editor를 설치하려면 다음 단계를 따르십시오:

In-Context Editor를 사용할 환경에 phraseapp-in-context-editor-ruby 젬을 추가하십시오:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
그리고 bundle 명령을 실행하여 설치합니다:
```
$ bundle install
```
Rails 생성기를 실행하여 phraseapp-in-context-editor-ruby 젬을 설치합니다:
```
$ 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는 프로젝트 설정에서 찾을 수 있습니다. 이렇게 하면 몇 가지 구성 옵션이 포함된 초기화 파일이 생성됩니다.
phraseapp_in_context_editor_js 헬퍼를 사용하여 <head> 태그 내 애플리케이션의 레이아웃에 JavaScript 스니펫을 추가합니다:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
웹 브라우저에서 애플리케이션을 열어 앱에 적용된 In-Context Editor를 확인하세요. Phrase 조직 사용자로 로그인하십시오.
Turbolinks 사용 안 함(사용 중인 경우)

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

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

코드 샘플

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

Spring

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

package com.phraseapp.incontexteditor를 앱에서 사용할 수 있는지 확인합니다.
PhraseAppConfiguration.class에서 올바른 프로젝트 ID를 설정하고 다른 매개변수를 조정합니다.

모든 번역을 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 Starter 패키지(ePages 제공)

Symfony 2.x

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

In-Context Editor가 실행될 새 환경을 생성하십시오. 예제에서 새 환경의 이름은 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 Editor에 키 이름을 노출하기 위해 표준 번역 메서드를 재정의하십시오:

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

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

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

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

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

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

Symfony 번역 문서

GitHub의 Symfony 2.x 어댑터 코드

Symfony 3.x

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

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 Editor에 키 이름을 노출하기 위해 표준 번역 메서드를 재정의하십시오:

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

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

class PhraseTranslator extends BaseTranslator

{

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

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

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

       return $prefix.$id.$suffix;

   }

}

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

# 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 Editor를 확인하십시오. Phrase 조직 사용자로 로그인하십시오.

Symfony 번역 문서

Vue I18n

참고

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

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

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

# 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 모드

In-Context Editor는 변이 관찰자(mutation observer)를 사용하여 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 Editor에서 액세스할 수 없으며 정상적으로 렌더링됩니다.