MediumEditor

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

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

Browser Support

| | | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | IE 9+ ✔ | Latest ✔ |

Basic usage

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

Installation

Via bower:

Run in your console: bower install medium-editor

Manual installation:

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

<link rel="stylesheet" href="css/medium-editor.css"> <!-- Core -->
<link rel="stylesheet" href="css/themes/default.css"> <!-- or any other theme -->

The next step is to reference the editor's script

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

Usage

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

Initialization options

Core options

allowMultiParagraphSelection: enables the toolbar when selecting multiple paragraphs/block elements. Default: true
cleanPastedHTML: cleans pasted content from different sources, like google docs etc. Default: false
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
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
disablePlaceholders: enables/disables support for placeholder, including DOM element creation and attaching event handlers. When disabled, medium-editor will ignore the placholder option and not show placeholder text. 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: {}
firstHeader: HTML tag to be used as first header. Default: h3
forcePlainText: Forces pasting as plain text. Default: true
imageDragging: Allows image drag and drop into the editor. Default: true
placeholder: Defines the default placeholder for empty contenteditables when disablePlaceholders is not set to true. 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
standardizeSelectionStart: Standardizes how the beginning of a range is decided between browsers whenever the selected text is analyzed for updating toolbar buttons status

Toolbar options

activeButtonClass: CSS class added to active buttons in the toolbar. Default: 'medium-editor-button-active'
buttons: the set of buttons to display on the toolbar. Default: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote']
buttonLabels: type of labels on the buttons. Values: 'fontawesome', {'bold': '<b>b</b>', 'italic': '<i>i</i>'}. Default: false
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
disableToolbar: enables/disables the toolbar, adding only the contenteditable behavior. You can also set specific element behavior by using setting a data-disable-toolbar attribute. Default: false
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'
onShowToolbar: optional callback that will be called each time the toolbar is actually shown for this instance of medium-editor.
onHideToolbar: optional callback that will be called each time the toolbar is actually hidden for this instance of medium-editor.
staticToolbar: enable/disable the toolbar always displaying in the same location relative to the medium-editor element. Default: false
stickyToolbar: enable/disable the toolbar "sticking" to the medium-editor element when the page is being scrolled. Default: false
toolbarAlign: left|center|right - Aligns the toolbar relative to the medium-editor element.
updateOnEmptySelection: update the state of the toolbar buttons even when the selection is collapse (there is no selection, just a cursor). Default: false

Anchor form options

anchorButton: enables/disables adding class anchorButtonClass to anchor tags. Default: false
anchorButtonClass: class to add to anchor tags, when anchorButton is set to true. Default: btn
anchorInputPlaceholder: text to be shown as placeholder of the anchor input. Default: Paste or type a link
anchorInputCheckboxLabel: text to be shown for the anchor new window target. Default: Open in new window
anchorPreviewHideDelay: time in milliseconds to show the anchor tag preview after the mouse has left the anchor tag. Default: 500
checkLinkFormat: enables/disables check for common URL protocols on anchor links. Default: false
targetBlank: enables/disables target="_blank" for anchor tags. Default: false

Example:

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

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
strikethrough
unorderedlist
orderedlist
pre
justifyLeft
justifyFull
justifyCenter
justifyRight
image (this simply converts selected text to an image tag)
indent (moves the selected text up one level)
outdent (moves the selected text down one level)

Themes

Check out the Wiki page for a list of available themes: https://github.com/daviferreira/medium-editor/wiki/Themes

API

.deactivate(): disables the editor
.activate(): re-activates the editor
.serialize(): returns a JSON object with elements contents

Capturing DOM changes

For observing any changes on contentEditable

$('.editable').on('input', function() {
  // Do some work
});

This is handy when you need to capture modifications other thats outside of key up's scope like clicking on toolbar buttons.

input is supported by Chrome, Firefox, IE9 and other modern browsers. If you want to read more or support older browsers, check Listening to events of a contenteditable HTML element and Detect changes in the DOM

Extensions & Plugins

Check the documentation in order to learn how to develop extensions for MediumEditor.

A list of existing extensions and plugins, such as Images and Media embeds, Tables and Markdown can be found here.

Development

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 autoprefixer 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.

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Test your changes to the best of your ability.
Update the documentation to reflect your changes if they add or changes current functionality.
Commit your changes (git commit -am 'Added some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

Contributors

https://github.com/daviferreira/medium-editor/graphs/contributors

License

MIT: https://github.com/daviferreira/medium-editor/blob/master/LICENSE

agladysh / medium-editor