elRTE

<object> is a little bit broken with YouTube, but you should have no problems embedding using newer format with iframe, as least at the day of latest elRTE release day it was working

Thanks for the reply.

Is there a way to enter in the iframe embed code from youtube using the "video" dialog box?

I know it can be done via the "source" view in the editor, but I don't want to have my users use the source view if possible since there are not technically very sophisticated.

Thanks!

There is no way to do it using video dialog.

I've recently started working with elRTE on my CMS, and after a few hours of work, I created an "Insert YouTube video" function. It's a simple dialog where you can paste the URL of the video, give any width and height value, and it pastes an iframe object into the editor, right after where your cursor is. Actually, it's far from perfection, and I'm pretty sure that I've used some of the functions wrong, but I'd be glad if one of the elRTE authors could check this out, and consider the possibility of creating something like this (but much more professional) in the next release.

(function($) {

    elRTE.prototype.ui.prototype.buttons.YouTube = function(rte, name) {
        this.constructor.prototype.constructor.call(this, rte, name);
        this.youtube_url = $('<input type="text" />').attr('name', 'youtube_url').attr('size', '30');
        this.youtube_w = $('<input type="text" />').attr('name', 'youtube_w').attr('size', '12').val("560");
        this.youtube_h = $('<input type="text" />').attr('name', 'youtube_h').attr('size', '12').val("315");
        this.active  = true;
        var self = this;

        this.command = function() {
            var opts, d;

            opts = {
                rtl : rte.rtl,
                submit : function(e, d) { e.stopPropagation(); e.preventDefault(); d.close(); self.set($("input[name=youtube_url]").val(), $("input[name=youtube_w]").val(),$("input[name=youtube_h]").val()); },
                dialog : {
                    width : 460,
                    title : this.rte.i18n('Insert YouTube video')
                }
            }

            this.rte.selection.saveIERange();        
            d = new elDialogForm(opts);
            d.append([this.youtube_url, this.youtube_w, this.youtube_h], null, true).open();            
        }

        this.update = function() {
            var n = this.rte.selection.getNode();
            this.domElem.removeClass('disabled');
        }

        this.set = function(url, w, h) {
            var getTubeID = function(url, gkey) {
                var returned = null;
                if (url.indexOf("?") != -1) {
                    var list = url.split("?")[1].split("&"),
                    gets = [];

                   for (var ind in list) {
                    var kv = list[ind].split("=");
                    if (kv.length>0)
                        gets[kv[0]] = kv[1];
                }
                returned = gets;

                if (typeof gkey != "undefined")
                    if (typeof gets[gkey] != "undefined")
                        returned = gets[gkey];
                }

                return returned;
            }

            var toinsert = '<iframe width="'+w+'" height="'+h+'" src="http://www.youtube.com/embed/'+getTubeID(url, "v")+'" frameborder="0" allowfullscreen></iframe>';
            this.rte.history.add();
            this.rte.selection.insertHtml(toinsert);
        }
    }
})(jQuery);

After pasting this at the end of elrte.full.js, you should create an icon for the button - I personally opened images/elrte-toolbar.png in Photoshop, inserted a small YouTube icon a few pixels left from the "pagebreak" icon, and pasted this into the CSS:

.el-rte .toolbar ul li.YouTube { background-position: -683px -28px }

The last thing to do is to implement the new icon into the toolbar. I added 'YouTube' to the end of the 'links' panel, but you can put it anywhere you want.

I hope I could help (if I couldn't, please correct my code anyway you want),
Csaba Marosi

Hi Csaba,

To be honnest, your script is exactly what I was looking for. So thank you a lot!!

I made a couple of changes on your script (add some fields labels, disabled the button in fullscreen mode, add a title to the button etc..) and implemented a Vimeo button based on the same script:

(function($) {
    elRTE.prototype.ui.prototype.buttons.youtube = function(rte, name) {
        this.constructor.prototype.constructor.call(this, rte, name);

        this.youtube_url = $('<input type="text" />px').attr('name', 'youtube_url').attr('size', '40');
        this.youtube_w = $('<input type="text" />').attr('name', 'youtube_w').attr('size', '12').val("560");
        this.youtube_h = $('<input type="text" />').attr('name', 'youtube_h').attr('size', '12').val("315");
        //antoinek: needs to be commented out to prevent the button to be active in fullscreen mode
        //this.active  = true;
        var self = this;

        this.command = function() {
            var opts, d;

            opts = {
                rtl : rte.rtl,
                submit : function(e, d) { e.stopPropagation(); e.preventDefault(); d.close(); self.set($("input[name=youtube_url]").val(), $("input[name=youtube_w]").val(),$("input[name=youtube_h]").val()); },
                dialog : {
                    width : 460,
                    title : this.rte.i18n('Insert YouTube video')
                }
            }

            this.rte.selection.saveIERange();        
            d = new elDialogForm(opts);
            d.append([this.rte.i18n('Youtube URL'),this.youtube_url], null, true)         
            d.append([this.rte.i18n('Width'),$('<span />').append(this.youtube_w).append(' px')], null, true)         
            d.append([this.rte.i18n('Height'),$('<span />').append(this.youtube_h).append(' px')], null, true)  
            d.open();
            this.rte.ui.update(true);
        }

        this.update = function() {
            this.domElem.removeClass('disabled active');
        }

        this.set = function(url, w, h) {
            var getTubeID = function(url, gkey) {
                var returned = null;
                if (url.indexOf("?") != -1) {
                    var list = url.split("?")[1].split("&"),
                    gets = [];

                   for (var ind in list) {
                    var kv = list[ind].split("=");
                    if (kv.length>0)
                        gets[kv[0]] = kv[1];
                }
                returned = gets;

                if (typeof gkey != "undefined")
                    if (typeof gets[gkey] != "undefined")
                        returned = gets[gkey];
                }

                return returned;
            }

            var toinsert = '<iframe width="'+w+'" height="'+h+'" src="http://www.youtube.com/embed/'+getTubeID(url, "v")+'?wmode=transparent" frameborder="0" allowfullscreen></iframe>';
            this.rte.history.add();
            this.rte.selection.insertHtml(toinsert);
        }
    }
})(jQuery);
elRTE.prototype.options.buttons.youtube = 'Insert Youtube video';

(function($) {
    elRTE.prototype.ui.prototype.buttons.vimeo = function(rte, name) {
        this.constructor.prototype.constructor.call(this, rte, name);
        this.vimeo_url = $('<input type="text" />').attr('name', 'vimeo_url').attr('size', '40');
        this.vimeo_w = $('<input type="text" />').attr('name', 'vimeo_w').attr('size', '12').val("560");
        this.vimeo_h = $('<input type="text" />').attr('name', 'vimeo_h').attr('size', '12').val("315");
        this.vimeo_title = $('<input type="checkbox" />').attr('name', 'vimeo_title');
        this.vimeo_portrait = $('<input type="checkbox" />').attr('name', 'vimeo_portrait');
        this.vimeo_byline = $('<input type="checkbox" />').attr('name', 'vimeo_byline');
        this.vimeo_autoplay = $('<input type="checkbox" />').attr('name', 'vimeo_autoplay');
        this.vimeo_loop = $('<input type="checkbox" />').attr('name', 'vimeo_loop');
        this.vimeo_color = $('<input type="text" />').attr('name', 'vimeo_color');
        //antoinek: needs to be commented out to prevent the button to be active in fullscreen mode
        //this.active  = true;
        var self = this;

        this.command = function() {
            var opts, d;

            opts = {
                rtl : rte.rtl,
                submit : function(e, d) { e.stopPropagation(); e.preventDefault(); d.close(); self.set($("input[name=vimeo_url]").val(), $("input[name=vimeo_w]").val(),$("input[name=vimeo_h]").val()); },
                dialog : {
                    width : 460,
                    title : this.rte.i18n('Insert Vimeo video')
                }
            }

            this.rte.selection.saveIERange();        
            d = new elDialogForm(opts);
            d.append([this.rte.i18n('Vimeo URL'),this.vimeo_url], null, true)         
            d.append([this.rte.i18n('Width'),$('<span />').append(this.vimeo_w).append(' px')], null, true)         
            d.append([this.rte.i18n('Height'),$('<span />').append(this.vimeo_h).append(' px')], null, true)
            d.append([this.rte.i18n('Color'),$('<span />').append(this.vimeo_color).append(' (format has to be like ffffff)')], null, true)                
            d.append([this.rte.i18n('Portrait'),this.vimeo_portrait], null, true)
            d.append([this.rte.i18n('Title'),this.vimeo_title], null, true)
            d.append([this.rte.i18n('Byline'),this.vimeo_byline], null, true) 
            d.append([this.rte.i18n('Autoplay'),this.vimeo_autoplay], null, true) 
            d.append([this.rte.i18n('Loop'),this.vimeo_loop], null, true)             
            d.open();            
            this.rte.ui.update();
        }

        this.update = function() {
            this.domElem.removeClass('disabled');
        }

        this.set = function(url, w, h) {
            var getVimeoID = function(url) {
                var indexVimeoId = url.lastIndexOf("/");
                return url.substr(indexVimeoId + 1);
            }

            var getOptions = function() {
                var vimeo_color_url = $("input[name=vimeo_color]").val();
                var vimeo_portrait_url = $("input[name=vimeo_portrait]").is(':checked');
                var vimeo_byline_url = $("input[name=vimeo_byline]").is(':checked');
                var vimeo_title_url = $("input[name=vimeo_title]").is(':checked');
                var vimeo_autoplay_url = $("input[name=vimeo_autoplay]").is(':checked');
                var vimeo_loop_url = $("input[name=vimeo_loop]").is(':checked');

                if(vimeo_loop_url || vimeo_autoplay_url || !vimeo_title_url || !vimeo_byline_url || !vimeo_portrait_url || (vimeo_color_url.length != 0)){
                        var return_str = '?';
                        if(vimeo_loop_url){
                            if(return_str == '?'){
                                return_str = return_str+'loop=1';
                            }else{
                                return_str = return_str+'&amp;loop=1';
                            }                            
                        }
                        if(vimeo_autoplay_url){
                            if(return_str == '?'){
                                return_str = return_str+'autoplay=1';
                            }else{
                                return_str = return_str+'&amp;autoplay=1';
                            }
                        }
                        if(!vimeo_title_url){
                            if(return_str == '?'){
                                return_str = return_str+'title=0';
                            }else{
                                return_str = return_str+'&amp;title=0';
                            }
                        }
                        if(!vimeo_portrait_url){
                            if(return_str == '?'){
                                return_str = return_str+'portrait=0';
                            }else{
                                return_str = return_str+'&amp;portrait=0';
                            }
                        }
                        if(!vimeo_byline_url){
                            if(return_str == '?'){
                                return_str = return_str+'byline=0';
                            }else{
                                return_str = return_str+'&amp;byline=0';
                            }
                        }
                        if(vimeo_color_url.length != 0){
                            if(return_str == '?'){
                                return_str = return_str+'color='+vimeo_color_url;
                            }else{
                                return_str = return_str+'&amp;color='+vimeo_color_url;
                            }
                        }
                        return return_str;
                }else{
                    return '?wmode=transparent';
                }            
            }

            var toinsert = '<iframe width="'+w+'" height="'+h+'" src="http://player.vimeo.com/video/'+getVimeoID(url)+getOptions()+'" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
            this.rte.history.add();
            this.rte.selection.insertHtml(toinsert);
        }
    }
})(jQuery);
elRTE.prototype.options.buttons.vimeo = 'Insert Vimeo video';

I would also suggest you Csaba to include your own scripts on a separate file to prevent your functions to be deleted in case of future update.
If anyone wants to improve/update my script, feel free to do it.

I also found this script in order to add a SyntaxHighligher code button but I haven't tested it yet: http://www.cotonti.com/pastebin/152

And a big THANK YOU for the elrte team which has made a really good job with this WYSIWYG. So simple to extend it....!!!

Antoine Kociuba

That look very interesting, I'll think about including it into elRTE release