Youtube fix & Insert Smilie mod

Dec 28, 2011 at 3:37 PM
Edited Dec 29, 2011 at 10:44 AM

We've made two fixed to the editor for our forum software (in which the editor is included).

Youtube fix:
This prompts the user just to enter the ID for the video. Obviously, you would need to update your parser to take this into account.
Find the Youtube function and replace with:

this.InsertYoutube = function () {
		// added for CalicoBB
		var youtubeCode;
		youtubeCode = prompt("Enter the YouTube video ID. Eg: http://youtube.com/watch?v=123, enter 123","sg60aAtYNnk");
		youtubeCode = "[youtube]" + youtubeCode + "[/youtube]";
		this.InsertText(youtubeCode);
	}

Insert Smilie:
This allows you to insert smilies where you want.
After the Youtube fix, add:

	this.InsertSmile = function (txt) {
		// added for CalicoBB
		this.InsertText(txt);
	}

To use it, use the code

<img src="__image_url___" title=":smile:" alt=":smile:" onclick="wswgEditor.InsertSmile('__image_code__');" />

 

The editor is great, and so easy to use.

Jul 6, 2013 at 10:02 AM
I actually just went the extra mile with youtube, and added it to the wysiwyg editor. It also allows the user to paste a whole youtube url, and it'll parse the ID out from it.

Here are my changes:

In function html2bbcode, add this line (for example below the img tag):
rep(/<iframe\s[^<>]*?width=\"?\d+\"?\s[^<>]*?height=\"?\d+\"\s[^<>]*?src=\"http[s]*:\/\/www.youtube.com\/embed\/([^<>]*?)[\/]?\"\s[^<>]*?(frameborder=\"\d+\"\s[^<>]*?)?allowfullscreen(=\"(true|false)*\")?>[\s]*(?!<\/iframe>)*<\/iframe>/gi, "[youtube]$1[/youtube]");
Then further down in the clean up empty tags section:
rep(/\[youtube\]\[\/youtube\]/gi, "");
in bbcode2html:
rep(/\[youtube\]?([^\[]*?)\[\/youtube\]/gi, "<iframe width=\"560\" height=\"315\" src=\"http://www.youtube.com/embed/$1\" frameborder=\"0\" allowfullscreen></iframe>");
And instead of the InsertYoutube function, I made a new function that I call on click on the youtube button:
    this.doYoutube = function() {
        if (editorVisible) {
            ifm.contentWindow.focus();
            var myVideo = prompt('Enter YouTube URL (or id):', 'http://');
            if (myVideo != null && myVideo != "") {
                var youRexex = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
                var match = youRexex.exec(myVideo)[7];
                var embedTag = '<iframe width="560" height="315" src="http://www.youtube.com/embed/' + match + '" frameborder="0" allowfullscreen></iframe>';
                myeditor.execCommand("Inserthtml", false, embedTag);
            }
        } else {
            AddTag('[youtube]', '[/youtube]');
        }
    }
Jul 6, 2013 at 5:15 PM
Edited Jul 6, 2013 at 7:39 PM
Brilliant, exactly what i was looking for. Thank you very much.

http://www.youtube.com/watch?feature=player_embedded&v=CnegupX97CM <-------- not work

http://www.youtube.com/watch?CnegupX97CM <----------------if you work