ononceditor — React Rich Text Editor
ononceditor is a WYSIWYG (what-you-see-is-what-you-get) rich text editor you drop straight into a React application. Writers freely add bold, color, headings, tables, and images as if using a word processor, while developers get back clean HTML that's easy to sanitize. It's an editor built to deliver both a good "writing experience" and "safe data" at once.
Why I built it
It started with a small frustration. Most rich text editors fetch scripts from an external CDN or are tied to a cloud service and API keys. The demos look great, but when you put one into a real service, costs appear, you depend on an external domain, and the nagging worry that the user's input is flowing off somewhere never goes away.
So I needed an editor that "just works, on my own server, with no keys." I re-bundled the well-proven KEDITOR (TinyMCE 4.x) runtime to be self-hosted, creating ononceditor — which runs with no external dependencies.
How it works
The runtime the editor needs (scripts, styles, plugins) is provided from within the project rather than externally. So even if an external CDN goes down or its pricing changes, you're unaffected.
Props-based API
The component is an ordinary React interface that takes value and onChange. Just wire it to your form state and it works, so it blends naturally into any React app.
Safe HTML output
The output is standard HTML, so a single sanitize on the server lets you render it without XSS worries. It's "published exactly as seen in the editor," yet safe.
Image upload
Uploads use a bring-your-own-endpoint approach where you inject a handler. Each project simply connects its own upload endpoint, so it isn't tied to any storage or auth method.
Where it's used
The blog and portfolio writing screens of this very site (ononc) run on ononceditor. This post, too, was written and published with the same editor. Using a tool I built every day means I fix rough edges as soon as I spot them, and those refinements make the next writing session easier.
Distribution & open source
It's distributed via npm and a GitHub install, shipping ESM and CJS builds with type definitions. The bundle is kept light by trimming it to only the necessary runtime, and the open source used (TinyMCE · KEDITOR, LGPL-2.1) is noted on the site's open-source notices page.
