This addon is deprecated as it is based on the unmaintained Ember CLI Medium Editor. Please check out its successor Ember Medium Editor instead.

Ember Medium Editor Insert

This Ember Addon extends the functionality of ember-cli-medium-editor to include medium-editor-insert-plugin. Medium Editor Insert Plugin is a jQuery insert plugin for Medium Editor, enabling:

• 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

Installation

To install, make sure you've installed ember-cli-medium-editor.

ember install ember-cli-medium-editor

Then simply run:

ember install ember-medium-editor-insert

Usage

Follow the usage instructions in the ember-cli-medium-editor plugin.

This addon simply includes medium-editor-insert-plugin, initializes it once the mediumEditor instance is created and extends the medium-content-editable component to include a insertOptions object.

{{ medium-content-editable value=body options=mediumEditorOptions insertOptions=mediumEditorInsertOptions}}

Any valid medium-editor insert options can be passed to the insertOptions POJO. For a full list of options, click here.

Example

The following example object be added to an Ember controller and passed via the template to your medium-content-editable component. Or it may be added directly to a component which extends medium-content-editable.

{
  options: {
    // ... ember-cli-medium-editor options
  },
  insertOptions: {
    enabled: true,
    addons: {
      images: {
        label: '<i class="icon-image"></i>',
        fileUploadOptions: {
          url: `images/upload`,
          acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
          paramName: 'file'
        },
        deleteScript: `images/delete`,
      },
      embeds: {
        label: '<i class="icon-embed"></i>',
        placeholder: 'Paste a YouTube, Vimeo, Facebook, Twitter or Instagram link and press Enter',
        actions: insertActions,
        styles: insertStyles
      }
    }
  }
}