yabwe/medium-editor

★ 16,109JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((medium-editor))
    What it does
      Rich text editing
      Floating toolbar
      contenteditable wrapper
    Features
      Custom buttons
      Textarea sync
      Extensions API
    Use Cases
      Blog composer
      Comment box
      CMS field
    Install
      npm
      CDN jsDelivr
      Bower

mindmap root((medium-editor)) What it does Rich text editing Floating toolbar contenteditable wrapper Features Custom buttons Textarea sync Extensions API Use Cases Blog composer Comment box CMS field Install npm CDN jsDelivr Bower

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add a clean floating-toolbar text editor to a blog composer or CMS so users can bold, italicize, and link text without writing HTML.

USE CASE 2

Embed a formatted comment box on your site that mimics the Medium writing experience.

USE CASE 3

Extend the editor with custom toolbar buttons using the extensions API to add features like image embedding or syntax highlighting.

Tech stack

JavaScriptCSSnpm

Getting it running

Difficulty · easy Time to first run · 30min

License terms were not mentioned in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1

Show me how to add medium-editor to an HTML page, enable bold, italic, and link buttons, and sync the formatted HTML to a hidden textarea for form submission.

Prompt 2

How do I configure medium-editor so pressing Enter creates a new paragraph but Shift+Enter does not insert a line break?

Prompt 3

I want to write a custom medium-editor extension that adds a toolbar button to insert a horizontal rule. Show me the extension skeleton.

Open on GitHub → Explain another repo

← yabwe on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.