mirror of
https://github.com/codex-team/editor.js
synced 2024-06-20 22:55:15 +02:00
Youtube plugin added
Youtube videos can be added by pasting video-url.
This commit is contained in:
parent
bc8fb1aed9
commit
065540a782
14
example.html
14
example.html
|
@ -45,6 +45,9 @@
|
||||||
<script src="plugins/paste/paste.js"></script>
|
<script src="plugins/paste/paste.js"></script>
|
||||||
<link rel="stylesheet" href="plugins/paste/paste.css">
|
<link rel="stylesheet" href="plugins/paste/paste.css">
|
||||||
|
|
||||||
|
<script src="plugins/youtube/youtube.js"></script>
|
||||||
|
<link rel="stylesheet" href="plugins/youtube/youtube.css">
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
codex.start({
|
codex.start({
|
||||||
textareaId : "codex_area",
|
textareaId : "codex_area",
|
||||||
|
@ -164,6 +167,17 @@
|
||||||
displayInToolbox: false,
|
displayInToolbox: false,
|
||||||
enableLineBreaks: false,
|
enableLineBreaks: false,
|
||||||
allowedToPaste: false
|
allowedToPaste: false
|
||||||
|
},
|
||||||
|
youtube: {
|
||||||
|
type: 'youtube',
|
||||||
|
make: youtubeTool.make,
|
||||||
|
appendCallback: null,
|
||||||
|
settings: null,
|
||||||
|
render: youtubeTool.render,
|
||||||
|
save: youtubeTool.save,
|
||||||
|
displayInToolbox: false,
|
||||||
|
enableLineBreaks: false,
|
||||||
|
allowedToPaste: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data : {
|
data : {
|
||||||
|
|
|
@ -90,13 +90,15 @@ pasteTool.callbacks = {
|
||||||
twitter : new RegExp("http?.+twitter.com?.+\/"),
|
twitter : new RegExp("http?.+twitter.com?.+\/"),
|
||||||
facebook : /https?.+facebook.+\/\d+\?/,
|
facebook : /https?.+facebook.+\/\d+\?/,
|
||||||
vk : /https?.+vk?.com\/feed\?w=wall\d+_\d+/,
|
vk : /https?.+vk?.com\/feed\?w=wall\d+_\d+/,
|
||||||
|
youtube : /https?.+youtube.com\/watch\?v=.{11}/
|
||||||
},
|
},
|
||||||
|
|
||||||
image = regexTemplates.image.test(string),
|
image = regexTemplates.image.test(string),
|
||||||
instagram = regexTemplates.instagram.exec(string),
|
instagram = regexTemplates.instagram.exec(string),
|
||||||
twitter = regexTemplates.twitter.exec(string),
|
twitter = regexTemplates.twitter.exec(string),
|
||||||
facebook = regexTemplates.facebook.test(string),
|
facebook = regexTemplates.facebook.test(string),
|
||||||
vk = regexTemplates.vk.test(string);
|
vk = regexTemplates.vk.test(string),
|
||||||
|
youtube = regexTemplates.youtube.test(string);
|
||||||
|
|
||||||
if (image) {
|
if (image) {
|
||||||
|
|
||||||
|
@ -118,6 +120,10 @@ pasteTool.callbacks = {
|
||||||
|
|
||||||
pasteTool.callbacks.vkMedia(string);
|
pasteTool.callbacks.vkMedia(string);
|
||||||
|
|
||||||
|
} else if (youtube) {
|
||||||
|
|
||||||
|
pasteTool.callbacks.youtubeMedia(string);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
@ -173,7 +179,6 @@ pasteTool.callbacks = {
|
||||||
* @param url
|
* @param url
|
||||||
*/
|
*/
|
||||||
instagramMedia : function(url) {
|
instagramMedia : function(url) {
|
||||||
|
|
||||||
var fullUrl = url.input,
|
var fullUrl = url.input,
|
||||||
data;
|
data;
|
||||||
|
|
||||||
|
@ -186,6 +191,22 @@ pasteTool.callbacks = {
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* callback for youtube url's
|
||||||
|
* Using iframe to render
|
||||||
|
* @uses Youtube tool
|
||||||
|
* @param url
|
||||||
|
*/
|
||||||
|
youtubeMedia : function(url) {
|
||||||
|
var data = {
|
||||||
|
youtube_url: url
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(url);
|
||||||
|
|
||||||
|
codex.tools.youtube.make(data, true);
|
||||||
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* callback for tweets
|
* callback for tweets
|
||||||
* Using Twittter Widget to render
|
* Using Twittter Widget to render
|
||||||
|
|
BIN
plugins/youtube/loading.gif
Normal file
BIN
plugins/youtube/loading.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 329 B |
10
plugins/youtube/youtube.css
Normal file
10
plugins/youtube/youtube.css
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
.ce-redactor .youtube {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 650px;
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.youtube__loader {
|
||||||
|
background: url("loading.gif") !important;
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
93
plugins/youtube/youtube.js
Normal file
93
plugins/youtube/youtube.js
Normal file
|
@ -0,0 +1,93 @@
|
||||||
|
/**
|
||||||
|
* Youtube plugin by gohabereg
|
||||||
|
* @version 1.0.0
|
||||||
|
*/
|
||||||
|
var youtubeTool = {
|
||||||
|
|
||||||
|
make : function(data, isInternal) {
|
||||||
|
|
||||||
|
if (!data.youtube_url)
|
||||||
|
return;
|
||||||
|
|
||||||
|
var properties = {
|
||||||
|
width: '560',
|
||||||
|
height: '315',
|
||||||
|
src: data.youtube_url,
|
||||||
|
frameborder: '0',
|
||||||
|
allowfullscreen: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var frame = codex.draw.node('IFRAME', 'youtube', properties);
|
||||||
|
|
||||||
|
if (isInternal) {
|
||||||
|
|
||||||
|
frame.src = youtubeTool.content.makeEmbedUrl(data.youtube_url);
|
||||||
|
|
||||||
|
console.log(frame.src);
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
|
||||||
|
/** Render block */
|
||||||
|
youtubeTool.content.render(frame);
|
||||||
|
|
||||||
|
}, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
return frame;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Saving JSON output.
|
||||||
|
* Upload data via ajax
|
||||||
|
*/
|
||||||
|
save : function(blockContent) {
|
||||||
|
|
||||||
|
var data;
|
||||||
|
|
||||||
|
if (!blockContent)
|
||||||
|
return;
|
||||||
|
|
||||||
|
data = {
|
||||||
|
youtube_url: blockContent.src
|
||||||
|
};
|
||||||
|
|
||||||
|
return data;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render data
|
||||||
|
*/
|
||||||
|
render : function(data) {
|
||||||
|
return youtubeTool.make(data);
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
youtubeTool.content = {
|
||||||
|
|
||||||
|
render: function (content) {
|
||||||
|
codex.content.switchBlock(codex.content.currentNode, content, 'youtube');
|
||||||
|
|
||||||
|
var blockContent = codex.content.currentNode.childNodes[0];
|
||||||
|
blockContent.classList.add('youtube__loader');
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
blockContent.classList.remove('youtube__loader');
|
||||||
|
}, 500);
|
||||||
|
|
||||||
|
codex.content.insertBlock({
|
||||||
|
type : 'paragraph',
|
||||||
|
block : codex.tools['paragraph'].render({
|
||||||
|
text : ''
|
||||||
|
})
|
||||||
|
}, true );
|
||||||
|
},
|
||||||
|
|
||||||
|
makeEmbedUrl: function (url) {
|
||||||
|
|
||||||
|
return url.replace(/watch\?v=/, 'embed/');
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in a new issue