mirror of
https://github.com/codex-team/editor.js
synced 2024-06-16 12:45:29 +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>
|
||||
<link rel="stylesheet" href="plugins/paste/paste.css">
|
||||
|
||||
<script src="plugins/youtube/youtube.js"></script>
|
||||
<link rel="stylesheet" href="plugins/youtube/youtube.css">
|
||||
|
||||
<script>
|
||||
codex.start({
|
||||
textareaId : "codex_area",
|
||||
|
@ -164,6 +167,17 @@
|
|||
displayInToolbox: false,
|
||||
enableLineBreaks: 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 : {
|
||||
|
|
|
@ -90,13 +90,15 @@ pasteTool.callbacks = {
|
|||
twitter : new RegExp("http?.+twitter.com?.+\/"),
|
||||
facebook : /https?.+facebook.+\/\d+\?/,
|
||||
vk : /https?.+vk?.com\/feed\?w=wall\d+_\d+/,
|
||||
youtube : /https?.+youtube.com\/watch\?v=.{11}/
|
||||
},
|
||||
|
||||
image = regexTemplates.image.test(string),
|
||||
instagram = regexTemplates.instagram.exec(string),
|
||||
twitter = regexTemplates.twitter.exec(string),
|
||||
facebook = regexTemplates.facebook.test(string),
|
||||
vk = regexTemplates.vk.test(string);
|
||||
vk = regexTemplates.vk.test(string),
|
||||
youtube = regexTemplates.youtube.test(string);
|
||||
|
||||
if (image) {
|
||||
|
||||
|
@ -118,6 +120,10 @@ pasteTool.callbacks = {
|
|||
|
||||
pasteTool.callbacks.vkMedia(string);
|
||||
|
||||
} else if (youtube) {
|
||||
|
||||
pasteTool.callbacks.youtubeMedia(string);
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -173,7 +179,6 @@ pasteTool.callbacks = {
|
|||
* @param url
|
||||
*/
|
||||
instagramMedia : function(url) {
|
||||
|
||||
var fullUrl = url.input,
|
||||
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
|
||||
* 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