이로울 | 포트폴리오

Button Input Textarea Checkbox Radio Badge Select Toast Alert Modal Feedback RichTextEditor SideListMenu Pagination Calendar ApiHealthBadge TechBadge ButtonLink Icons AppSwiper

RichTextEditor

Interactive UI Explorer

아래에서 각 컴포넌트의 다양한 Variants와 States를 문서화된 형태로 테스트해볼 수 있습니다.

RichTextEditor

간단한 게시글 작성을 위한 WYSIWYG 에디터 컴포넌트입니다.
Antigraffiti(dompurify)를 통해 XSS 공격을 방지하도록 처리된 HTML을 반환합니다.
기본적으로 Tailwind CSS 기반의 타이포그래피 스타일(p, h3, blockquote, list 등)이 적용되어 있으며,tagStyles props를 통해 태그별 스타일을 커스터마이징할 수 있습니다.

기본 에디터

Toolbar(Bold, Italic, Link)와 ContentEditable 영역을 제공합니다.

Source Code

          const [html, setHtml] = useState('');

          <RichTextEditor
            onChange={setHtml}
          />

          {/* 결과 출력 (Sanitized HTML) */}
          <div>{html}</div>

Sanitized Output

입력된 내용이 없습니다.

* 이 컴포넌트는 게시판 등록용 에디터입니다. (Antigraffiti 적용됨)

Live Preview