MediumEditor – Inline Text Editing Toolbar for the Web

By . in Toolkit. Updated on .

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.

One tool you might like is the MediumEditor plugin based on pure JavaScript. It lets you add a custom inline text editor to any page in the same design as the Medium blog site. So, you can let readers bold, italicize, add links, headers, and pretty much everything else, with a simple visual toolbar.

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.

Read Also: Top Web Annotation and Markup Tools

MediumEditor preview

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.

Then you’ll add both the CSS and JavaScript files to the header of your website. Easy-peasy.

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.

MediumEditor sample demo

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.

Read Also: How to Zoom Images like Medium

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail