Home

How to make WYM Editor support embed objects (such as flash videos, youtube, etc.)

Posted by Simon on February 08, 2009 at 02:27 AM

Categories: code, internet

Hello! I've got a big update for this post, so skip to the end for the goodness!

I use WYM Editor for editing my posts, it's awesome, there's only just one small thing that I don't like about it, which is out of the box it doesn't allow you to copy/paste embed tags like you would use to embed a flash video, youtube video, etc. into your posts. It actually strips out embed tags if you try to put them in.

Why they would not support this, is out of my mind, I can't understand it. There doesn't seem to be any sense in it. Oh well, I know javascript and XML so I can fix it right? Sure, why not.

So, here is a patch that enables basic support. You can switch to "HTML mode" (i.e., the mode where you can see the sourc code, 2nd button from right in the standard view) and paste in some embed code, the stuff you get from YouTube that looks like this:

<object width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/jzHBszZn6uo&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/jzHBszZn6uo&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="295"></embed>
</object>

The embedded item might or might not actually appear in the preview mode at that point. Don't worry about it. Save it, view the final result, it should be there.

It would be nice if the developers would take this and build it in so that you can actually copy/paste them in the "normal" way.

Here is the patch, apply it by hand, or copy/paste it into a patch file and apply using the patch command.

Index: wymeditor/jquery.wymeditor.mozilla.js
===================================================================
—- wymeditor/jquery.wymeditor.mozilla.js	(revision 119)
+++ wymeditor/jquery.wymeditor.mozilla.js	(working copy)
@@ -80,10 +80,11 @@
     
     //replace em by i and strong by bold
     //(designMode issue)
-    html = html.replace(/<em([^>]*)>/gi, "<i$1>")
-      .replace(/<\/em>/gi, "</i>")
-      .replace(/<strong([^>]*)>/gi, "<b$1>")
-      .replace(/<\/strong>/gi, "</b>");
+    // this messes up embed tags—changes them to ibed
+    //html = html.replace(/<em([^>]*)>/gi, "<i$1>")
+    //  .replace(/<\/em>/gi, "</i>")
+    //  .replace(/<strong([^>]*)>/gi, "<b$1>")
+    //  .replace(/<\/strong>/gi, "</b>");
     
     //update the html body
     jQuery(this._doc.body).html(html);
Index: wymeditor/jquery.wymeditor.js
===================================================================
—- wymeditor/jquery.wymeditor.js	(revision 119)
+++ wymeditor/jquery.wymeditor.js	(working copy)
@@ -2068,6 +2068,17 @@
     "13":"dl",
     "14":"dt",
     "15":"em",
+    "embed":
+    {
+      "attributes":[
+      "allowscriptaccess",
+      "allowfullscreen",
+      "height",
+      "src",
+      "type",
+      "width"
+      ]
+    },
     "fieldset":
     {
       "inside":"form"
@@ -2243,10 +2254,11 @@
     {
       "attributes":
       {
-        "0":"type",
+        "0":"name",
+        "1":"type",
         "valuetype":/^(data|ref|object)$/,
-        "1":"valuetype",
-        "2":"value"
+        "2":"valuetype",
+        "3":"value"
       },
       "required":[
       "name"
@@ -3449,7 +3461,7 @@
     this.block_tags = ["a", "abbr", "acronym", "address", "area", "b",
     "base", "bdo", "big", "blockquote", "body", "button",
     "caption", "cite", "code", "col", "colgroup", "dd", "del", "div",
-    "dfn", "dl", "dt", "em", "fieldset", "form", "head", "h1", "h2",
+    "dfn", "dl", "dt", "em", "embed", "fieldset", "form", "head", "h1", "h2",
     "h3", "h4", "h5", "h6", "html", "i", "ins",
     "kbd", "label", "legend", "li", "map", "noscript",
     "object", "ol", "optgroup", "option", "p", "param", "pre", "q",

The Big Update

Thanks to Maxwell Scott-Slade for commenting and pointing to his even more improved version on his blog. I've taken his & my work, added the ability to support flashvars attribute (required for flickr embeds among others) and forked the wymeditor svn repository into GitHub. Get WYMEditor that supports flash on GitHub.

If you want to use it, just:

% git clone git://github.com/sbwoodside/wymeditor.git
% cd wymeditor/trunk
% make

The result will be in build/build/wymeditor.tar.gz.

Comments

There are 12 comments on this post. Post yours →

Tadas

not sure how to actually put in this code. I can't find any documentation about "patch" command. Also, it looks like the end of the code is chopped off.

Thanks for posting your code

Hi,

Instead of commenting out this code:

html = html.replace(/])>/gi, "").replace(//gi, "").replace(/])>/gi, "").replace(//gi, "");

Perhaps try adding in a word boundary (\b) and having this:

html = html.replace(/])>/gi, "").replace(//gi, "").replace(/])>/gi, "").replace(//gi, "");

This results in being left alone and changing to

Hopefully your comments system didn't strip my tags !

Yep, it did indeed strip tags. You can see what I was trying to do here:

http://pastie.org/421594

Cheers, Phil

Tadas,

patch comes with most Unix flavors (Linux, Solaris etc.) If you don't have it, you can get it through your package manager (apt, emerge, depot)

It's still cutting off the closing tag.

...object's closing tag :(

Pascal

The problem seems to come from the way the WYM handles PARAM tags: as block elements.

By changing param to be handled as an inline element, the XHTML parser converts all the param tags to be self-closing, and is no longer confused when it gets to the end of the object space - instead of calling pop on the open tag stack and getting another param, it correctly sees that object is what is meant to be closed.

So my change was:

Remove param from the list of block elements in this.block_tags

this.block_tags = [ ... "object", "ol", "optgroup", "option", "p", "pre", "q",

Add param to the list of inline tags

this.inline_tags = ["br", "hr", "img", "input", "param"];

(which is line 3400 on my 0.5 RC1 source)

mike

closing tags still get stripped, no matter how much I try with all solutions above, closing object tag is stripped..... frustrating

simon

Well, unless you for some reason must have XHTML, it doesn't really matter...

If I had time, I'd figure it out......

I got a guide together for a proper work-around and a download link.

http://meridimus.com/post/167515648/wymeditor-flash

Maxwell's solution solves this problem in its entirety! nice one.

When I use it in conjunction with this fix it will no longer mess with EM or STRONG tags:

http://pastie.org/421594

simon

Maxwell—awesome, and check out my update to the post.

Phil—what does that do?

Post a comment

Required fields in bold.

 

Browse Old Articles

Categories:

Popular posts:

Subscribe to:

Blogroll: