Intlayer Visual Editor Documentation

www.youtube.com

Open embedded page in fullscreen

Intlayer Visual Editor는 시각적 편집기를 사용하여 콘텐츠 선언 파일과 상호작용할 수 있도록 웹사이트를 래핑하는 도구입니다.

intlayer-editor 패키지는 Intlayer를 기반으로 하며, React (Create React App), Vite + React, Next.js와 같은 JavaScript 애플리케이션에서 사용할 수 있습니다.

시각적 편집기 vs CMS

Intlayer Visual Editor는 로컬 사전(dictionary)을 위한 시각적 편집기에서 콘텐츠를 관리할 수 있는 도구입니다. 변경 사항이 이루어지면 콘텐츠가 코드베이스에서 교체됩니다. 즉, 애플리케이션이 다시 빌드되고 페이지가 새 콘텐츠를 표시하기 위해 다시 로드됩니다.

반면, Intlayer CMS는 원격 사전(dictionary)을 위한 시각적 편집기에서 콘텐츠를 관리할 수 있는 도구입니다. 변경 사항이 이루어지더라도 콘텐츠가 코드베이스에 영향을 미치지 않습니다. 그리고 웹사이트는 변경된 콘텐츠를 자동으로 표시합니다.

애플리케이션에 Intlayer 통합

Intlayer를 통합하는 방법에 대한 자세한 내용은 아래 관련 섹션을 참조하세요:

Next.js와 통합

Next.js와 통합하려면 설치 가이드를 참조하세요.

Create React App과 통합

Create React App과 통합하려면 설치 가이드를 참조하세요.

Vite + React와 통합

Vite + React와 통합하려면 설치 가이드를 참조하세요.

Intlayer Editor 작동 방식

시각적 편집기는 두 가지 요소를 포함하는 애플리케이션입니다:

• 웹사이트를 iframe에 표시하는 프론트엔드 애플리케이션. 웹사이트가 Intlayer를 사용하는 경우, 시각적 편집기가 콘텐츠를 자동으로 감지하고 상호작용할 수 있도록 합니다. 수정이 이루어지면 변경 사항을 다운로드할 수 있습니다.

• 다운로드 버튼을 클릭하면, 시각적 편집기가 서버에 요청을 보내 프로젝트 내에 선언된 콘텐츠 선언 파일을 새 콘텐츠로 교체합니다.

현재 Intlayer Editor는 콘텐츠 선언 파일을 JSON 파일로 작성합니다.

설치

프로젝트에서 Intlayer가 구성된 후, intlayer-editor를 개발 의존성으로 설치하세요:

npm install intlayer-editor --save-dev

--with 플래그를 사용하면 다른 명령과 병렬로 편집기를 시작할 수 있습니다:

{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}

구성

Intlayer 구성 파일에서 편집기 설정을 사용자 정의할 수 있습니다:

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... 기타 구성 설정
  editor: {
    /**
     * 필수
     * 애플리케이션의 URL.
     * 시각적 편집기가 대상으로 하는 URL입니다.
     * 예: 'http://localhost:3000'
     */
    applicationURL: process.env.INTLAYER_APPLICATION_URL,
    /**
     * 선택 사항
     * 기본값은 `true`입니다. `false`로 설정하면 편집기가 비활성화되어 접근할 수 없습니다.
     * 보안상의 이유로 특정 환경(예: 프로덕션)에서 편집기를 비활성화하는 데 사용할 수 있습니다.
     */
    enabled: process.env.INTLAYER_ENABLED,
    /**
     * 선택 사항
     * 기본값은 `8000`입니다.
     * 편집기 서버의 포트입니다.
     */
    port: process.env.INTLAYER_PORT,
    /**
     * 선택 사항
     * 기본값은 "http://localhost:8000"입니다.
     * 편집기 서버의 URL입니다.
     */
    editorURL: process.env.INTLAYER_EDITOR_URL,
  },
};

export default config;

사용 가능한 모든 매개변수를 보려면 구성 문서를 참조하세요.

편집기 사용

1. 편집기가 설치되면 다음 명령어를 사용하여 편집기를 시작할 수 있습니다:

   bash

   콘텐츠 복사

   코드 복사

   코드를 클립보드에 복사

   npx intlayer-editor start
   

   애플리케이션을 병렬로 실행해야 합니다. 애플리케이션 URL은 편집기 구성(applicationURL)에 설정한 URL과 일치해야 합니다.

참고: 이 명령은 intlayer 패키지에서 재내보내집니다. 대신 npx intlayer editor start를 사용할 수 있습니다.

2. 그런 다음 제공된 URL을 엽니다. 기본값은 http://localhost:8000입니다.

   Intlayer에 의해 색인된 각 필드를 커서를 사용하여 콘텐츠 위로 이동하면 볼 수 있습니다.

   

3. 콘텐츠가 윤곽선으로 표시되면, 길게 눌러 편집 서랍을 표시할 수 있습니다.

환경 구성

편집기는 특정 환경 파일을 사용하도록 구성할 수 있습니다. 이는 개발과 프로덕션에서 동일한 구성 파일을 사용하려는 경우에 유용합니다.

특정 환경 파일을 사용하려면 편집기를 시작할 때 --env-file 또는 -f 플래그를 사용할 수 있습니다:

npx intlayer-editor start -f .env.development

환경 파일은 프로젝트의 루트 디렉터리에 위치해야 합니다.

또는 --env 또는 -e 플래그를 사용하여 환경을 지정할 수 있습니다:

npx intlayer-editor start -e development

디버그

시각적 편집기에서 문제가 발생하면 다음을 확인하세요:

• 시각적 편집기와 애플리케이션이 실행 중인지 확인하세요.

• Intlayer 구성 파일에서 editor 구성이 올바르게 설정되었는지 확인하세요.

  • 필수 필드:
    • 애플리케이션 URL은 편집기 구성(applicationURL)에 설정한 URL과 일치해야 합니다.

• 비주얼 에디터는 iframe을 사용하여 웹사이트를 표시합니다. 웹사이트의 콘텐츠 보안 정책(CSP)이 CMS URL을 frame-ancestors로 허용하는지 확인하세요(기본값은 http://localhost:8000입니다). 에디터 콘솔에서 오류가 있는지 확인하세요.

자주 묻는 질문