Bang Head HereThis topic became my white whale today. This has been a problem with Wordpress 2.0, and the cause of many, many forum posts.

I sat down, told myself that I wouldn’t get up until I could embed a YouTube video in WP2 with the WYSIWYG Editor turned on, and ended up not getting up for the next three hours.

In the end, the solution was simple. I just shouldn’t have drank so much Water Joe.

Author’s Note: This post describes how to hack Wordpress into letting you post video code while the WYSIWYG editor is turned on.  I wrote this on April 26, 2006.  Since then, there have been many attempts to make an easy-to-use plugin, but I haven’t been impressed.

Until today. (August 21, 2006)  Check out Video Quicktags.  It’s a great WYSIWYG-editor plugin for doing video, and I highly recommend it over the following method.  Both work, but the plugin is easier.

Of course, if you want to keep reading and watch me struggle to develop the method that has allowed for WYSIWYG video usage for the last 4 months, feel free to keep reading… :-)

Beginnings

The search for a good plugin that does this without fail ended in frustration. All of the plugins I could find, and all the tutorials and help in the forums always said somewhere to add xxx code there and yyy code here, and be sure to disable the wysiwyg editor, otherwise it will strip outthe special tags that each plugin used to embed the video.

Snap

<rant> Well I don’t want to disable it! It’s there for a reason! I’m lazy! Ther, you happy? I said it. I’m lazy. I want to click the little buttons and answer the little questions. I want to make the javascript think for me. I want to be stupid! Let me be stupid! Me love buttons!</rant>

Sorry ’bout that.

Making things simple

Ok, so I had a plan, but I needed the simplest dang way of embedding the video. I wanted one tag to work with, and let some plugin worry about taking whatever was in-between my <supertags> and make the video happen. For now, I wanted to pretend WP2’s TinyMCE-based WYSIWYG Editor wasn’t going to punch my tag in the neck as soon as I clicked save. So I went and did that.

There are maybe a few dozen plugins out there that help embed video. I found one called WPvideo that would let me take a YouTube permalink (like this: http://www.youtube.com/watch?v=whGVaLoIvkw) and let me put a <video> tag around it. Then it did all the work of embedding it in a flash player. Best plugin out there? I’m not saying that. Just got the job done, for now.

TinyMCE, we need to have a talk

Now, I know your friend Wordpress 2.0, and she’s really nice. She’s letting me enter my nice code (<video>http://www.youtube.com/watch?v=whGVaLoIvkw</video>), and is waiting with my nice plugin for this code. But youkeep taking out my <video> tags. Not cool. I’m afraid we’re going to have to find a replacement for you. But you’re so irresistable!

OK, so anyway, I don’t want to modify the version of TinyMCE that comes with WordPress, because my changes will get destroyed when I update my WP install. But on the other hand, I’m a huge fan of TinyMCE and its plugin support. So I set out to find another wordpress plugin that would allow me to use my own installation of TinyMCE that I could hack to pieces and not worry about my changes getting overwritten.

My new friend

Introducing EditorMonkey. Not only does it have the TinyMCE interface I’m looking for, it also has an expanded feature set that includes a lot of optional TinyMCE features that don’t come with Wordpress. A few of my favorite additions are spell check, full screen editing and multiple-page support, but there are many others. It’s TinyMCE gone crazy, basically.

Unfortunately, this version of TinyMCE is just like the one that comes with WP when it comes to stripping tags. Except this one will do what I tell her.

(by the way, not that I want to, but this plugin supposedly also will let you switch over to FCKeditor. I couldn’t get it to work, but I don’t care.)

In addition, this plugin needs some additions to your theme’s css to make the pretty frame. Just follow the installation instructions.

Next Page

Pages: 1 2

Related: