Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Archive /

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

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

How to call JavaScript in page editor?


Go to End


7 Posts   4710 Views

Avatar
mmogrl

Community Member, 9 Posts

19 November 2008 at 8:03pm

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.

Avatar
Nivanka

Community Member, 400 Posts

19 November 2008 at 10:09pm

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

Avatar
Howard

Community Member, 215 Posts

19 November 2008 at 10:11pm

Edited: 19/11/2008 10:14pm

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!

Avatar
mmogrl

Community Member, 9 Posts

19 November 2008 at 11:26pm

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.

Avatar
mmogrl

Community Member, 9 Posts

20 November 2008 at 12:00am

Edited: 20/11/2008 1:56am

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?

Avatar
Howard

Community Member, 215 Posts

20 November 2008 at 9:29am

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

Avatar
S0crates9

27 Posts

24 November 2008 at 7:14am

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?