Training TinyMCE

Now that I have a hackable editor that isn’t a primary part of Wordpress, I can tell it to stop stripping my <video> tags. My installation of tinyMCE has two lines in its main javascript file, tiny_mce.js:

this._def(”valid_elements”,”+a[id|style|rel|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],-strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|style],-ul[class|style],-li[class|style],br,img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align],-sub[style|class],-sup[style|class],-blockquote[dir|style],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],-tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],thead[id|class],tfoot[id|class],-td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],-th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],-span[style|class|align],-pre[class|align|style],address[class|align|style],-h1[id|style|dir|class|align],-h2[id|style|dir|class|align],-h3[id|style|dir|class|align],-h4[id|style|dir|class|align],-h5[id|style|dir|class|align],-h6[id|style|dir|class|align],hr[class|style],-font[face|size|style|id|class|dir|color],dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang]“);

this._def(”extended_valid_elements”,”");

Yeah, that first one’s a doozie. But take a look at it a sec. Valid Elements! This is a complete list of every tag and its allowed modifiers.

Check out the first one. Hey, that’s <a>. and it has ‘href’ listed as an allowed modifier. That means it’s allowing <a xhref=”xxxx” mce_href=”xxxx”></a>! This is the line that tells my suppimental installation of tinyMCE what tags are allowed to proceed from the WYSIWYG editor into the actual post!

This first line is pretty crazy though, I mean look at it. That’s, like, the full XHTML spec for tinyMCE. I don’t want to mess with that one. Apparently, tinyMCE doesn’t want me to monkey with it either, because they’ve made a nice line called ‘extended_valid_elements’ for me to put all the crap they don’t want to be associated with. Since the only thing being stripped from my cool YouTube code are simple <video> tags, I’ll add it here, and tell my installation of tinyMCE to leave them be!

this._def(”extended_valid_elements”,”video”);

note: I spent about an hour to an hour-and-a-half messing with this line in the wrong installation of tinyMCE. Don’t make the changes in the default install of tinyMCE that comes with Wordpress! You’re not using that installation! You won’t see the changes! Even if you could, they would be overwritten when the next version of tinyMCE comes with a Wordpress upgrade, so don’t do it!

Success!

Now, open up a new post. Mmm, pretty editor. click ‘html’. (you have to enter the code this way, otherwise the editor will correctly be assuming you don’t want it rendered in the page). enter the following code: <video>[youtube permalink]</video>. Close the html editor, going back to tinyMCE. You should just see the permalink here, since the <video> tags are, well, tags.

Save the post, and check it out!

An embedded YouTube video, all done via WYSIWYG with one simple tag:

http://www.youtube.com/v/hBi89-STzsU

(the above video is from this code, entered in the html editor: <video>http://www.youtube.com/v/hBi89-STzsU</video>)

Next step

Now all I need to do is copy the ‘link’ button, but modify it so that instead of taking an URL and adding <a xhref=” + URL + “> + TEXT + </a> to the inputs, it will take my YouTube input and add the <video> tags to either end.

In addition, if I’m not completely sick of dealing with this, I might go back and see which tags of the YouTube-supplied code are being cut, and just add those tags to my exception list, however…

there is a plugin out there that plays multiple types of video (YouTube, Google Video) with a single tag. It’s called ExtremeVideo, and it uses a [gv] tag. You’ll notice those are brackets, and not angle brackets, so I’m not sure if tinyMCE’s exception list will recognize it as being ok, if I tell it to ignore ‘gv’.

I’ll post back if I get it working, because ideally, I do want a single tag I can enter in the editor that will play any video file. I just started with WPvideo because it was easy, and it works.

Pages: 1 2

Related: