설정

WebEditor의 다양한 옵션을 설정하여 프로젝트에 맞게 커스터마이징하세요.

테마 설정

7가지 기본 테마를 제공하며, 커스텀 테마도 만들 수 있습니다.

<WebEditor
  theme="light"     // 기본값
  // theme="dark"
  // theme="sepia"
  // theme="high-contrast"
  // theme="blue"
  // theme="green"
  // theme="custom"
/>

커스텀 테마

<WebEditor
  theme="custom"
  customTheme={{
    primary: '#6366f1',
    background: '#ffffff',
    text: '#1f2937',
    border: '#e5e7eb',
    toolbar: {
      background: '#f9fafb',
      buttonHover: '#e5e7eb',
    },
  }}
/>

툴바 설정

툴바에 표시할 버튼과 순서를 지정할 수 있습니다.

<WebEditor
  toolbar={{
    items: [
      'undo', 'redo', '|',
      'heading', 'bold', 'italic', 'underline', '|',
      'bulletList', 'orderedList', '|',
      'link', 'image', 'table', '|',
      'alignLeft', 'alignCenter', 'alignRight',
    ],
    sticky: true,      // 스크롤 시 고정
    showOnFocus: true, // 포커스 시에만 표시
  }}
/>

기능 활성화/비활성화

<WebEditor
  features={{
    spellCheck: true,        // 맞춤법 검사
    collaboration: true,     // 실시간 협업
    versionHistory: true,    // 버전 관리
    accessibility: true,     // 접근성 검사
    documentIO: true,        // 문서 불러오기/내보내기
    aiAssist: false,         // AI 기능
  }}
/>

문서 입출력 설정

<WebEditor
  documentIO={{
    import: {
      formats: ['hwp', 'hwpx', 'docx', 'html'],
      maxFileSize: 50 * 1024 * 1024, // 50MB
    },
    export: {
      formats: ['hwpx', 'docx', 'pdf', 'html'],
      filename: 'document',
    },
  }}
/>

협업 설정

실시간 협업을 위한 WebSocket 서버 연결을 설정합니다.

<WebEditor
  collaboration={{
    enabled: true,
    serverUrl: 'wss://collab.example.com',
    documentId: 'doc-12345',
    user: {
      id: 'user-1',
      name: '홍길동',
      color: '#3b82f6',
    },
  }}
/>

이벤트 핸들러

<WebEditor
  onChange={(content) => console.log('Content:', content)}
  onSave={(content) => saveToServer(content)}
  onLoad={() => console.log('Editor loaded')}
  onError={(error) => console.error('Error:', error)}
  onSelectionChange={(selection) => console.log('Selection:', selection)}
/>

전체 예시

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

function MyEditor() {
  return (
    <WebEditor
      licenseKey={process.env.NEXT_PUBLIC_LICENSE_KEY}
      theme="light"
      height={600}
      placeholder="내용을 입력하세요..."
      toolbar={{
        items: ['undo', 'redo', '|', 'heading', 'bold', 'italic'],
        sticky: true,
      }}
      features={{
        spellCheck: true,
        accessibility: true,
      }}
      documentIO={{
        import: { formats: ['hwp', 'docx'] },
        export: { formats: ['hwpx', 'pdf'] },
      }}
      onChange={(content) => {
        localStorage.setItem('draft', content);
      }}
    />
  );
}