시작하기

@dev-jitsu/web-editor를 프로젝트에 통합하는 방법을 알아보세요. 5분 안에 완전한 기능의 웹 에디터를 구현할 수 있습니다.

사전 요구사항

Node.js 18.0.0 이상
React 18.0.0 이상
유효한 라이선스 키 (체험판 또는 유료)

1. 패키지 설치

npm 또는 yarn을 사용하여 패키지를 설치합니다.

npm

npm install @dev-jitsu/web-editor

yarn

yarn add @dev-jitsu/web-editor

2. 기본 사용법

React 컴포넌트에서 WebEditor를 가져와 사용합니다.

import { WebEditor } from '@dev-jitsu/web-editor';

function MyEditor() {
  const handleChange = (content: string) => {
    console.log('Content changed:', content);
  };

  return (
    <WebEditor
      licenseKey="YOUR_LICENSE_KEY"
      theme="default"
      height={500}
      onChange={handleChange}
    />
  );
}

export default MyEditor;

3. 라이선스 키 설정

라이선스 키는 환경 변수로 관리하는 것을 권장합니다.

.env.local

NEXT_PUBLIC_WEBEDITOR_LICENSE_KEY=XXXX-XXXX-XXXX-XXXX

// 컴포넌트에서 사용
<WebEditor
  licenseKey={process.env.NEXT_PUBLIC_WEBEDITOR_LICENSE_KEY}
  // ...
/>

4. 스타일 설정

기본 스타일을 가져옵니다. CSS-in-JS를 사용하는 경우 별도 설정이 필요 없습니다.

// _app.tsx 또는 layout.tsx
import '@dev-jitsu/web-editor/styles.css';