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 Medium.com.

See also:

• Medium Style Text Selection Sharing Library – share-this
• Medium-style Image Loading Effect
• Medium-like Image Zoom In Pure JavaScript – zoom.js
• Responsive Medium.com Inspired Gallery & Layout

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
</div>

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
    // https://github.com/yabwe/medium-editor/tree/master/src/js/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
      
    }
});

Changelog:

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