Skip to content

WTTJ/medium-editor-insert-plugin

 
 

Repository files navigation

jQuery insert plugin for MediumEditor

Gitter Build Status Codacy Badge CDNJS

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="bower_components/medium-editor/dist/css/medium-editor.min.css">
<link rel="stylesheet" href="bower_components/medium-editor/dist/css/themes/default.css">
<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">

<!-- JS -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/medium-editor/dist/js/medium-editor.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.min.js"></script>
<script src="bower_components/jquery-sortable/source/js/jquery-sortable-min.js"></script>
<script src="bower_components/blueimp-file-upload/js/vendor/jquery.ui.widget.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.iframe-transport.js"></script>
<script src="bower_components/blueimp-file-upload/js/jquery.fileupload.js"></script>
<script src="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
    });
});

Contributors

Thanks goes to these wonderful people (emoji key):

Pavel Linkesch
Pavel Linkesch

💻 📖 🚧 👀
Jérémy Benoist
Jérémy Benoist

💻 🚧 👀
Nazar Leush
Nazar Leush

💻
Andrey Sitnik
Andrey Sitnik

💻
Jeremy Epstein
Jeremy Epstein

💻
Hikaru Tooyama
Hikaru Tooyama

💻
Alexandr Subbotin
Alexandr Subbotin

💻
Vinicius Patrinhani
Vinicius Patrinhani

💻
Firas Bessadok
Firas Bessadok

💻
Omnia G Helmi
Omnia G Helmi

💻
Daniel Huang
Daniel Huang

💻
Alex Xandra Albert Sim
Alex Xandra Albert Sim

💻
Brandon Renfrow
Brandon Renfrow

💻
BurnHavoc
BurnHavoc

💻
Enzo
Enzo

💻
Jonathon Sim
Jonathon Sim

💻
Kazuya Hara
Kazuya Hara

💻
Miloš Hadžić
Miloš Hadžić

💻
Siron
Siron

💻
Sam Auciello
Sam Auciello

💻
Sean Cashin
Sean Cashin

💻
Yu Zhai
Yu Zhai

💻
acekat
acekat

💻
linpekka
linpekka

💻
sainu
sainu

💻
Murat Tasarsu
Murat Tasarsu

💻
Anil Kumar Maurya
Anil Kumar Maurya

💻
Artem Shevtsov
Artem Shevtsov

💻
Baptiste Gaillard
Baptiste Gaillard

💻
Bernard Wolff
Bernard Wolff

💻
Carl Scott
Carl Scott

💻
Chris Joe
Chris Joe

💻
Daniel Wang
Daniel Wang

💻
Derrek Bertrand
Derrek Bertrand

💻
Gabi Maeztu
Gabi Maeztu

💻
Hussein Jafferjee
Hussein Jafferjee

💻
Indra Santosa
Indra Santosa

💻
Ivan Paramonau
Ivan Paramonau

💻
JK
JK

💻
Jeff Bellsey
Jeff Bellsey

💻
Kenzo Okamura
Kenzo Okamura

💻
Matei Dorobantu
Matei Dorobantu

💻
Max Kirchoff
Max Kirchoff

💻
MrEcl
MrEcl

💻
Raphaël Vercruyssen
Raphaël Vercruyssen

💻
Sebastian Zorn
Sebastian Zorn

💻
tsbalzhanov
tsbalzhanov

💻
bjrenfrow
bjrenfrow

💻
orhan
orhan

💻
swolfod
swolfod

💻
Eligijus Krėpšta
Eligijus Krėpšta

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT

About

jQuery insert plugin for MediumEditor (Medium.com WYSIWYG editor clone)

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 94.1%
  • SCSS 3.9%
  • Handlebars 2.0%