MediumEditor – Inline Text Editing Toolbar for a Web

Everyone knows Medium.com and their extravagantly renouned blogging platform. They redefined a lot of ideas in a pattern world and we can find lots of tutorials training we how to counterpart their designs.

One apparatus we competence like is a MediumEditor plugin formed on pristine JavaScript. It lets we add a tradition inline content editor to any page in a same pattern as a Medium blog site. So, we can let readers bold, italicize, supplement links, headers, and flattering many all else, with a elementary visible toolbar.

Note this plan is not dependent with Medium in any approach so it’s not an central plugin.

It was combined by a fan of a site and someone who loves a Medium pattern style. You can learn some-more about a setup on GitHub that stores all a code, totally giveaway for use.

MediumEditor previewMediumEditor preview

The editor works in all vital browsers, including a stream chronicle of Microsoft Edge and IE. It even supports comparison versions of Internet Explorer, dating behind to IE7. Crazy!

Installation is a zephyr where we can pull all a files directly around npm or Bower, or even use a giveaway online CDN such as JSDelivr.

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

From there, we call a editor with a singular line of code:

var editor = new MediumEditor('.editable');

You can pass a list of page elements that should usually work with a editor, or we can let it run opposite a whole page.

Probably a many unsentimental use of this plugin is to create some form of WYSIWYG editor for a web app.

It doesn’t hoop flitting information behind forth between a server and a client, so you’ll need to emanate that proof yourself. Still, this plugin is so many easier than starting from scratch.

MediumEditor representation demoMediumEditor representation demo

If we corkscrew to a really bottom of a MediumEditor demo page you’ll find a list of extensions we can exam as well. These embody full discount editing, along with Medium-style buttons and other interface features.

This plugin is rarely endorsed for any fans of Medium who wish to replicate some of their UX in another project.

Add Comment