Forum closed. New forum available at http://community.wymeditor.org/

How to insert youtube or other offsite media?

Support forum for WYMeditor.

How to insert youtube or other offsite media?

Postby cyonite on Mon Sep 01, 2008 11:25 am

Hi
Awesome editor but I'm trying to figure out how to insert youtube clips.
I can honestly not understand how to use the method with certain folders and image files with youtube clips. I really need a concrete step by step example for this. :?
So do I have to make a youtube, flickr plugin for this to work?

Thx in advance
Andreas
cyonite
 
Posts: 1
Joined: Mon Sep 01, 2008 11:13 am

Re: How to insert youtube or other offsite media?

Postby mr_lundis on Mon Sep 01, 2008 3:10 pm

The directory approach to this problem is intended for on-site media, for off-site media I don't have any good solution. One possible approach would be to insert a link and based on it's target url replace it width an flash object.

Example:
Code: Select all
// The youtube link:
<a href="http://www.youtube.com/watch?v=1smATU3p4Qs">Video</a>

// Take the video id (1smATU3p4Qs) and insert it in the following code:
<object width="425" height="344">
    <param name="movie" value="http://www.youtube.com/v/<Inser video id here...>&hl=en&fs=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <embed src="http://www.youtube.com/v/<...and here>=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
</object>


This can be done at the server side using PHP, ASP, Ruby, etc. or the client side by JavaScript.
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: How to insert youtube or other offsite media?

Postby jfh on Mon Sep 01, 2008 6:57 pm

Yes - there's an howto here.
User avatar
jfh
Site Admin
 
Posts: 370
Joined: Sat Sep 23, 2006 8:43 pm
Location: Belgium

Re: How to insert youtube or other offsite media?

Postby shacker on Thu Apr 23, 2009 5:33 pm

Our use case is a small staff of 100% trusted editors. We are absolutely positively not worried about someone inserting malicious code. I don't want to build a server-side parsing solution... I just want WYMEditor to stop mangling/denuding the <object> tags we so carefully insert. What can I change in WYME to make it leave those alone?

Thanks for any tips.
shacker
 
Posts: 9
Joined: Thu Mar 05, 2009 7:30 pm

Re: How to insert youtube or other offsite media?

Postby petha443 on Fri Apr 24, 2009 6:44 am

Hi!

What I do for off site media, like Youtube is that I add a image with a certain class and embeds information to be able to recreate the object tags.

some example code
This is for adding a button in wymeditor
Code: Select all
   $('.wymeditor').wymeditor({
             postInit: function(wym) {
              var html = "<li class='wym_tools_newbutton'>"
                     + "<a name='NewButton' href='#'"
                     + " style='background:"
                     + " '#000'>"
                     + "Do something"
                     + "</a></li>";

            //add the button to the tools box
               jQuery(wym._box)
               .find(wym._options.toolsSelector + wym._options.toolsListSelector)
               .append(html);

            //handle click event
               jQuery(wym._box).find('li.wym_tools_newbutton a').click(function() {
                   //do something
                   var youTube = prompt("Youtube embed text","");
                   var dom = $(youTube);
                   var width = $(dom).attr("width");
                   var height = $(dom).attr("height");
                   var src = $('embed', dom).attr('src');
                   
                   var html = "<img class='youtube' src='/~petha443/sif/Directory/images/youtube.jpg'"
                   + " alt='" + src + "'"
                   + " height='" + height +"'"
                   + " width ='" + width + "'"
                   + "/>";
                   wym.insert(html);
                   return(false);
                  });
               }
          });


On pages were the "youtube-image" appears i can then replace it with the following javascript:
Code: Select all
   $(".youtube").each(function() {
   var height = $(this).attr("height");
   var width = $(this).attr("width");   
   $(this).replaceWith("<object width='"
   + width
   + "' height='"
   + height + "'><param name='movie' value='"
   + $(this).attr("alt")
   +"'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='"
   + $(this).attr("alt")
   + "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='"
   + width +  "' height='"
   + height  + "'></embed></object>");
   });
   
petha443
 
Posts: 1
Joined: Fri Apr 24, 2009 6:36 am

Re: How to insert youtube or other offsite media?

Postby shacker on Fri Apr 24, 2009 5:58 pm

Hey Petha - Thanks much for the response, interesting. That's a crazy amount of customization for a simple thing though. I'm looking for a list of "safe" tags that I can edit somewhere. Shouldn't I be able to just say "<object>" is safe and leave it at that? Doesn't such a thing exist?

Also, your javascript solution does not degrade well for non-javascript end users...
shacker
 
Posts: 9
Joined: Thu Mar 05, 2009 7:30 pm

Re: How to insert youtube or other offsite media?

Postby shacker on Fri Apr 24, 2009 6:00 pm

I should add that we're not dealing with off-site media here but our own .mov and .swf files that we simply want to embed. We don't need the code generated - we've got the embed code ready to go (coming out of Dreamweaver or other tools). We just want it to be left alone.
shacker
 
Posts: 9
Joined: Thu Mar 05, 2009 7:30 pm

Re: How to insert youtube or other offsite media?

Postby mr_lundis on Sun Apr 26, 2009 7:06 pm

Take a look at this blog post by Simon Woodside.

Cheers! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: How to insert youtube or other offsite media?

Postby mr_lundis on Mon Apr 27, 2009 4:45 pm

I found myself with some time over last night, so I decided to try to implement Simon Woodside embed patch as a WYMeditor plug-in. The plug-in is rather experimental, be warned.

If you want to try it out, grab a fresh copy of the trunk and open up the embed.html inside the test directory or add the jquery.wymeditor.embed.js file to your WYMeditor page.

Current issues:
- The closing object tag gets striped out. The same thing occurs using a patched version of WYMeditor (without the plug-in.)
- The editor isn't handling objects/embeds very well, the code needs to be inserted in html/source mode.

Please feel free to come with improvements.

Cheers! ;)

Edit:
Just to clarify, this isn't an official embed plug-in for WYMeditor, just a workaround (or whatever you'd like to call it) to enable embeds in WYmeditor. A progressive enhancement approach (like what petha443 is talking about) is still the recommended way of doing this.
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: How to insert youtube or other offsite media?

Postby shacker on Mon Apr 27, 2009 7:06 pm

Thanks for putting in the effort! However I'm having trouble getting this version to work at all. Getting this error:

Error: WYMeditor.WymClassMozilla is not a constructor
Source File: http://127.0.0.1:8000/media/js/wymedito ... meditor.js
Line: 712

Has something changed in the project layout? Looks like there are some new browser-specific files that weren't there before (.mozilla, .opera., explorer)...
shacker
 
Posts: 9
Joined: Thu Mar 05, 2009 7:30 pm

Re: How to insert youtube or other offsite media?

Postby mr_lundis on Tue Apr 28, 2009 2:02 pm

If you're not using a built version of WYMeditor you'll need to include all the browser specific classes for the editor to work (or just run make to build the editor yourself.)

Cheers! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: How to insert youtube or other offsite media?

Postby foror on Wed Aug 12, 2009 9:21 am

Add to WYMeditor.XhtmlValidator (in src):

Code: Select all
   
"embed":
    {
      "attributes":
      {
        "0":"width",
        "1":"height",
        "2":"allowfullscreen",
        "3":"wmode",
        "4":"type",
        "5":"src",
      }
    },


and edit "param" for new record "3":"name"
Code: Select all
    "param":
    {
      "attributes":
      {
        "0":"type",
        "valuetype":/^(data|ref|object)$/,
        "1":"valuetype",
        "2":"value",
        "3":"name"
      },


Also finding this.block_tags and insert "embed". Move "param" to this.inline_tags from this.block_tags .

And build button plugin for insert youtube embed code (look wymeditor examples) or insert it after click "src button" on wymeditor panel.
foror
 
Posts: 1
Joined: Wed Aug 12, 2009 9:11 am
Location: Russia, Omsk


Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

cron