How to make WYM Editor support embed objects (such as flash videos, youtube, etc.)
Posted 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.