WYSIWYG editor clone.
Pull request Compare This branch is 2363 commits behind yabwe:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


This is a clone of inline editor toolbar.

Since I always had problems with bloated editors and I loved the simplicity of solution I've tried to implement their WYSIWYG approach with this script.

MediumEditor has been written using vanilla JavaScript, no additional frameworks required.

Tested on Googe Chrome, Firefox and IE9+.

Build Status

Basic usage



First, you need to attach medium editor's stylesheet to your page:

<link rel="stylesheet" href="css/medium-editor.css">

The next step is to reference the editor's script and instantiate a new MediumEditor object:

<script src="js/medium-editor.js"></script>
<script>var editor = new MediumEditor('.editable');</script>

The above code will transform all the elements with the .editable class into HTML5 editable contents and add the medium editor toolbar to them.

You can also pass a list of HTML elements:

var elements = document.querySelectorAll('.editable'),
    editor = new MediumEditor(elements);

Initialization options

  • anchorInputPlaceholder: text to be shown as placeholder of the anchor input. Default: Paste or type a link
  • buttons: the set of buttons to display on the toolbar. Default: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote']
  • delay: time in milliseconds to show the toolbar. Default: 0
  • diffLeft: value in pixels to be added to the X axis positioning of the toolbar. Default: 0
  • diffTop: value in pixels to be added to the Y axis positioning of the toolbar. Default: -5
  • disableReturn: enables/disables the use of the return-key. You can also set specific element behavior by using setting a data-disable-return attribute. Default: false
  • disableToolbar: enables/disables the toolbar, adding only thecontenteditable behavior. You can also set specific element behavior by using setting a data-disable-toolbar attribute. Default: false
  • firstHeader: HTML tag to be used as first header. Default: h3
  • forcePlainText: Forces pasting as plain text. Default: true
  • placeholder: Defines the default placeholder for empty contenteditables. You can overwrite it by setting a data-placeholder attribute on your elements. Default: 'Type your text'
  • secondHeader: HTML tag to be used as second header. Default: h4


var editor = new MediumEditor('.editable', {
    anchorInputPlaceholder: 'Type a link',
    buttons: ['bold', 'italic', 'quote'],
    diffLeft: 25,
    diffTop: 10,
    firstHeader: 'h1',
    secondHeader: 'h2',
    delay: 1000

Extra buttons

Medium Editor, by default, will show only the buttons listed above to avoid a huge toolbar. There are a couple of extra buttons you can use:

  • superscript
  • subscript
  • unorderedlist
  • orderedlist


  • .deactivate(): disables the editor
  • .activate(): re-activates the editor

Image Upload

Pavel Linkesch has developed a jQuery plugin to upload images following functionality. Check it out at


MediumEditor development tasks are managed by Grunt. To install all the necessary packages, just invoke:

npm install

These are the available grunt tasks:

  • js: runs jslint and jasmine tests and creates minified and concatenated versions of the script;
  • css: runs compass and csslint
  • test: runs jasmine tests, jslint and csslint
  • watch: watch for modifications on script/scss files

The source files are located inside the src directory. MediumEditor stylesheet was created using sass/compass, make sure you have the compass gem installed on your system.


"THE BEER-WARE LICENSE" (Revision 42):

As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.

Bitdeli Badge