Editor

NCDS 에디터는 Froala Editor를 기반으로 구현된 강력한 리치 텍스트 에디터 컴포넌트입니다. React 기반으로 구축되었으며, 다양한 편집 기능과 커스터마이징 옵션을 제공합니다. Froala Editor / react-froala-wysiwyg 4.5.2 버전을 wrapping 하여 구현되었습니다.

주요 특징

• 강력한 편집 기능: 텍스트 서식, 이미지 삽입, 링크, 표 등 풍부한 편집 도구 제공
• 반응형 지원: 다양한 화면 크기에 최적화된 툴바와 인터페이스
• 커스터마이징: 툴바 버튼, 높이, 플레이스홀더 등 다양한 옵션 설정 가능
• 이미지 업로드: 드래그 앤 드롭, 클립보드 붙여넣기를 통한 이미지 업로드 지원
• iframe 모드: 스타일 충돌을 방지하는 독립적인 편집 환경 제공

패키지 설치

npm install @ncds/editor

공식 문서 참조

📖 Froala Editor의 모든 기능과 상세한 옵션은 Froala 공식 문서를 참조하세요.

이 문서에서는 NCDS 환경에서 Froala Editor를 사용하기 위한 주요 기능과 설정 방법만 소개합니다.

빠른 시작

💡 아래는 실제 동작하는 NCDS 에디터입니다. 직접 사용해보세요!

로딩 중...

현재 내용: (비어있음)

가장 간단한 형태의 에디터를 사용하는 방법입니다:

import { useState } from 'react';
import { FroalaEditor } from '@ncds/editor';

function BasicEditor() {
  const [content, setContent] = useState('');

  return <FroalaEditor value={content} onChange={setContent} licenseKey="your-license-key" />;
}

더 자세한 사용법은 기본 Props 페이지를 확인하세요.