Page 1 of 1

Adding JWPlayer functionality to IKM

Posted: Wed May 30, 2012 11:24 am
by Martin
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:
  • jwplayer is installed on your site in the folder /js/jwplayer
  • You have already completed the TinyMCE update to the latest version as per this guide
  • 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:

    Code: Select all

    %%Panel.PageHeader%%
    Before, Add:

    Code: Select all

    <script type="text/javascript" src="/js/jwplayer/jwplayer.js"></script>
    .
  2. Download a copy of this plugin:
    https://github.com/ssm2017/TinyMce-JwPl ... /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:

    Code: Select all

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

    Code: Select all

    var jwplayer_url = '/js/jwplayer';
  6. Open: /admin/includes/tiny_mce/plugins/jwplayer/editor_plugin.js
    Find:

    Code: Select all

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

    Code: Select all

    k='/js/jwplayer'
  7. Open: /admin/templates/editor.tpl
    Find:

    Code: Select all

    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:

    Code: Select all

    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:

    Code: Select all

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

    Code: Select all

    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...