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 →
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 :(
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)
closing tags still get stripped, no matter how much I try with all solutions above, closing object tag is stripped..... frustrating
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
Maxwell—awesome, and check out my update to the post.
Phil—what does that do?
Post a comment
Required fields in bold.