deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-06-07 16:32:22 +02:00
Code Issues Projects Releases Wiki Activity

Yandex music added

Browse source
This commit is contained in:
George Berezhnoy 2017-01-26 02:55:40 +03:00
parent cd58297a9e
commit 7a37809532
7 changed files with 118 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
example.html
View file

@ -42,8 +42,8 @@
<script src="plugins/twitter/twitter.js"></script> <script src="plugins/twitter/twitter.js"></script>
<link rel="stylesheet" href="plugins/twitter/twitter.css"> <link rel="stylesheet" href="plugins/twitter/twitter.css">
<script src="plugins/video/embed.js"></script> <script src="plugins/embed/embed.js"></script>
<link rel="stylesheet" href="plugins/video/embed.css"> <link rel="stylesheet" href="plugins/embed/embed.css">
<script src="plugins/paste/paste.js"></script> <script src="plugins/paste/paste.js"></script>
<script src="plugins/paste/patterns.js"></script> <script src="plugins/paste/patterns.js"></script>
@ -70,14 +70,14 @@
paste: { paste: {
type: 'paste', type: 'paste',
iconClassname: '', iconClassname: '',
prepare: pasteTool.prepare, prepare: paste.prepare,
make: pasteTool.make, make: paste.make,
appendCallback: null, appendCallback: null,
settings: null, settings: null,
render: null, render: null,
save: pasteTool.save, save: paste.save,
enableLineBreaks: false, enableLineBreaks: false,
callbacks: pasteTool.pasted, callbacks: paste.pasted,
allowedToPaste: false allowedToPaste: false
}, },
header: { header: {

2
modules/toolbar/toolbox.js
View file

@ -121,7 +121,7 @@ var toolbox = (function(toolbox) {
/** /**
* UNREPLACEBLE_TOOLS this types of tools are forbidden to replace even they are empty * UNREPLACEBLE_TOOLS this types of tools are forbidden to replace even they are empty
*/ */
var UNREPLACEBLE_TOOLS = ['image', 'link', 'list', 'instagram', 'twitter', 'video'], var UNREPLACEBLE_TOOLS = ['image', 'link', 'list', 'instagram', 'twitter', 'embed'],
tool = codex.tools[codex.toolbar.current], tool = codex.tools[codex.toolbar.current],
workingNode = codex.content.currentNode, workingNode = codex.content.currentNode,
currentInputIndex = codex.caret.inputIndex, currentInputIndex = codex.caret.inputIndex,

6
plugins/video/embed.css → plugins/embed/embed.css
View file

@ -1,7 +1,7 @@
.ce-redactor .embed { .ce-redactor .embed {
width: 100%; max-width: 600px;
max-width: 650px; margin: 15px 0;
margin: 10px auto; background: #fff;
} }
.embed__loader { .embed__loader {

103
plugins/video/embed.js → plugins/embed/embed.js
View file

@ -24,62 +24,101 @@ var embed = function(embed){
makeElementFromHtml: function(html) { makeElementFromHtml: function(html) {
var wrapper = document.createElement('DIV'); var wrapper = document.createElement('DIV');
wrapper.innerHTML = html; wrapper.innerHTML = html;
return wrapper.firstElementChild;
return wrapper;
} }
}; };
var services = { var services = {
vimeo: { vimeo: {
regex: /(?:http[s]?:\/\/)?(?:www.)?vimeo\.co(?:.+\/([^\/]\d+)(?:#t=[\d]+)?s?$)/, regex: /(?:http[s]?:\/\/)?(?:www.)?vimeo\.co(?:.+\/([^\/]\d+)(?:#t=[\d]+)?s?$)/,
html: "<iframe src=\"https://player.vimeo.com/video/<%= remote_id %>?title=0&byline=0\" width=\"580\" height=\"320\" frameborder=\"0\"></iframe>" html: "<iframe src=\"https://player.vimeo.com/video/<%= remote_id %>?title=0&byline=0\" width=\"580\" height=\"320\" frameborder=\"0\"></iframe>",
height: 320,
width: 580
}, },
youtube: { youtube: {
regex: /^.*(?:(?:youtu\.be\/)|(?:youtube\.com)\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*)(?:[\?\&]t\=(\d*)|)/, regex: /^.*(?:(?:youtu\.be\/)|(?:youtube\.com)\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*)(?:[\?\&]t\=(\d*)|)/,
html: "<iframe src=\"https://www.youtube.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>", html: "<iframe src=\"https://www.youtube.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>",
timestamp: '?t=' height: 320,
width: 580
}, },
coub: { coub: {
regex: /https?:\/\/coub\.com\/view\/([^\/\?\&]+)/, regex: /https?:\/\/coub\.com\/view\/([^\/\?\&]+)/,
html: "<iframe src=\"//coub.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>" html: "<iframe src=\"//coub.com/embed/<%= remote_id %>\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>",
height: 320,
width: 580
}, },
vine: { vine: {
regex: /https?:\/\/vine\.co\/v\/([^\/\?\&]+)/, regex: /https?:\/\/vine\.co\/v\/([^\/\?\&]+)/,
html: "<iframe src=\"https://vine.co/v/<%= remote_id %>/embed/simple/\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>" html: "<iframe src=\"https://vine.co/v/<%= remote_id %>/embed/simple/\" width=\"580\" height=\"320\" frameborder=\"0\" allowfullscreen></iframe>",
}, height: 320,
vk: { width: 580
regex: /https?:\/\/vk\.com\/.*(?:video)([-_0-9]+)/,
html: "<iframe src=\"//vk.com/video_ext.php?id=<%= remote_id %>\" width=\"853\" height=\"480\" frameborder=\"0\" allowfullscreen></iframe>"
}, },
imgur: { imgur: {
regex: /https?:\/\/(?:i\.)?imgur\.com.*\/([a-zA-Z0-9]+)(?:\.gifv)?/, regex: /https?:\/\/(?:i\.)?imgur\.com.*\/([a-zA-Z0-9]+)(?:\.gifv)?/,
html: "<iframe allowfullscreen=\"true\" scrolling=\"no\" src=\"http://imgur.com/<%= remote_id %>/embed\" id=\"imgur-embed-iframe-pub-<%= remote_id %>\" class=\"imgur-embed-iframe-pub\" style=\"height: 500px; width: 540px; border: 1px solid #000\"></iframe>" html: "<iframe allowfullscreen=\"true\" scrolling=\"no\" src=\"http://imgur.com/<%= remote_id %>/embed\" id=\"imgur-embed-iframe-pub-<%= remote_id %>\" class=\"imgur-embed-iframe-pub\" style=\"height: 500px; width: 540px; border: 1px solid #000\"></iframe>",
height: 500,
width: 540
}, },
gfycat: { gfycat: {
regex: /https?:\/\/gfycat\.com(?:\/detail)?\/([a-zA-Z]+)/, regex: /https?:\/\/gfycat\.com(?:\/detail)?\/([a-zA-Z]+)/,
html: "<iframe src='https://gfycat.com/ifr/<%= remote_id %>' frameborder='0' scrolling='no' width='580' height='436' allowfullscreen ></iframe>", html: "<iframe src='https://gfycat.com/ifr/<%= remote_id %>' frameborder='0' scrolling='no' width='580' height='436' allowfullscreen ></iframe>",
height: 436,
width: 580
}, },
'twitch-channel': { 'twitch-channel': {
regex: /https?:\/\/twitch.tv\/([^\/\?\&]*)/, regex: /https?:\/\/twitch.tv\/([^\/\?\&]*)/,
html: "<iframe src=\"https://player.twitch.tv/?channel=<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"378\" width=\"620\"></iframe>" html: "<iframe src=\"https://player.twitch.tv/?channel=<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"366\" width=\"600\"></iframe>",
height: 366,
width: 600
}, },
'twitch-video': { 'twitch-video': {
regex: /https?:\/\/www.twitch.tv\/[^\/\?\&]*\/v\/([0-9]*)/, regex: /https?:\/\/www.twitch.tv\/[^\/\?\&]*\/v\/([0-9]*)/,
html: "<iframe src=\"https://player.twitch.tv/?video=v<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"378\" width=\"620\"></iframe>" html: "<iframe src=\"https://player.twitch.tv/?video=v<%= remote_id %>\" frameborder=\"0\" allowfullscreen=\"true\" scrolling=\"no\" height=\"366\" width=\"600\"></iframe>",
height: 366,
width: 600
},
'yandex-music-album': {
regex: '',
html: "<iframe frameborder=\"0\" style=\"border:none;width:540px;height:400px;\" width=\"540\" height=\"400\" src=\"https://music.yandex.ru/iframe/#album/<%= remote_id %>/\"></iframe>",
height: 400,
width: 540
},
'yandex-music-track': {
regex: '',
html: "<iframe frameborder=\"0\" style=\"border:none;width:540px;height:100px;\" width=\"540\" height=\"100\" src=\"https://music.yandex.ru/iframe/#track/<%= remote_id %>/\"></iframe>",
height: 100,
width: 540
},
'yandex-music-playlist': {
regex: '',
html: "<iframe frameborder=\"0\" style=\"border:none;width:540px;height:400px;\" width=\"540\" height=\"400\" src=\"https://music.yandex.ru/iframe/#playlist/<%= remote_id %>/show/cover/description/\"></iframe>",
height: 400,
width: 540
} }
}; };
embed.make = function(data, isInternal) { embed.make = function(data, isInternal) {
if (!data.embed_id) if (!data.remote_id)
return; return;
var html = methods.getHtmlWithEmbedId(data.service, data.embed_id), var html = methods.getHtmlWithEmbedId(data.source, data.remote_id),
block = methods.makeElementFromHtml(html); block = methods.makeElementFromHtml(html);
block.dataset.id = data.embed_id; block.dataset.remoteId = data.remote_id;
block.dataset.embedSeirvice = data.service; block.dataset.source = data.source;
block.dataset.thumbnailUrl = data.thumbnailUrl;
block.classList.add('embed');
var sidePadding = (600 - services[data.source].width) / 2 + 'px';
block.style.padding = '30px ' + sidePadding;
if (isInternal) { if (isInternal) {
methods.addInternal(block); methods.addInternal(block);
@ -95,14 +134,18 @@ var embed = function(embed){
*/ */
embed.save = function(blockContent) { embed.save = function(blockContent) {
var data;
if (!blockContent) if (!blockContent)
return; return;
var data,
source = blockContent.dataset.source;
data = { data = {
embed_id: blockContent.dataset.id, source: source,
service: blockContent.dataset.embedService remote_id: blockContent.dataset.remoteId,
thumbnailUrl: blockContent.dataset.thumbnailUrl,
height: services[source].height,
width: services[source].width
}; };
return data; return data;
@ -118,11 +161,25 @@ var embed = function(embed){
embed.urlPastedCallback = function(url, pattern) { embed.urlPastedCallback = function(url, pattern) {
var id = pattern.regex.exec(url)[1]; var execArray = pattern.regex.exec(url),
id;
switch(pattern.type) {
case 'yandex-music-track':
id = execArray[2]+'/'+execArray[1];
break;
case 'yandex-music-playlist':
id = execArray[1]+'/'+execArray[2];
break;
default:
id = execArray[1];
}
var data = { var data = {
embed_id: id, source: pattern.type,
service: pattern.type remote_id: id,
thumbnailUrl: url
}; };
embed.make(data, true); embed.make(data, true);

0
plugins/video/loading.gif → plugins/embed/loading.gif
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

17
plugins/paste/paste.js
View file

@ -9,31 +9,34 @@
* *
* Main tool settings. * Main tool settings.
*/ */
var pasteTool = { var paste = function(paste){
/** /**
* Saves data * Saves data
* @param event * @param event
*/ */
pasted : function(event) { paste.pasted = function(event) {
var clipBoardData = event.clipboardData || window.clipboardData, var clipBoardData = event.clipboardData || window.clipboardData,
content = clipBoardData.getData('Text'); content = clipBoardData.getData('Text');
pasteTool.analize(content); analize(content);
}, };
/** /**
* Analizes pated string and calls necessary method * Analizes pated string and calls necessary method
*/ */
analize : function(string) { var analize = function(string) {
pasteTool.patterns.map(function(pattern, i){ paste.patterns.map(function(pattern, i){
if (pattern.regex.test(string)) { if (pattern.regex.test(string)) {
pattern.callback.call(null, string, pattern); pattern.callback.call(null, string, pattern);
} }
}) })
} }
};
return paste;
}(paste || {});

24
plugins/paste/patterns.js
View file

@ -10,7 +10,9 @@
* *
*/ */
pasteTool.patterns = [ var paste = paste || {};
paste.patterns = [
{ {
type: 'image', type: 'image',
regex: /(?:([^:\/?#]+):)?(?:\/\/([^\/?#]*))?([^?#]*\.(?:jpe?g|gif|png))(?:\?([^#]*))?(?:#(.*))?/i, regex: /(?:([^:\/?#]+):)?(?:\/\/([^\/?#]*))?([^?#]*\.(?:jpe?g|gif|png))(?:\?([^#]*))?(?:#(.*))?/i,
@ -56,11 +58,6 @@ pasteTool.patterns = [
regex: /https?:\/\/vine\.co\/v\/([^\/\?\&]+)/, regex: /https?:\/\/vine\.co\/v\/([^\/\?\&]+)/,
callback: embed.urlPastedCallback callback: embed.urlPastedCallback
}, },
{
type: 'vk',
regex: /https?:\/\/vk\.com\/.*(?:video)[-0-9]+_([0-9]+)/,
callback: embed.urlPastedCallback
},
{ {
type: 'imgur', type: 'imgur',
regex: /https?:\/\/(?:i\.)?imgur\.com.*\/([a-zA-Z0-9]+)(?:\.gifv)?/, regex: /https?:\/\/(?:i\.)?imgur\.com.*\/([a-zA-Z0-9]+)(?:\.gifv)?/,
@ -81,5 +78,20 @@ pasteTool.patterns = [
regex: /https?:\/\/www.twitch.tv\/[^\/\?\&]*\/v\/([0-9]*)/, regex: /https?:\/\/www.twitch.tv\/[^\/\?\&]*\/v\/([0-9]*)/,
callback: embed.urlPastedCallback callback: embed.urlPastedCallback
}, },
{
type: 'yandex-music-album',
regex: /https?:\/\/music.yandex.ru\/album\/([0-9]*)/,
callback: embed.urlPastedCallback
},
{
type: 'yandex-music-track',
regex: /https?:\/\/music.yandex.ru\/album\/([0-9]*)\/track\/([0-9]*)/,
callback: embed.urlPastedCallback
},
{
type: 'yandex-music-playlist',
regex: /https?:\/\/music.yandex.ru\/users\/([^\/\?\&]*)\/playlists\/([0-9]*)/,
callback: embed.urlPastedCallback
}
]; ];