jwplayer and tinymce

Question

I would like to get jw player to play nicely with tinymce. Currently, tinymce just strips the embed code out, or converts it to ... which breaks it.

first aim is to even allow the jw player code

a nice-to-have would be a button to add the code through the interface.

any help much appreciated

Answer 1

Here's how you can insert video to play in the JW Player in TinyMCE. You need to have the Media plugin added to the TinyMCE editor the ImageManager add-on installed.

Edit /tiny_mce/plugins/media/langs/en_dlg.js:

Anywhere after the first line insert:

allowfullscreen:"Allow Full Screen",

Edit /tiny_mce/plugins/media/media.htm:

Immediately after line 216 (contains the that ends the row that adds the Menu and Live Connect checkboxes to the Advanced section of the Insert Media dialog) insert:

{#media_dlg.allowfullscreen}

Edit /tiny_mce/plugins/media/js/media.js:

After line 73:

setBool(pl, 'flash', 'swliveconnect');

insert:

setBool(pl, 'flash', 'allowfullscreen');

After line 307 insert (Just before the code that detects a URL for YouTube has been used):

if (v.match(/(.+)(.*)\.flv/) || v.match(/(.+)(.*)\.mp4/)) {
    f.width.value = '328';
    f.height.value = '200';
    f.src.value = '/mediaplayer/player.swf?file=' + v;
    return 'flash';
}

(change '/mediaplayer/player.swf' to the location and name of your jw player swf file).

After line 382:

s += getBool('flash', 'swliveconnect', false);

insert:

s += getBool('flash', 'allowfullscreen', false);

Edit the ImageManager config file to allow upload of flv and mp4 files.

To insert a video, click the Insert Media button in the TinyMCE Editor Toolbar. Leave it set to Flash and Browse for the file. This will open the ImageManager. Upload the video file or select the file if it has already been uploaded to your ImageManager. The URL to the file will be inserted into the URL field of the Media dialog. This will give a preview of the video. You can change the size here is you like. Click the Insert button and a Flash Placeholder is inserted.

Answer 2

The answer from Barry Dixon worked from me, with a little fix in media.htm.

the onchange event did not fire in my case, as I use a personal file manager to choose the media file. I just added an onblur event:

<td><input id="src" name="src" type="text" value="" class="mceFocus" onblur="switchType(this.value);generatePreview();" onchange="switchType(this.value);generatePreview();" /></td>