Adding JWPlayer functionality to IKM

Martin

2012-05-30 10:24:39

This mod is for anyone who has the jwplayer code (make sure you get a commercial license and support the product!) this modification adds insert videos to be played through jwplayer.



You are assumed to using the following setup:
  1. jwplayer is installed on your site in the folder /js/jwplayer

  2. You have already completed the TinyMCE update to the latest version as per this guide

  3. that you are integrating with ISC

    (If you're not integrating with ISC then you'll need to locate the correct theme/template set you're using instead of the "InterspireShoppingCart" one)


So here goes...

  1. Open: /templates/InterspireShoppingCart/Questions.html

    Find:
    %%Panel.PageHeader%%
    Before, Add:
    <script type="text/javascript" src="/js/jwplayer/jwplayer.js"></script>
    .

  2. Download a copy of this plugin:

    https://github.com/ssm2017/TinyMce-JwPlayer-plugin/downloads

    .

  3. Extract the plugin then rename the folder "ssm2017-TinyMce-JwPlayer-plugin-..." to "jwplayer"

    Note: Ignore the readme as the instructions are aimed more at Drupal and confused me for quite a while

    .

  4. Copy this folder to /admin/includes/tiny_mce/plugins

    .

  5. Open: /admin/includes/tiny_mce/plugins/jwplayer/editor_plugin.src.js

    Find:
    var jwplayer_url = full_url.substring(0,(full_url.length - 26))+ '/jwplayer';

    Replace with:
    var jwplayer_url = '/js/jwplayer';


  6. Open: /admin/includes/tiny_mce/plugins/jwplayer/editor_plugin.js

    Find:
    k=j.substring(0,(j.length-26))+'/jwplayer'
    Replace with:
    k='/js/jwplayer'


  7. Open: /admin/templates/editor.tpl

    Find:
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,cleanup,|,bullist,numlist,|,table,|,outdent,indent,|,link,unlink,anchor,image,media,|,forecolor,backcolor,|,|,code,syntaxhl,preview",
    Replace with:
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,cleanup,|,bullist,numlist,|,table,|,outdent,indent,|,link,unlink,anchor,image,jwplayer,media,|,forecolor,backcolor,|,|,code,syntaxhl,preview",

    Find:
    plugins : "safari,pagebreak,style,layer,table,save,advimage,advlink,media,searchreplace,print,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,preview",
    Replace with:
    plugins : "safari,pagebreak,style,layer,table,save,advimage,advlink,media,searchreplace,print,contextmenu,paste,fullscreen,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,preview, jwplayer",


That's about it... I may have missed a step but I'm recording this for posterity...



You should then see the JWPlayer logo next to the media icon and be able to add in your videos to play...