기본 Props

FroalaEditor의 핵심 기능을 제어하는 필수적인 Props들입니다.

기본 에디터

로딩 중...

현재 내용: (비어있음)

초기값이 있는 에디터

로딩 중...

커스텀 placeholder

로딩 중...

value

• 타입: string | undefined
• 기본값: undefined
• 설명: 에디터의 현재 HTML 내용을 설정합니다.

import { useState } from 'react';
import BrowserOnly from '@docusaurus/BrowserOnly';

function MyEditor() {
  const [content, setContent] = useState('<p>초기 내용</p>');

  return <FroalaEditor value={content} onChange={setContent} />;
}

주요 특징

• HTML 문자열 형태로 관리됩니다
• undefined일 경우 빈 에디터로 표시됩니다
• React의 제어 컴포넌트 패턴을 따릅니다

onChange

• 타입: (value: string) => void | undefined
• 기본값: undefined
• 설명: 에디터 내용이 변경될 때 호출되는 콜백 함수입니다.

const handleChange = (newContent) => {
  console.log('에디터 내용이 변경됨:', newContent);
  setContent(newContent);
};

<FroalaEditor value={content} onChange={handleChange} />;

주요 특징

• 사용자가 텍스트를 입력하거나 서식을 변경할 때마다 호출됩니다
• 새로운 HTML 내용을 매개변수로 받습니다
• 실시간으로 변경사항을 추적할 수 있습니다

placeholder

• 타입: string
• 기본값: "내용을 입력하세요."
• 설명: 에디터가 비어있을 때 표시되는 안내 텍스트입니다.

<FroalaEditor placeholder="여기에 글을 작성해주세요..." value={content} onChange={setContent} />

사용 예제

// 게시판용

<FroalaEditor placeholder="게시글 내용을 입력하세요." />

// 상품 설명용

<FroalaEditor placeholder="상품에 대한 자세한 설명을 작성해주세요." />

// 댓글용

<FroalaEditor placeholder="댓글을 남겨주세요." />

disabled

• 타입: boolean
• 기본값: false
• 설명: 에디터를 비활성화하여 읽기 전용으로 만듭니다.

const [isDisabled, setIsDisabled] = useState(false);

<div>
  <button onClick={() => setIsDisabled(!isDisabled)}>{isDisabled ? '편집 모드' : '읽기 모드'}</button>
  <FroalaEditor value={content} onChange={setContent} disabled={isDisabled} />
</div>;

주요 특징

• true일 때 모든 편집 기능이 비활성화됩니다
• 툴바가 숨겨지고 내용만 표시됩니다
• 시각적으로 비활성화 상태를 나타냅니다

id

• 타입: string | undefined
• 기본값: undefined
• 설명: 에디터 컨테이너의 고유 ID를 설정합니다.

<FroalaEditor id="my-editor" value={content} onChange={setContent} />

사용 사례

• 여러 에디터를 구분해야 할 때
• CSS 스타일링을 위한 특정 선택자가 필요할 때
• JavaScript에서 특정 에디터에 접근해야 할 때

⚠️ 주의사항

제어 컴포넌트 사용

FroalaEditor는 제어 컴포넌트로 설계되었습니다. 항상 value와 onChange를 함께 사용하세요:

// ✅ 올바른 사용
const [content, setContent] = useState('');

<FroalaEditor value={content} onChange={setContent} />

// ❌ 잘못된 사용 (비제어 컴포넌트)

<FroalaEditor onChange={setContent} />

HTML 콘텐츠 처리

에디터는 HTML을 반환하므로 XSS 공격에 주의하세요:

// 사용자 입력을 그대로 렌더링할 때는 주의

<div dangerouslySetInnerHTML={{ __html: content }} />

// 서버에서 HTML을 정화(sanitize)하는 것을 권장