Medium Style Inline Rich Text Editor – Medium Editor

Category: Javascript , Recommended , Text | June 12, 2018
Author: yabwe
Views Total: 4,505
Official Page: Go to website
Last Update: June 12, 2018
License: MIT

Preview:

Medium Style Inline Rich Text Editor – Medium Editor

Description:

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:

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

You Might Be Interested In:


Leave a Reply