Web embeds for MediumEditor
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


M-Embed for MediumEditor

M-Embed is a MediumEditor extension to embed URL previews with Embedly's API in your contenteditable editor. Once embedded, you can choose between the multiple media (images, iframes) returned for the URL. M-Embed has been written using vanilla JavaScript, no additional frameworks are required.


Here is a demo (using predefined data—without making a request to Embedly, which would require an API key. Embedly has free and paid plans to access their API.)


Via npm:
Run in your console: npm install m-embed

**Manual installation:** Download and reference MediumEditor and M-Embed along with their stylesheets. No other dependencies are necessary. ``` <script src="js/medium-editor.min.js"></script> <script src="js/medium-editor-m-embed.min.js"></script> ```


Upon instantiation of the editor, instantiate the extension in the extensions property, reference the button in the toolbar > buttons array.

var editor = new MediumEditor('.editable', {
    mEmbed : {
        // options for m-embed 
    toolbar: {
      buttons: [
          // other toolbar buttons
    extensions: {
        // other MediumEditor extensions
        mEmbed: new MEmbed()


The following options, and their defaults, are available to customize M-Embed. The options object is passed as a property named mEmbed when you instantiate MediumEditor.

**Embedly options:**
  • key Your Embedly API key. Default: null
  • fakeData For testing purposes, the API key requirement will be bypassed. Default: null
  • endpoint API endpoint (see Embedly). Default: 'extract'
  • secure http(s) (see Embedly). Default: undefined
  • query (see Embedly). Default: {}
  • urlRe Additional regular expression to test the URL against, just before the XHR call. Default: undefined

**Preview options:**
  • allowMultiple Allow multiple embeds per editor. Default: false
  • displayErrors Display errors in the editor (they are also emitted through an event). Default: true
  • linkTarget The embed link target. Default: '_blank'
  • hideToolbarAfter Hide the toolbar after embedding. Default: true
  • deselectAfter Deselect the url after embedding. Default: true
  • thumbnailSize Images smaller than 300 will trigger a 'thumbnail' class on the main element. Default: 300
  • thumbnailMini Size at which to add class 'mini' on the image div. Default: 100



  • m-embed:error Request validation, xhr & general errors — { msg, error }
  • m-embed:success Successful request — { response }
  • m-embed:progress Request progress — { msg: percentage }
  • m-embed:media Included media (picture, video), fired on render and on user choice — { media }
  • m-embed:no-media User has removed media from preview
  • m-embed:removed Embed has been removed entirely

**Subscribed to:**
  • m-embed:cleanup Remove all non content clutter — pass in the editor element
  • m-embed:revive Reapply the ui for an existing preview — pass in the editor element
  • m-embed:swap Replace the media with another image — pass in { mime: '', url: '' } and the editor element