Skip to content
This repository has been archived by the owner on Sep 11, 2020. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
…nsert-plugin into vexus2-add_embed

Conflicts:
	README.md
	dist/css/medium-editor-insert-plugin.css
	dist/js/addons/medium-editor-insert-images.js
	dist/js/addons/medium-editor-insert-images.min.js
	dist/js/addons/medium-editor-insert-maps.js
	dist/js/addons/medium-editor-insert-maps.min.js
	dist/js/addons/medium-editor-insert-plugin.min.js
	dist/js/medium-editor-insert-plugin.all.min.js
	src/js/medium-editor-insert-images.js
	src/js/medium-editor-insert-maps.js
  • Loading branch information
linkesch committed May 21, 2014
1 parent e6cac73 commit 39924f2
Show file tree
Hide file tree
Showing 25 changed files with 514 additions and 46 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@
.sass-cache/
bower_components/
node_modules/
examples/uploads/*
examples/uploads/*
.idea/
9 changes: 8 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ module.exports = function(grunt) {
options: {
banner: '/*! \n * <%= pkg.name %> v<%= pkg.version %> - <%= pkg.description %>\n *\n * <%= pkg.homepage %>\n * \n * Copyright (c) 2014 <%= pkg.author.name %> (<%= pkg.author.url %>)\n * Released under the <%= pkg.license %> license\n */\n\n'
},
src: ['src/js/medium-editor-insert-plugin.js', 'src/js/medium-editor-insert-images.js', 'src/js/medium-editor-insert-maps.js'],
src: ['src/js/medium-editor-insert-plugin.js', 'src/js/medium-editor-insert-images.js', 'src/js/medium-editor-insert-maps.js', 'src/js/medium-editor-insert-embeds.js'],
dest: 'dist/js/<%= pkg.name %>.all.min.js'
},
f1: {
Expand All @@ -31,6 +31,13 @@ module.exports = function(grunt) {
},
src: 'src/js/medium-editor-insert-maps.js',
dest: 'dist/js/addons/medium-editor-insert-maps.min.js'
},
f4: {
options: {
preserveComments: 'some'
},
src: 'src/js/medium-editor-insert-embeds.js',
dest: 'dist/js/addons/medium-editor-insert-embeds.min.js'
}
},

Expand Down
30 changes: 15 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,16 @@
jQuery insert plugin for MediumEditor
======================================

This plugin expands capabilities of [MediumEditor](https://github.com/daviferreira/medium-editor) which is a clone of [medium.com](http://medium.com) WYSIWYG editor.
This plugin expands capabilities of [MediumEditor](https://github.com/daviferreira/medium-editor) (a clone of [medium.com](http://medium.com) WYSIWYG editor).

The plugin is next, completely rewritten version of previous "images plugin". Now inserting images is only one of the plugin's addons. More addons (inserting files and maps) are coming soon...
The plugins enables users to insert into the editor various types of content (depending on available addons).

Current available addons:

- images
- embeds (it can embed various social services - Youtube, Twitter, Facebook, Instagram, Vimeo)

More are coming soon...

[![Build Status](https://travis-ci.org/orthes/medium-editor-insert-plugin.png?branch=master)](https://travis-ci.org/orthes/medium-editor-insert-plugin)
[![Bower version](https://badge.fury.io/bo/medium-editor-insert-plugin.svg)](http://badge.fury.io/bo/medium-editor-insert-plugin)
Expand All @@ -12,7 +19,6 @@ The plugin is next, completely rewritten version of previous "images plugin". No
## Table of Contents

- [Demo](#demo)
- [Available Addons](#addons)
- [Download](#download)
- [Usage](#usage)
- [Options](#options)
Expand All @@ -27,15 +33,6 @@ The plugin is next, completely rewritten version of previous "images plugin". No
http://orthes.github.io/medium-editor-insert-plugin


## <a name="addons"></a>Available Addons

Current available addons:

- images

More are coming soon...


## <a name="download"></a>Download

- Bower: ```bower install medium-editor-insert-plugin --save```
Expand Down Expand Up @@ -65,6 +62,7 @@ Or if you for some reason want, you can load only addons that you want separatel
<link rel="stylesheet" href="medium-editor-insert-plugin/css/medium-editor-insert-plugin.css">
<script src="medium-editor-insert-plugin/js/addons/medium-editor-insert-plugin.min.js"></script>
<script src="medium-editor-insert-plugin/js/addons/medium-editor-insert-images.min.js"></script>
<script src="medium-editor-insert-plugin/js/addons/medium-editor-insert-embeds.min.js"></script>
```

Initialize MediumEditor as you normally would:
Expand All @@ -73,14 +71,15 @@ Initialize MediumEditor as you normally would:
<script>var editor = new MediumEditor('.editable');</script>
```

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

```javascript
$(function () {
$('.editable').mediumInsert({
editor: editor,
addons: {
images: {}
images: {},
embeds: {}
}
});
});
Expand All @@ -104,14 +103,15 @@ var elContent = allContents["element-0"].value;
- **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**
- **enabled**: (boolean) plugin's state: Default *true*.


## <a name="methods"></a>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. 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.
- **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:
Expand Down
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "medium-editor-insert-plugin",
"version": "0.2.2",
"version": "0.2.3",
"description": "jQuery insert plugin for MediumEditor",
"main": [
"dist/js/medium-editor-insert-plugin.all.min.js",
Expand Down
2 changes: 1 addition & 1 deletion dist/css/medium-editor-insert-plugin.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

104 changes: 104 additions & 0 deletions dist/js/addons/medium-editor-insert-embeds.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
/*!
* medium-editor-insert-plugin v0.2.3 - jQuery insert plugin for MediumEditor
*
* Embeds Addon
*
* https://github.com/orthes/medium-editor-images-plugin
*
* Copyright (c) 2014 Vexus2 (https://github.com/vexus2)
* Released under the MIT license
*/

(function ($) {

$.fn.mediumInsert.registerAddon('embeds', {

/**
* Embeds initial function
* @return {void}
*/
init : function () {
this.$el = $.fn.mediumInsert.insert.$el;
this.setEmbedButtonEvents();
},

insertButton : function (buttonLabels) {
var label = 'Embed';
if (buttonLabels == 'fontawesome' || Array.isArray(buttonLabels) && !!(buttonLabels.fontawesome)) {
label = '<i class="fa fa-code"></i>';
}
return '<button data-addon="embeds" data-action="add" class="medium-editor-action medium-editor-action-image mediumInsert-action">' + label + '</button>';
},

/**
* Add embed to $placeholder
* @param {element} $placeholder $placeholder to add embed to
* @return {void}
*/
add : function ($placeholder) {
$.fn.mediumInsert.insert.deselect();


var formHtml = '<div class="medium-editor-toolbar-form-anchor mediumInsert-embedsWire" style="display: block;"><input type="text" value="" placeholder="type or paste url here" class="mediumInsert-embedsText"></div>';
$(formHtml).appendTo($placeholder.prev());
setTimeout(function () {
$placeholder.prev().find('input').focus();
}, 50);

$.fn.mediumInsert.insert.deselect();

this.currentPlaceholder = $placeholder;
$(".mediumInsert-embedsText").focus();
},


setEmbedButtonEvents : function () {
var that = this;
$(document).on('keypress', 'input.mediumInsert-embedsText', function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
that.setEnterActionEvents();
that.removeToolbar();
}
});

this.$el.on('blur', '.mediumInsert-embedsText', function () {
that.removeToolbar();
});

},
setEnterActionEvents : function () {
var that = this;
if ($.fn.mediumInsert.settings.enabled === false) {
return false;
}

var url = $("input.mediumInsert-embedsText").val();
if (!url) {
return false;
}
var embed_tag = that.convertUrlToEmbedTag(url);
if (!embed_tag) {
alert('Incorrect URL format specified');
return false;
} else {
embed_tag = $('<div class="mediumInsert-embeds"></div>').append(embed_tag);
that.currentPlaceholder.parent().append(embed_tag);
}
},

removeToolbar : function () {
$(".mediumInsert-embedsWire").remove();
},

convertUrlToEmbedTag : function (url) {
var embed_tag = url.replace(/\n?/g, '').replace(/^((http(s)?:\/\/)?(www\.)?(youtube\.com|youtu\.be)\/(watch\?v=|v\/)?)([a-zA-Z0-9-]+)(.*)?$/, '<div class="video"><iframe width="420" height="315" src="http://www.youtube.com/v/$7&amp;fs=1" frameborder="0" allowfullscreen></iframe></div>')
.replace(/http:\/\/vimeo\.com\/(\d+)$/, '<iframe src="//player.vimeo.com/video/$1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
.replace(/https:\/\/twitter\.com\/(\w+)\/status\/(\d+)\/?$/, '<blockquote class="twitter-tweet" lang="en"><a href="https://twitter.com/$1/statuses/$2"></a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>')
.replace(/https:\/\/www\.facebook\.com\/(\w+)\/posts\/(\d+)$/, '<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk"));</script><div class="fb-post" data-href="https://www.facebook.com/$1/posts/$2"></div>')
.replace(/http:\/\/instagram\.com\/p\/(.+)\/?$/, '<span class="instagram"><iframe src="//instagram.com/p/$1/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe></span>');
return /<("[^"]*"|'[^']*'|[^'">])*>/.test(embed_tag) ? embed_tag : false;
}

});

}(jQuery));
Loading

0 comments on commit 39924f2

Please sign in to comment.