ononceditor — React 리치 텍스트 에디터
ononceditor는 React 애플리케이션에 그대로 끼워 넣어 쓰는 WYSIWYG(보는 그대로) 리치 텍스트 에디터입니다. 글을 쓰는 사람은 워드를 다루듯 굵게·색·제목·표·이미지를 자유롭게 넣고, 개발자는 그 결과를 정제(sanitize)하기 좋은 깔끔한 HTML로 돌려받습니다. “쓰는 경험”과 “안전한 데이터”라는 두 가지를 동시에 챙기려고 만든 에디터예요.
왜 만들었나
시작은 작은 불편함이었습니다. 시중의 리치 텍스트 에디터는 대부분 외부 CDN에서 스크립트를 받아오거나, 클라우드 서비스와 API 키에 묶여 있습니다. 데모는 근사하지만 막상 실제 서비스에 넣으려고 보면 비용이 붙고, 외부 도메인에 의존하게 되며, 사용자가 입력한 내용이 어디론가 흘러가는 점이 늘 마음에 걸렸습니다.
그래서 “키 없이, 내 서버에서, 그냥 바로 쓰는” 에디터가 필요했습니다. 충분히 검증된 KEDITOR(TinyMCE 4.x) 런타임을 직접 호스팅하도록 다시 묶어, 외부 의존성 없이 동작하는 ononceditor를 만들었습니다.
어떻게 동작하나
에디터가 필요로 하는 런타임(스크립트·스타일·플러그인)을 외부가 아니라 프로젝트 안에서 직접 제공합니다. 그래서 외부 CDN이 멈추거나 요금 정책이 바뀌어도 영향을 받지 않습니다.
props 기반 API
컴포넌트는 value와 onChange를 받는 평범한 React 인터페이스입니다. 가지고 있는 폼 상태에 연결하기만 하면 그대로 동작하므로, 어떤 React 앱에도 자연스럽게 녹아듭니다.
안전한 HTML 출력
출력은 표준 HTML이라 서버에서 한 번 정제(sanitize)하면 XSS 걱정 없이 그대로 렌더링할 수 있습니다. “에디터에서 본 그대로 발행”되면서도 안전합니다.
이미지 업로드
업로드는 핸들러를 주입하는(bring-your-own endpoint) 방식입니다. 각 프로젝트가 자신의 업로드 엔드포인트만 연결해 주면 되므로, 저장소나 인증 방식에 종속되지 않습니다.
실제 사용처
지금 보고 계신 이 사이트(ononc)의 블로그와 포트폴리오 글쓰기 화면이 바로 ononceditor로 동작합니다. 이 글 또한 같은 에디터로 작성해 발행했습니다. 만든 도구를 매일 직접 쓰다 보니 불편한 부분이 보이면 곧바로 고치게 되고, 그렇게 다듬어진 부분이 다시 다음 글쓰기를 편하게 만들어 줍니다.
배포와 오픈소스
npm과 GitHub 설치형으로 배포하며, ESM·CJS 빌드와 타입 정의를 함께 제공합니다. 번들에는 꼭 필요한 런타임만 트리밍해 담아 가볍게 유지했고, 사용한 오픈소스(TinyMCE·KEDITOR, LGPL-2.1)는 사이트의 오픈소스 고지 페이지에 명시했습니다.
