https://github.com/pecuchet/m-embed
Web embeds for MediumEditor
https://github.com/pecuchet/m-embed
medium-editor web-embed
Last synced: 8 months ago
JSON representation
Web embeds for MediumEditor
- Host: GitHub
- URL: https://github.com/pecuchet/m-embed
- Owner: pecuchet
- Created: 2015-11-15T16:01:26.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-09-06T14:56:56.000Z (almost 10 years ago)
- Last Synced: 2025-10-13T23:40:01.329Z (8 months ago)
- Topics: medium-editor, web-embed
- Language: JavaScript
- Homepage: http://pecuchet.github.io/m-embed
- Size: 35.2 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# M-Embed for MediumEditor
M-Embed is a [MediumEditor](https://github.com/daviferreira/medium-editor) extension to embed URL previews with [Embedly](http://embed.ly)'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.
## Demo
[Here is a demo](http://pecuchet.github.io/m-embed) (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.)
## Installation
**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.
```
```
## Usage
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
'mEmbed'
]
},
extensions: {
// other MediumEditor extensions
mEmbed: new MEmbed()
}
});
```
## Options
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](http://embed.ly/docs/api/embed/arguments)). Default: `'extract'`
- **secure** http(s) (see [Embedly](http://embed.ly/docs/api/embed/arguments)). Default: `undefined`
- **query** (see [Embedly](http://embed.ly/docs/api/embed/arguments)). 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`
## Events
**Triggered:**
- **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