Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

medium-editor

Package Overview
Dependencies
Maintainers
1
Versions
125
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

medium-editor

Medium.com WYSIWYG editor clone.

  • 1.5.0
  • 1.5.0
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

MediumEditor

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

Since I always had problems with bloated editors and I loved the simplicity of medium.com solution I've tried to implement their WYSIWYG approach with this script.

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

Tested on Google Chrome, Firefox and IE9+.

Build Status

Basic usage

screenshot

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

First, you need to attach medium editor's stylesheet to your page:

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

The next step is to reference the editor's script and instantiate a new MediumEditor object:

<script src="js/medium-editor.js"></script>
<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

  • allowMultiParagraphSelection: enables the toolbar when selecting multiple paragraphs/block elements. Default: true
  • anchorInputPlaceholder: text to be shown as placeholder of the anchor input. Default: Paste or type a link
  • 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
  • delay: time in milliseconds to show the toolbar. Default: 0
  • 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
  • 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
  • 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
  • firstHeader: HTML tag to be used as first header. Default: h3
  • forcePlainText: Forces pasting as plain text. Default: true
  • placeholder: Defines the default placeholder for empty contenteditables. 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
  • 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

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

Image Upload

Pavel Linkesch has developed a jQuery plugin to upload images following Medium.com functionality. Check it out at http://orthes.github.io/medium-editor-insert-plugin/

Angular directive

Thijs Wijnmaalen hacked together an AngularJS directive. Check it out at https://github.com/thijsw/angular-medium-editor

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 compass 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. MediumEditor stylesheet was created using sass/compass, make sure you have the compass gem installed on your system.

Contributing

Stories in Ready

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

Contributors

 project  : medium-editor
 repo age : 8 months
 active   : 82 days
 commits  : 354
 files    : 41
 authors  :
   268	Davi Ferreira           75.7%
    20	Maxime de Visscher      5.6%
     8	Jarl Gunnar T. Flaten   2.3%
     8	Derek Odegard           2.3%
     8	Pedro Nasser            2.3%
     4	Sebastian Zuchmanski    1.1%
     4	minikomi                1.1%
     3	Dmitri Cherniak         0.8%
     3	arol                    0.8%
     3	Andrew Hubbs            0.8%
     3	Troels Knak-Nielsen     0.8%
     2	Nikita Korotaev         0.6%
     1	Noah Paessel            0.3%
     1	Pavel Linkesch          0.3%
     1	Tom MacWright           0.3%
     1	happyaccidents          0.3%
     1	muescha                 0.3%
     1	t_kjaergaard            0.3%
     1	typify                  0.3%
     1	Adam Mulligan           0.3%
     1	waffleio                0.3%
     1	Bitdeli Chef            0.3%
     1	David Collien           0.3%
     1	David Hellsing          0.3%
     1	Denis Gorbachev         0.3%
     1	Jeff Welch              0.3%
     1	Mark Kraemer            0.3%
     1	Max                     0.3%
     1	Maxime Dantec           0.3%
     1	Maxime De Visscher      0.3%
     1	Michael Kay             0.3%
     1	Moore Adam              0.3%

License

"THE BEER-WARE LICENSE" (Revision 42):

As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.

Bitdeli Badge

FAQs

Package last updated on 22 Mar 2014

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc