포트폴리오로 돌아가기
오픈소스2026오픈소스 프로젝트

ononceditor — React 리치 텍스트 에디터

ReactTypeScriptWYSIWYG오픈소스
ononceditor — React 리치 텍스트 에디터
ononceditor — React 리치 텍스트 에디터

ononceditor는 React 프로젝트에 그대로 끼워 넣는 WYSIWYG(보는 그대로) 리치 텍스트 에디터입니다. 외부 클라우드나 API 키 없이 동작하도록 자체 호스팅 런타임으로 설계했고, 저장 결과물은 정제(sanitize)하기 좋은 깔끔한 HTML입니다.

왜 만들었나

상용 에디터는 대부분 외부 CDN에서 스크립트를 불러오거나 클라우드 서비스와 API 키에 의존합니다. 비용·종속성·프라이버시가 늘 걸림돌이었습니다. 그래서 “키 없이, 내 서버에서, 바로 쓰는” 에디터를 목표로 KEDITOR(TinyMCE 4.x) 런타임을 직접 호스팅하도록 다시 묶었습니다.

주요 기능

  • 굵게·색·제목·목록·인용·표·이미지·링크 등 풍부한 서식 (WYSIWYG)
  • 자체 호스팅 런타임 — 외부 CDN·클라우드·API 키 불필요
  • 정제 가능한 표준 HTML 출력으로 XSS 차단이 쉬움
  • 이미지 업로드는 핸들러 주입 방식(bring-your-own endpoint)
  • props 기반 API(value·onChange·uploadHandler)로 어떤 React 앱에도 통합
  • npm·GitHub 설치형으로 배포 (ESM·CJS·타입 정의 포함)

기술 스택

React · TypeScript · KEDITOR(TinyMCE 4.x) 런타임 · HTML Sanitization · tsup 번들

실제 사용처

지금 보고 계신 이 사이트(ononc)의 블로그·포트폴리오 글쓰기 화면이 바로 ononceditor로 동작합니다. 즉, 이 글도 같은 에디터로 작성·발행됩니다.

GitHub에서 소스 보기 →