MediumEditor – Inline Text Editing Toolbar for the Web
Everyone knows Medium.com and their wildly popular blogging platform. They redefined a lot of ideas in the design world and you can find lots of tutorials teaching you how to clone their designs.
Note this project is not affiliated with Medium in any way so it’s not an official plugin.
It was created by a fan of the site and someone who loves the Medium design style. You can learn more about the setup on GitHub which stores all the code, totally free for use.
The editor works in all major browsers, including the current version of Microsoft Edge and IE. It even supports older versions of Internet Explorer, dating back to IE7. Crazy!
Installation is a breeze where you can pull all the files directly via npm or Bower, or even use a free online CDN such as JSDelivr.
From there, you call the editor with a single line of code:
var editor = new MediumEditor('.editable');
You can pass a list of page elements that should only work with the editor, or you can let it run across the whole page.
Probably the most practical use of this plugin is to create some type of WYSIWYG editor for a web app.
It doesn’t handle passing data back & forth between the server and the client, so you’ll need to create that logic yourself. Still, this plugin is so much easier than starting from scratch.
If you scroll to the very bottom of the MediumEditor demo page you’ll find a list of extensions you can test as well. These include full markdown editing, along with Medium-style buttons and other interface features.
This plugin is highly recommended for any fans of Medium who want to replicate some of their UX in another project.