Medium Style Inline Rich Text Editor – Medium Editor

Category: Javascript , Recommended , Text | June 12, 2018
Views Total:5,547 views
Official Page:Go to website
Last Update:June 12, 2018


Medium Style Inline Rich Text Editor – Medium Editor


Medium Editor is a standalone javascript library for creating a floating text editor bar that shows up when you select a piece of text of your page. Inspired by the awesomeness of

See also:

How to use it:

Medium Editor’s default styling uses FontAwesome draw the icons on the context bubble.

<link rel="stylesheet" href="font-awesome.css">

Include the required medium-editor.css and a theme CSS for your choice in the header.

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

Wrap the text you want to make editable in a container.

<div class="editable">
Your content goes here

Include the medium-editor.js at the bottom of the page.

<script src="/dist/js/medium-editor.js"></script>

The javascript to enable the editor.

var editor = new MediumEditor('.editable', {
    buttonLabels: 'fontawesome'

Available options to customize your editor.

var editor = new MediumEditor('.editable', {
    // active class
    activeButtonClass: 'medium-editor-button-active',
    // shows fontawesome icons
    buttonLabels: false,
    // time to wait before showing the editor
    delay: 0,
    // disables return key
    disableReturn: false,
    disableDoubleReturn: false,
    // disables two (or more) empty new lines
    disableExtraSpaces: false,
    // disables adding the contenteditable behavior
    disableEditing: false,
    // auto linkify links
    autoLink: false,
    // container element
    elementsContainer: false,
    // content window
    contentWindow: window,
    // root element
    ownerDocument: document,
    // uses target=_blank attribute
    targetBlank: false,
    // enables extensions
    extensions: {},
    // enables spell check
    spellcheck: true

All default options for the toolbar.

var editor = new MediumEditor('.editable', {
    toolbar: {
      /* align: ['left'|'center'|'right']
       * When the __static__ option is true, this aligns the static toolbar
       * relative to the medium-editor element.
      align: 'center',
      /* allowMultiParagraphSelection: [boolean]
       * enables/disables whether the toolbar should be displayed when
       * selecting multiple paragraphs/block elements
      allowMultiParagraphSelection: true,
      /* buttons: [Array]
       * the names of the set of buttons to display on the toolbar.
      buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
      /* diffLeft: [Number]
       * value in pixels to be added to the X axis positioning of the toolbar.
      diffLeft: 0,
      /* diffTop: [Number]
       * value in pixels to be added to the Y axis positioning of the toolbar.
      diffTop: -10,
      /* firstButtonClass: [string]
       * CSS class added to the first button in the toolbar.
      firstButtonClass: 'medium-editor-button-first',
      /* lastButtonClass: [string]
       * CSS class added to the last button in the toolbar.
      lastButtonClass: 'medium-editor-button-last',
      /* standardizeSelectionStart: [boolean]
       * enables/disables standardizing how the beginning of a range is decided
       * between browsers whenever the selected text is analyzed for updating toolbar buttons status.
      standardizeSelectionStart: false,
      /* static: [boolean]
       * enable/disable the toolbar always displaying in the same location
       * relative to the medium-editor element.
      static: false,
      /* sticky: [boolean]
       * When the __static__ option is true, this enables/disables the toolbar
       * "sticking" to the viewport and staying visible on the screen while
       * the page scrolls.
      sticky: false,
      /* stickyTopOffset: [Number]
       * Value in pixel of the top offset above the toolbar
      stickyTopOffset: 0,
      /* updateOnEmptySelection: [boolean]
       * When the __static__ option is true, this enables/disables updating
       * the state of the toolbar buttons even when the selection is collapsed
       * (there is no selection, just a cursor).
      updateOnEmptySelection: false,
      /* relativeContainer: [node]
       * appending the toolbar to a given node instead of body
      relativeContainer: null


v5.23.3 (06/12/2018)

  • Fix medium-editor-insert plugin css fixes on beagle theme
  • Update jsDelivr links
  • Fix Firefox console warning
  • Do not check only for null targets or it will fail when it’s undefined.
  • Fix crash when ‘extensions’ in ‘isElementDescendantOfExtension’
  • Fix Jasmine Unit Test
  • Fix null error on pastedPlain.split
  • Fix broken browser tests

You Might Be Interested In:

Leave a Reply