gitmyhub

medium-editor

JavaScript ★ 16k updated 1y ago

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.

A lightweight JavaScript library that adds a floating-toolbar rich-text editor to any webpage, inspired by Medium.com writing interface, with no framework dependencies.

JavaScriptCSSnpmsetup: easycomplexity 2/5

medium-editor is a JavaScript library that adds a rich-text editor to a web page, modelled on the floating toolbar editor used on Medium.com. It lets visitors type into a region of your site and apply formatting — bold, italic, underline, links, headings, blockquotes — through a small toolbar that pops up when they select text, rather than a permanent toolbar at the top of the page.

Under the hood, it relies on the browser's built-in contenteditable feature, which already turns any HTML element into an editable area. medium-editor wraps that low-level capability with a friendlier API, a movable toolbar, default styles, and a set of behaviour options. You include the script and stylesheet on your page, then create a new MediumEditor and point it at one or more HTML elements (or a textarea, in which case the library quietly creates an editable div behind the scenes and keeps the textarea's value in sync). You can configure which buttons appear in the toolbar, disable the return key or double newlines, control spell-check, force links to open in new tabs, and load custom extensions to add your own buttons.

You would reach for medium-editor when you want a clean, Medium-style writing experience inside a blog composer, a comment box, a CMS, or any web form where users need to format text without learning HTML. Community-written wrappers exist for integrating it with various front-end frameworks.

The library is written in plain JavaScript with no framework dependencies and ships with CSS themes. It installs through npm or bower, can be loaded from CDNs such as jsDelivr and CDNJS, or downloaded from the GitHub releases page. The README opens with a call for new maintainers.

Where it fits