jQuery insert plugin for MediumEditor

This plugin expands capabilities of MediumEditor (a clone of medium.com WYSIWYG editor).

The plugins 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)
• tables (basic table creating)

More are coming soon...

Table of Contents

• Demo
• Download
• Usage
• Options
• Methods
• Development
• Contributing
• Author

Demo

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

Download

• Bower: bower install medium-editor-insert-plugin --save
• Manual: Download the latest release

Usage

The first step is to add all prerequisites (MediumEditor and jQuery):

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

Now you have two possibilites. You can load all addons at once:

<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">
<script src="bower_components/medium-editor-insert-plugin/dist/js/medium-editor-insert-plugin.all.min.js"></script>

Or if you for some reason want, you can load only addons that you want separately. In this case, don't forget to load medium-editor-insert-plugin.min.js, which is the main plugin file, that initializes addons:

<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin.min.css">
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-plugin.min.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-images.min.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-embeds.min.js"></script>
<script src="bower_components/medium-editor-insert-plugin/dist/js/addons/medium-editor-insert-tables.min.js"></script>

Initialize MediumEditor as you normally would:

<script>var editor = new MediumEditor('.editable');</script>

Finally, you can initialize the insert plugin with images and embed addon:

$(function () {
  $('.editable').mediumInsert({
    editor: editor,
    addons: {
      images: {},
      embeds: {
        oembedProxy: 'http://medium.iframe.ly/api/oembed?iframe=1'
      },
      tables: {}
    }
  });
});

After you have a working editor with the plugin, you will want to get a clean content of the editor without any additional unnecessary placeholders. This could be done by using the editor's serialize() function, which returns JSON object with elements contents.

var allContents = editor.serialize();
var elContent = allContents["element-0"].value;

For styling the content in frontend (where it will be read only without editing posibilities) use this CSS:

<link rel="stylesheet" href="bower_components/medium-editor-insert-plugin/dist/css/medium-editor-insert-plugin-frontend.min.css">

Options

• editor: (MediumEditor) instance of MediumEditor
• beginning: (boolean) whether inserting at the very beginning of the editor should be possible (in other words, if the first placeholder for instering should be placed as the first element of the editor, or after the first parahraph). Default: false
• addons: (object) keys are names of used addons and values are objects of addons options. (NOTICE: Remember to use medium-editor-insert-plugin.all.min.js, which includes all addons, or separately load medium-editor-insert-plugin.min.js and medium-editor-insert-{ADDON-NAME}.min.js).
  • images:
    • imagesUploadScript: (string) relative path to a script that handles file uploads. Default: upload.php
    • imagesDeleteScript: (string) relative path to a script that handles file deleting. Default: delete.php
    • useDragAndDrop: (boolean) active or inactive image's drag and drop. Default: true
    • formatData: (function (file)) function that formats data before sending them to server while uploading an image
    • uploadFile: (function ($placeholder, file, that)) function uploading an image to a server
    • deleteFile: (function (file, that)) function deleting an image from a server
  • embeds:
    • urlPlaceholder: (string) placeholder displayed when entering URL to embed. Default: Paste or type a link
    • oembedProxy: (string) URL to oEmbed proxy endpoint, such as Iframely, Embedly or your own. You are welcome to use "http://medium.iframe.ly/api/oembed?iframe=1" for your dev and testing needs, courtesy of Iframely. Default: none, which will make the plugin use pre-defined set of embed rules without making server calls.
  • tables:
    • defaultRows: (integer) default number of rows. Default: 2
    • defaultCols: (integer) default number of columns. Default: 2
• enabled: (boolean) plugin's state: Default true.

Methods

• enable: enables the plugin. It's connected to Medium Editor's own activate function, so if the editor is activated, so is the plugin. (The plugin is enabled automatically. Use it only if you previously disabled the plugin.)
• disable: disables the plugin. It's connected to Medium Editor's own deactivate function, so if the editor is deactivated, so is the plugin.
• registerAddon: create new addon, like images or maps or embeds. Your addon object should contain init(options) method to initialize your addon and insertButton method that contains code of button in list of available addons.
• getAddon: simple getter for available addons.

Use example:

$('.editable').mediumInsert('disable');

Development

The plugin uses Grunt for automating development tasks and Bower for package management. To install all the necessities for development run these commands:

npm install
bower install

These are available Grunt tasks:

• js: runs jshint, uglify and copy
• css: runs compass
• test: runs jshint and qunit
• watch: watches for modifications on script/scss files and runs js/css task

Contributing

I'm happy when you not only use the plugin, but contribute your improvements, too. To do that, you need to meet only two requirements:

1. Use the same coding style as the plugin
2. Write QUnit tests (if you're adding a new funcionality) and test your changes with grunt test

Author

Pavel Linkesch | @linkesch | http://www.linkesch.sk