AlloyEditor a Medium style WYSIWYG Editor

AlloyEditor is an open source WYSIWYG editor that puts a new spin on an old favorite. Leveraging CKEditor it adds a new UI and you can still use any of the existing CKEditor plugins.

It includes drag and drop image uploading, tables, Twitter share links, and everything else a typical WYSIWYG ships with. Instead of a typical big toolbar, it does all the editing inline and is invoked when you highlight a word, phrase, or paragraph.

It’s fully skinnable through CSS and here are a few that come included by default:

With the three styles, this should you give you a good starting point to modify and make one match your own site.

AlloyEditor Installation

You can install it through NPM, Bower, or a direct download and all that is required for setup is to include the skin and JavaScript:

<link href=”alloy-editor/assets/alloy-editor-ocean-min.css” rel=”stylesheet”>
http://âalloy-editor/alloy-editor-all-min.jsâ

Then invoking the editor by targeting the ID of the element:

AlloyEditor.editable(‘myContentEditable’);

➔ Checkout the AlloyEditor site for more information and a live demo.