스타일링 Props

FroalaEditor의 외관과 레이아웃을 제어하는 Props들입니다.

기본 크기 (높이: 300px, 너비: 100%)

로딩 중...

커스텀 높이 (높이: 150px)

로딩 중...

커스텀 너비 (너비: 500px)

로딩 중...

커스텀 CSS 클래스 적용

로딩 중...

height

• 타입: number
• 기본값: 300
• 설명: 에디터의 높이를 픽셀 단위로 설정합니다. 툴바를 제외한 에디터 작성 영역의 높이입니다. 툴바 높이는 자동으로 계산됩니다.

// 작은 에디터 (댓글용)
<FroalaEditor height={150} />

// 기본 에디터
<FroalaEditor height={300} />

// 큰 에디터 (게시글용)
<FroalaEditor height={500} />

사용 가이드라인

• 150px 이하: 간단한 텍스트 입력용 (댓글, 한 줄 소개)
• 200-300px: 일반적인 용도 (게시글, 상품 설명)
• 400px 이상: 긴 글 작성용 (블로그, 문서)

width

• 타입: string
• 기본값: auto
• 설명: 에디터의 너비를 설정합니다. CSS 단위를 사용할 수 있습니다. 600px 로 설정하고 싶다면 600을 입력 하면 됩니다 ( px붙이지 않음 )

<FroalaEditor width="600px" />

반응형 설정 예제

주의사항

Froala Editor의 width prop은 "100%"나 복잡한 수식을 지원하지 않습니다.

권장하는 반응형 구현 방법:

// CSS와 className을 사용한 반응형 에디터
function ResponsiveEditor() {
  return (
    <div className="responsive-editor-container">
      <FroalaEditor width="auto" className="responsive-editor" />
    </div>
  );
}

.responsive-editor-container {
  width: 100%;
  max-width: 1200px; /* 최대 너비 제한 */
}

@media (max-width: 1024px) {
  .responsive-editor-container {
    max-width: 800px;
  }
}

@media (max-width: 768px) {
  .responsive-editor-container {
    max-width: 100%;
    padding: 0 1rem;
  }
}

또는 인라인 스타일 사용:

function ResponsiveEditor() {
  const [containerWidth, setContainerWidth] = useState('100%');

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 768) {
        setContainerWidth('auto');
      } else if (window.innerWidth < 1024) {
        setContainerWidth('800');
      } else {
        setContainerWidth('1200');
      }
    };

    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div style={{ width: containerWidth, maxWidth: '100%' }}>
      <FroalaEditor width="auto" />
    </div>
  );
}

className

• 타입: string | undefined
• 기본값: undefined
• 설명: 에디터 컨테이너에 추가할 CSS 클래스명을 설정합니다.

<FroalaEditor className="my-custom-editor" />

CSS 커스터마이징 예제

/* 에디터 테두리 스타일링 */
.my-custom-editor {
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  overflow: hidden;
}

/* 에디터 포커스 상태 */
.my-custom-editor:focus-within {
  border-color: #0098f7;
  box-shadow: 0 0 0 3px rgba(0, 152, 247, 0.1);
}

/* 툴바 커스터마이징 */
.my-custom-editor .fr-toolbar {
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

/* 에디터 영역 커스터마이징 */
.my-custom-editor .fr-element {
  font-family: 'Noto Sans KR', sans-serif;
  line-height: 1.6;
}

다크 모드 지원 예제

const [isDarkMode, setIsDarkMode] = useState(false);

<FroalaEditor
  className={isDarkMode ? 'dark-theme-editor' : 'light-theme-editor'}
  value={content}
  onChange={setContent}
/>

.dark-theme-editor {
background-color: #1a1a1a;
color: #ffffff;
}

.dark-theme-editor .fr-toolbar {
background-color: #2d2d2d;
border-color: #404040;
}

.dark-theme-editor .fr-element {
background-color: #1a1a1a;
color: #ffffff;
}

tag

• 타입: string
• 기본값: "textarea"
• 설명: 에디터가 렌더링될 HTML 태그를 설정합니다.

// textarea 태그 (기본값)

<FroalaEditor tag="textarea" />

// div 태그

<FroalaEditor tag="div" />

태그별 특징

textarea (기본값)

• 폼 요소로 동작합니다
• 스크린 리더 접근성이 좋습니다
• 기본 HTML 폼 검증을 활용할 수 있습니다

<form>
  <FroalaEditor tag="textarea" name="content" required />
  <button type="submit">제출</button>
</form>

div

• 블록 요소로 동작합니다
• 더 유연한 스타일링이 가능합니다
• contentEditable 방식으로 동작합니다

<FroalaEditor tag="div" className="content-editable-style" />

스타일링 팁

1. 컨테이너 기반 스타일링

<div className="editor-container">
  <FroalaEditor />
</div>

.editor-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

2. 모바일 최적화

@media (max-width: 768px) {
  .mobile-optimized-editor .fr-toolbar {
    flex-wrap: wrap;
  }

  .mobile-optimized-editor .fr-command {
    min-width: 44px;
    min-height: 44px;
  }
}

⚠️ 주의사항

CSS 충돌 방지

Froala의 기본 CSS와 충돌을 방지하기 위해 CSS 특이성을 적절히 조절하세요:

/* ❌ 너무 일반적인 선택자 */
.fr-toolbar {
  background: red;
}

/* ✅ 특정 클래스와 함께 사용 */
.my-editor .fr-toolbar {
  background: red;
}

높이 설정 시 고려사항

높이 설정 시 고려사항

• 최소 높이는 200px 이상 권장
• 툴바 높이(약 50px)도 고려해야 함
• 모바일에서는 더 큰 높이 권장 (터치 인터페이스)