Plugin para inserir vídeos do YouTube no CKEditor
Depois de alguns dias sem postar em razão de muito trabalho, Curso de Java e 7 matérias na faculdade, estou de volta com mais um plugin para o CKEditor. Muitos usuários leigos não sabem como inserir um vídeo do YouTube no CKEditor, por não saberem manipular o código fonte do texto. Resolvi criar esse plugin para auxiliar nesta tarefa. Basta apenas colar a URL do vídeo ou o código embed gerado pelo YouTube e o sistema se encarrega do resto.
Também é possível gerar código XHTML válido ao inserir um vídeo via URL. Quando o código XHTML válido é gerado, não aparece nenhum elemento na tela indicando um vídeo, mas no código fonte sim. Estranho.
Instalação
Baixe o CKEditor, extraia para alguma pasta, baixe o Plugin e extraia para a pasta plugins do CKEditor. Feito isso, você deve informar ao sistema para usar esse plugin. No arquivo “config.js”, localizado na pasta do CKEditor, adicione a seguinte linha:
config.extraPlugins = "youtube";
Você também deve adicionar o botão do plugin na barra de ferramentas do programa. Veja um exemplo:
config.toolbar = [
['Preview'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar'],
['Font','FontSize'],
['TextColor','BGColor', '-', 'Source', 'YouTube']
];
Código
CKEDITOR.dialog.add( 'youtube', function( editor ){
return {
title : 'Inserir vídeo do YouTube',
minWidth : 390,
minHeight : 230,
contents : [{
id : 'urlTab',
label : 'URL do Vídeo',
title : 'URL do Vídeo',
elements : [
{
id : 'url',
type : 'text',
label : 'Cole a URL do vídeo do YouTube'
}, {
id : 'xhtml',
type : 'checkbox',
label : 'XHTML válido'
}, {
id : 'width',
type : 'text',
label : 'Largura',
width : '40'
}, {
id : 'height',
type : 'text',
label : 'Altura',
width : '40'
}
]
}, {
id : 'embedTab',
label : 'Código Embed',
title : 'Código Embed',
elements : [{
id : 'embed',
type : 'textarea',
label : 'Cole o código gerado pelo YouTube (embed)'
}]
}],
onOk : function() {
var editor = this.getParentEditor();
var contentUrl = this.getValueOf( 'urlTab', 'url' );
var contentEmbed = this.getValueOf( 'embedTab', 'embed' );
var xhtml = this.getValueOf( 'urlTab', 'xhtml' );
var width = this.getValueOf( 'urlTab', 'width' );
var height = this.getValueOf( 'urlTab', 'height' );
width = width ? width : 450;
height = height ? height : 366;
if (contentUrl.length > 0) {
if (xhtml == true){
contentUrl = contentUrl.replace(/^[^v]+v.(.{11}).*/,"$1");
editor.insertHtml('<object type="application/x-shockwave-flash" style="width:' + width + 'px; height:' + height + 'px;" data="http://www.youtube.com/v/'+contentUrl+'"><param name="movie" value="http://www.youtube.com/v/'+contentUrl+'" /></object>');
}
else {
contentUrl = contentUrl.replace(/^[^v]+v.(.{11}).*/, "$1");
editor.insertHtml('<object width="' + width + '" height="' + height + '"><param name="movie" value="http://www.youtube.com/v/'+contentUrl+'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+contentUrl+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + width + '" height="' + height + '"></embed></object>');
}
}
else
if (contentEmbed.length > 0) {
editor.insertHtml(contentEmbed);
}
},
buttons : [ CKEDITOR.dialog.okButton, CKEDITOR.dialog.cancelButton ]
};
});
CKEDITOR.plugins.add( 'youtube', {
init : function( editor ) {
var command = editor.addCommand( 'youtube', new CKEDITOR.dialogCommand( 'youtube' ) );
command.modes = { wysiwyg:1, source:1 };
command.canUndo = false;
editor.ui.addButton( 'YouTube', {
label : 'Inserir vídeo do YouTube',
command : 'youtube',
icon : this.path + 'youtube.png'
});
CKEDITOR.dialog.add( 'youtube', 'youtube' );
}
});
Update: Uma versão mais completa do plugin está disponível no site do CKEditor.
Abraço e até a próxima!