Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » How to call JavaScript in page editor?

Our old forums are still available as a read-only archive.

Moderators: martimiz, Sean, biapar, Willr, Ingo, simon_w

Page: 1
Go to End
Author Topic: 3812 Views
  • mmogrl
    Avatar
    Community Member
    9 Posts

    How to call JavaScript in page editor? Link to this post

    First I would like to say that I LOVE your CMS. This sucker in clean, well done! I can't wait to see the next version here in a few weeks.

    However at this time I am attempting to install this little free mp3 player on a page through the CMS page editor:

    http://www.macloo.com/examples/audio_player/

    I click on the "HTML" button and input the below script (with out the fake data):

    <script language="JavaScript" src="http://www.fakedomain.com/myname/audio/audio-player.js"></script>
    <object type="application/x-shockwave-flash" data="http://www.fakedomain.com/myname/audio/player.swf" id="audioplayer1" height="24" width="290">
    <param name="movie" value="http://www.fakedomain.com/myname/audio/player.swf">
    <param name="FlashVars" value="playerID=1&amp;soundFile=http://www.fakedomain.com/myname/audio/music.mp3">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="wmode" value="transparent">
    </object>

    and click on update, save & publish. However when I do this the code disappears.

    How may I fix this or how may I place this code into the page?

    Thank you.

  • Nivanka
    Avatar
    Community Member
    395 Posts

    Re: How to call JavaScript in page editor? Link to this post

    The tinyMCE editors settings in SilverStripe restricts you from adding some html tags, including script

    but you can remove this condition, try with this tutorial

    http://doc.silverstripe.com/doku.php?id=tinymce

  • Howard
    Avatar
    Community Member
    215 Posts

    Re: How to call JavaScript in page editor? Link to this post

    Hi there,

    The CMS strips out the extra HTML tags to protect the content editors from stuffing up the design of the page, this however causes a problem for people who are both the designer and the editor like yourself where you know what you want to do and are limited buy the content field.

    There are a few ways of approaching it none of which are particularly difficult, firstly you could hack the core and allow certain, or all, html tags in the editor. I wouldn't recommend this as it doesn't work after you upgrade. [EDIT: you beat me to this Nivanka]

    Secondly you could include it in the template directly, if you haven't been through the tutorials yet then go through them and find out how to make another page type with its own template then just include your embed code in your template for that page type.

    Thirdly (the best way to do it from my point of view) you could create a function in the page controller and call it in the content with a short tag such as $Mp3player. For more info on this have a look at http://doc.silverstripe.com/doku.php?id=recipes:customising-content-in-your-templates&s=paypal

    Hope this helps!

  • mmogrl
    Avatar
    Community Member
    9 Posts

    Re: How to call JavaScript in page editor? Link to this post

    Wow! Thank you. This is great as I just began to drool at:

    http://www.gruppo4.com/~tobia/cross-slide.shtml

    which, used sparingly, should add a lot of spark to a little art site.

    I will read through your links, thanks again.

  • mmogrl
    Avatar
    Community Member
    9 Posts

    Re: How to call JavaScript in page editor? Link to this post

    Hello howardgrigg, I am attempting to do it the proper way as you have suggested:

    I put the following in mysite/code/Page.php:

    function Content() {
    return str_replace('$MP3', $this->MP3Player(), $this->Content);
    }
    function MP3Player() {
    return "<script language="JavaScript" src="http://www.fakedomain.com/myname/audio/audio-player.js"></script>
    <object type="application/x-shockwave-flash" data="http://www.fakedomain.com/myname/audio/player.swf" id="audioplayer1" height="24" width="290">
    <param name="movie" value="http://www.fakedomain.com/myname/audio/player.swf">
    <param name="FlashVars" value="playerID=1&amp;soundFile=http://www.fakedomain.com/myname/audio/music.mp3">
    <param name="quality" value="high">
    <param name="menu" value="false">
    <param name="wmode" value="transparent">
    </object> ";
    }

    However that killed the CMS and I removed it. I am sure there are errors in my syntax. Can you help me fix it? I believe if I execute this once, I should be good to go with everything else!

    "I wouldn't recommend this as it doesn't work after you upgrade. "

    If you do upgrade, can you edit the TinyMCE again? If someone goes that route?

  • Howard
    Avatar
    Community Member
    215 Posts

    Re: How to call JavaScript in page editor? Link to this post

    Hey, yea it looks good. I imagine that you might not have put it in the page controller class of page.php. If you paste the full page.php file into pastebin.com then post the link here we can see if its in the wrong place.

    You can re-modify tinyMCE but versions change and the way you modify it might changes so its just a bit more work long term

  • S0crates9
    Avatar
    27 Posts

    Re: How to call JavaScript in page editor? Link to this post

    I am having problems accomplishing this as well. Ultimately I'd like to send the flash video file, width and height by page call and just have the flash video player available on any page type.

    So as per tutorials on silverstripe, I added the following to mysite/code/Page.php:

    function FlashVideo($vid,$width,$height){
    return "<script language=\"javascript\">
    if (AC_FL_RunContent == 0) {
    alert(\"This page requires AC_RunActiveContent.js.\");
    } else {
    AC_FL_RunContent(
    'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
    'width', $width,
    'height', $height,
    'src', 'AFC_EmbedPlayer',
    'quality', 'high',
    'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
    'align', 'middle',
    'play', 'true',
    'loop', 'true',
    'scale', 'showall',
    'wmode', 'window',
    'devicefont', 'false',
    'id', 'AFC_EmbedPlayer',
    'bgcolor', '#ffffff',
    'name', 'AFC_EmbedPlayer',
    'menu', 'true',
    'allowFullScreen', 'true',
    'allowScriptAccess','sameDomain',
    'movie', 'assets/Flash/AFC_EmbedPlayer',
    'salign', '',
    'FlashVars', 'flvURL=$vid&bufferSeconds=2&showBigPlayButton=true&showReplayButton=true&showBufferingIndicator=true&autoHideControls=false
    &autoBuffer=true&autoStart=false&shrinkVideoOnComplete=true'
    );
    }
    </script>
    <noscript>
    <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0\"
    width=$width height=$height id=\"AFC_EmbedPlayer\" align=\"middle\">
    <param name=\"allowScriptAccess\" value=\"sameDomain\" />
    <param name=\"allowFullScreen\" value=\"true\" />
    <param name=\"movie\" value=\"assets/Flash/AFC_EmbedPlayer.swf\" />
    <param name=\"quality\" value=\"high\" />
    <param name=\"bgcolor\" value=\"#ffffff\" />
    <param name=\"FlashVars\" value=\"flvURL=$vid&bufferSeconds=2&showBigPlayButton=true&showReplayButton=true&showBufferingIndicator=true&autoHideControls=false
    &autoBuffer=true&autoStart=false&shrinkVideoOnComplete=true\" />
    <embed src=\"assets/Flash/AFC_EmbedPlayer.swf\" quality=\"high\" bgcolor=\"#ffffff\" width=$width height=$height name=\"AFC_EmbedPlayer\" align=\"middle\"
    allowScriptAccess=\"sameDomain\" allowFullScreen=\"true\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\"
    FlashVars=\"flvURL=$vid&bufferSeconds=2&showBigPlayButton=true&showReplayButton=true&showBufferingIndicator=true&autoHideControls=false&autoBuffer=true&autoStart=false
    &shrinkVideoOnComplete=true\" />
    </object>
    </noscript>";
    }

    When I call $FlashVideo("assets/Flash/Videos/file.flv","320","240") from the TinyMCE HTML editing window, all I get in publish is an echo of the line.

    Any way to get this to work?

    3812 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.