# MediumEditor

This is a clone of medium.com inline editor toolbar.

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

Browser Support

Basic usage

Demo

demo: http://yabwe.github.io/medium-editor/

Installation

Via npm:

Run in your console: npm install medium-editor

Via bower:

bower install medium-editor

Via an external CDN

• Using jsDelivr.

For the latest version:

```html

```

For a custom one:

```html

```

• Using CDNJS.

Manual installation:

Download the latest release and attach medium editor's stylesheets to your page:

Find the files to below mentioned linking in the dist folder. (./medium-editor/dist/...)

<link rel="stylesheet" href="https://github.com/yabwe/medium-editor/raw/5.23.3/css/medium-editor.css"> 
<link rel="stylesheet" href="https://github.com/yabwe/medium-editor/raw/5.23.3/css/themes/default.css"> 

Usage

The next step is to reference the editor's script

<script src="https://github.com/yabwe/medium-editor/raw/5.23.3/js/medium-editor.js"></script>

You can now instantiate a new MediumEditor object:

<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);

MediumEditor also supports textarea. If you provide a textarea element, the script will create a new div with contentEditable=true, hide the textarea and link the textarea value to the div HTML content.

Integrating with various frameworks

People have contributed wrappers around MediumEditor for integrating with different frameworks and tech stacks. Take a look at the list of existing Wrappers and Integrations that have already been written for MediumEditor!

MediumEditor Options

View the MediumEditor Options documentation on all the various options for MediumEditor.

Options to customize medium-editor are passed as the second argument to the MediumEditor constructor. Example:

var editor = new MediumEditor('.editor', {
    // options go here
});

Core options

• activeButtonClass: CSS class added to active buttons in the toolbar. Default: 'medium-editor-button-active'
• buttonLabels: type of labels on the buttons. Values: false | 'fontawesome'. Default: false

NOTE:

Using 'fontawesome' as the buttonLabels requires version 4.1.0 of the fontawesome css to be on the page to ensure all icons will be displayed correctly

• delay: time in milliseconds to show the toolbar or anchor tag preview. Default: 0
• 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
• disableDoubleReturn: allows/disallows two (or more) empty new lines. You can also set specific element behavior by using setting a data-disable-double-return attribute. Default: false
• disableExtraSpaces: when set to true, it disallows spaces at the beginning and end of the element. Also it disallows entering 2 consecutive spaces between 2 words. Default: false
• disableEditing: enables/disables adding the contenteditable behavior. Useful for using the toolbar with customized buttons/actions. You can also set specific element behavior by using setting a data-disable-editing attribute. Default: false
• elementsContainer: specifies a DOM node to contain MediumEditor's toolbar and anchor preview elements. Default: document.body
• extensions: extension to use (see Custom Buttons and Extensions) for more. Default: {}
• spellcheck: Enable/disable native contentEditable automatic spellcheck. Default: true
• targetBlank: enables/disables target="_blank" for anchor tags. Default: false

Toolbar options

The toolbar for MediumEditor is implemented as a built-in extension which automatically displays whenever the user selects some text. The toolbar can hold any set of defined built-in buttons, but can also hold any custom buttons passed in as extensions.

Options for the toolbar are passed as an object that is a member of the outer options object. Example:

var editor = new MediumEditor('.editable', {
    toolbar: {
        /* These are the default options for the toolbar,
           if nothing is passed this is what is used */
        allowMultiParagraphSelection: true,
        buttons: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote'],
        diffLeft: 0,
        diffTop: -10,
        firstButtonClass: 'medium-editor-button-first',
        lastButtonClass: 'medium-editor-button-last',
        relativeContainer: null,
        standardizeSelectionStart: false,
        static: false,
        /* options which only apply when static is true */
        align: 'center',
        sticky: false,
        updateOnEmptySelection: false
    }
});

• allowMultiParagraphSelection: enables/disables whether the toolbar should be displayed when selecting multiple paragraphs/block elements. Default: true
• buttons: the set of buttons to display on the toolbar. Default: ['bold', 'italic', 'underline', 'anchor', 'h2', 'h3', 'quote']
• See Button Options for details on more button options
• 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: -10
• firstButtonClass: CSS class added to the first button in the toolbar. Default: 'medium-editor-button-first'
• lastButtonClass: CSS class added to the last button in the toolbar. Default: 'medium-editor-button-last'
• relativeContainer: DOMElement to append the toolbar to instead of the body. When passed, the toolbar will also be positioned relative instead of absolute. Default: null
• standardizeSelectionStart: enables/disables standardizing how the beginning of a range is decided between browsers whenever the selected text is analyzed for updating toolbar buttons status. Default: false
• static: enable/disable the toolbar always displaying in the same location relative to the medium-editor element. Default: false

Options which only apply when the static option is being used:

• align: left|center|right - When the static option is true, this aligns the static toolbar relative to the medium-editor element. Default: center
• sticky: 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. Default: false
• updateOnEmptySelection: 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). Default: false

To disable the toolbar (which also disables the anchor-preview extension), set the value of the toolbar option to false:

var editor = new MediumEditor('.editable', {
    toolbar: false
});

Button Options

Button behavior can be modified by passing an object into the buttons array instead of a string. This allow for overriding some of the default behavior of buttons. The following options are some of the basic parts of buttons that you may override, but any part of the MediumEditor.Extension.prototype can be overridden via these button options. (Check out the source code for buttons to see what all can be overridden).

• name: name of the button being overridden
• action: argument to pass to MediumEditor.execAction() when the button is clicked.
• aria: value to add as the aria-label attribute of the button element displayed in the toolbar. This is also used as the tooltip for the button.
• tagNames: array of element tag names that would indicate that this button has already been applied. If this action has already been applied, the button will be displayed as 'active' in the toolbar.
• Example: For 'bold', if the text is ever within a <b> or <strong> tag that indicates the text is already bold. So the array of tagNames for bold would be: ['b', 'strong']
• NOTE: This is not used if useQueryState is set to true.
• style: A pair of css property & value(s) that indicate that this button has already been applied. If this action has already been applied, the button will be displayed as 'active' in the toolbar.
• Example: For 'bold', if the text is ever within an element with a 'font-weight' style property set to 700 or 'bold', that indicates the text is already bold. So the style object for bold would be { prop: 'font-weight', value: '700|bold' }
• NOTE: This is not used if useQueryState is set to true.
• Properties of the style object:
  • prop: name of the css property
  • value: value(s) of the css property (multiple values can be separated by a '|')
• useQueryState: Enables/disables whether this button should use the built-in document.queryCommandState() method to determine whether the action has already been applied. If the action has already been applied, the button will be displayed as 'active' in the toolbar
• Example: For 'bold', if this is set to true, the code will call document.queryCommandState('bold') which will return true if the browser thinks the text is already bold, and false otherwise
• contentDefault: Default innerHTML to put inside the button
• contentFA: The innerHTML to use for the content of the button if the buttonLabels option for MediumEditor is set to 'fontawesome'
• classList: An array of classNames (strings) to be added to the button
• attrs: A set of key-value pairs to add to the button as custom attributes to the button element.

Example of overriding buttons (here, the goal is to mimic medium by having H1 and H2 buttons which actually produce <h2> and <h3> tags respectively):

var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: [
            'bold',
            'italic',
            {
                name: 'h1',
                action: 'append-h2',
                aria: 'header type 1',
                tagNames: ['h2'],
                contentDefault: '<b>H1</b>',
                classList: ['custom-class-h1'],
                attrs: {
                    'data-custom-attr': 'attr-value-h1'
                }
            },
            {
                name: 'h2',
                action: 'append-h3',
                aria: 'header type 2',
                tagNames: ['h3'],
                contentDefault: '<b>H2</b>',
                classList: ['custom-class-h2'],
                attrs: {
                    'data-custom-attr': 'attr-value-h2'
                }
            },
            'justifyCenter',
            'quote',
            'anchor'
        ]
    }
});

Anchor Preview options

The anchor preview is a built-in extension which automatically displays a 'tooltip' when the user is hovering over a link in the editor. The tooltip will display the href of the link, and when click, will open the anchor editing form in the toolbar.

Options for the anchor preview 'tooltip' are passed as an object that is a member of the outer options object. Example:

var editor = new MediumEditor('.editable', {
    anchorPreview: {
        /* These are the default options for anchor preview,
           if nothing is passed this is what it used */
        hideDelay: 500,
        previewValueSelector: 'a'
    }
}
});

• hideDelay: time in milliseconds to show the anchor tag preview af