CODEWITHSUNDEEP
youtubeckeditorwysiwyg
user1590523
user1590523

Reputation: 41

can't add youtube video to ckeditor when switching to bbcode

I installed ckeditor and had it set by default to html output, and i managed to add youtube video by clicking flash button and putting youtube link like so: http://www.youtube.com/v/G6Na--PE9Yo

now i switched to bbcode, and when i do the same thing it's not working. i even tried with a YouTube plugin but still not working.

If you know how to fix it I would love to hear. i have a lead but i don't know how to to this.

when ever someone putting youtube link, I want it to replace it to this syntax:

[youtube]http://www.youtube.com/v/G6Na--PE9Yo[/youtube]

and on html output it should be:

<embed allowfullscreen="true" height="300" src="http://www.youtube.com/v/G6Na--PE9Yo?version=3&amp;color1=0xb1b1b1&amp;color2=0xcfcfcf&amp;feature=player_embedded" type="application/x-shockwave-flash" width="500"></embed>

any way to do that?

Upvotes: 4

Views: 854

Answers (1)

Dmitry
Dmitry

Reputation: 7246

I used CKEditor 4.1.2 and BBCode add-on 4.1.3 but I don't think latest versions (4.3) are much different. All changes you need to do are in the BBCode add-on:

  1. YouTube add-on creates iframes but we need to treat them as youtube "tag" for bbcode. So add iframe: 'youtube' to the convertMap in line 30.

  2. Now we need to map that "tag" to BBCode tag. Add youtube: 'youtube' to the bbcodeMap in line 29

  3. Now we need to specify what to do with this youtube tag. Go to editor.dataProcessor.htmlFilter.addRules (line 637) and add new else if for the youtube tag:

Code:

else if (tagName == 'youtube') {
   element.isEmpty = 0;
   var arr = attributes.src.split('/');
   var ytid = arr[arr.length - 1].split('?')[0];
   element.children = [new CKEDITOR.htmlParser.text(ytid)];
   element.attributes.ytheight = attributes.height;
   element.attributes.ytwidth = attributes.width;
}

The 1st line is a copy-paste from img tag. I'm not sure what it does. Next 3 lines are here to get YouTube id form the src attribute and put in between youtube tags like this [youtube]{id}[/youtube]. It is a bad idea to put a full URL in the YouTube tag, because a user can put any URL there. See conventions: http://www.bbcode.org/reference.php. This solution is enough in your case but not in mine. I need to transfer width and height too. So 2 last lines add custom attributes ytheight and ytwidth. I use the ytprefix so that other elements those have height or width won't get these attributes added to their BBCodes.

4.Go to var BBCodeWriter = CKEDITOR.tools.createClass (line 407). And there in proto: (line 432) there is a function attribute : function( name, val ) (line 486) add an else if for ytheight and one ytwidth

Code:

else if (name == 'ytwidth') { 
    this.write(' width=', val); 
} else if (name == 'ytheight') {
    this.write(' height=', val);
}

You can add more attributes in that way if you want.

The final output:

[youtube height=315 width=560]0aSCPmabRpM[/youtube]

P.S. The drawback of this method that all iframes will be treated as YouTube but I don't think you need any other iframes.

Upvotes: 4

Related Questions