jQuery insert plugin for MediumEditor

This plugin expands capabilities of MediumEditor (a clone of medium.com WYSIWYG editor) and it enables users to insert into the editor various types of content (depending on available addons).

Current available addons:

images
embeds (either through oEmbed proxy, such as Iframely, or pre-defined parsers such as - Youtube, Vimeo, Twitter, Facebook, Instagram)

Demo

http://orthes.github.io/medium-editor-insert-plugin

Download

Via npm:

npm install medium-editor-insert-plugin --save

Via bower:

bower install medium-editor-insert-plugin --save

Manual:

Download the latest release

Quick Start

The first step is to include the plugin with all its dependencies to your code:

<!-- Font Awesome for awesome icons. You can redefine icons used in a plugin configuration -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<!-- CSS -->
<link rel="stylesheet" href="https://github.com/linkesch/medium-editor-insert-plugin/blob/master/bower_components/medium-editor/dist/css/medium-editor.min.css">
<link rel="stylesheet" href="https://github.com/linkesch/medium-editor-insert-plugin/blob/master/bower_components/medium-editor/dist/css/themes/default.css">
<link rel="stylesheet" href="https://github.com/linkesch/medium-editor-insert-plugin/blob/master/bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">

<!-- JS -->
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/medium-editor/dist/js/medium-editor.js"></script>
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/handlebars/handlebars.runtime.min.js"></script>
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/jquery-sortable/source/js/jquery-sortable-min.js"></script>
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="https://github.com/linkesch/medium-editor-insert-plugin/raw/master/bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.min.js"></script>

<!--
OR YOU CAN USE CDN for a Quick Reference in Development Mode. [Dated Dec-2018 Latest Version] Recommented latest verions as moves on!

CSS
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor-insert-plugin/2.5.0/css/medium-editor-insert-plugin-frontend.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor-insert-plugin/2.5.0/css/medium-editor-insert-plugin.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css" />

JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.runtime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.ui.widget@1.10.3/jquery.ui.widget.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.iframe-transport/1.0.1/jquery.iframe-transport.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.fileupload.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor-insert-plugin/2.5.0/js/medium-editor-insert-plugin.min.js"></script>
-->

Initialize MediumEditor as you normally would:

var editor = new MediumEditor('.editable');

Finally, you can initialize the insert plugin:

$(function () {
    $('.editable').mediumInsert({
        editor: editor
    });
});

Documentation

Contributors

Thanks goes to these wonderful people (emoji key):

_{Pavel Linkesch} 💻 📖 🚧 👀	_{Jérémy Benoist} 💻 🚧 👀	_{Nazar Leush} 💻	_{Andrey Sitnik} 💻	_{Jeremy Epstein} 💻	_{Hikaru Tooyama} 💻	_{Alexandr Subbotin} 💻
_{Vinicius Patrinhani} 💻	_{Firas Bessadok} 💻	_{Omnia G Helmi} 💻	_{Daniel Huang} 💻	_{Alex Xandra Albert Sim} 💻	_{Brandon Renfrow} 💻	_BurnHavoc 💻
_Enzo 💻	_{Jonathon Sim} 💻	_{Kazuya Hara} 💻	_{Miloš Hadžić} 💻	_Siron 💻	_{Sam Auciello} 💻	_{Sean Cashin} 💻
_{Yu Zhai} 💻	_acekat 💻	_linpekka 💻	_sainu 💻	_{Murat Tasarsu} 💻	_{Anil Kumar Maurya} 💻	_{Artem Shevtsov} 💻
_{Baptiste Gaillard} 💻	_{Bernard Wolff} 💻	_{Carl Scott} 💻	_{Chris Joe} 💻	_{Daniel Wang} 💻	_{Derrek Bertrand} 💻	_{Gabi Maeztu} 💻
_{Hussein Jafferjee} 💻	_{Indra Santosa} 💻	_{Ivan Paramonau} 💻	_JK 💻	_{Jeff Bellsey} 💻	_{Kenzo Okamura} 💻	_{Matei Dorobantu} 💻
_{Max Kirchoff} 💻	_MrEcl 💻	_{Raphaël Vercruyssen} 💻	_{Sebastian Zorn} 💻	_tsbalzhanov 💻	_bjrenfrow 💻	_orhan 💻
_swolfod 💻	_{Eligijus Krėpšta} 💻