Giving Movable Type WYSIWYG Editing
If you use Movable Type, you've probably gotten used to the bare-bones text entry field. And you're probably used to entering raw HTML tags into your blog posts. Kinda sucky, no?
Or, possibly, you've gotten used to paying for enhancements. There are ways to pretty up the text entry fields, they just cost money. But I'm going to show you how to get a free GUI for WYSIWYG editing. Yes, this will make blogging with Movable Type a lot more like typing out a nicely formatted Word document. No arcane tags to learn.
Here is a small screenshot of what you'll have when the project is done. You can click it for a larger version, if you're curious.
Yes, you can work with images right in the text entry field. That's how I added the screenshot. Adding italics or other formatting involves no tags for you, just buttons. Ready to modify your Movable Type system? Let's do it!
First step, you'll need to backup your Movable Type installation. To save space and be quick about it, you really only need to backup the tmpl directory. But of course, I suggest you be safe and back up everything.
The next step is to download the FCK Editor. It's a free (GPL) product that enhances text fields, giving them all the buttons you'll need to create a robust editing system. Once downloaded, unzip it, and open the fckeditor.js file. It's in the FCK Editor directory. Find this line:
this.Height = height || '200' ;
...and change 200 to 500. The buttons will take up 200 pixels alone, so you'll need to increase the height to give yourself room to type. Save the changes, and move the entire directory to your Web server. The directory should be named fckeditor, so rename it if needed. I suggest putting it at the top level of your site. My patch assumes that. If you know what you're doing, you can name it differently, but then you'll need to change my patch file so that all references to /fckeditor/ are changed accordingly.
Third step. If you're using Windows, download the GNU patch utility. Note that if your Web site is hosted on a Linux server and you have command-line access, you don't need to download the patch utility. Your Linux server will have the patch utility already. If you will be doing the patching on your Windows box, you should get that utility installed now.
Also, you need to get the patching system and your Movable Type directory onto the same machine. So get your Movable Type files onto your local machine or the Web server, wherever the patch utility is.
The next step is to download my patch file. As it is a plain text file, it probably will just display in the browser when you select the link. If so, you can use your browser's File menu to save it. Once you have it, put it in your Movable Type directory. That's where the action will happen.
OK? Now, you need to get the command line open. If you're using Linux, I assume you know how to get the shell prompt. If you're going to use Windows XP for the changes, try Start -> All Programs -> Accessories -> Command Prompt. Once you have the prompt ready, cd into the Movable Type directory. On Windows, this might look like this:
cd C:\Documents and Settings\Owner\My Documents\web\mt
...of course the path to your Movable Type directory is probably different. That's fine. Enter it in. You can right-click on your Movable Type directory and select Properties to get most of the path, although you'll need to append the name of your Movable Type directory.
Once you're there, you should enter this command:
patch -cl -d tmpl -p1 < wysiwyg_editor.txt
On Linux, that should be it. On Windows, you may get an error that "patch" doesn't exist. That's OK. Simply use the full path to the patch program, like this:
"C:\Program Files\GnuWin32\bin\patch.exe" -cl -d tmpl -p1 < wysiwyg_editor.txt
If you do it right, you'll end up with a notice about 2 files being modified, and then you'll be returned to the command prompt. Similar to this:
You're done at this point. Your files are changed. View your Movable Type Web site, and try adding an entry. You should have a nice GUI editor. Note that it will probably take a moment to load up.
There is a chance while running the patch that you'll get a message stating that a "hunk" failed. If that's the case, you have two choices. First, you can inspect the "hunk failed" message to see which code was not modified, and then make the modifications yourself. This only works if you understand the patch file syntax. So the second choice is to restore from backup and badger me for another release that addresses your issue. Restoring from backup should be easy, as the only 2 files that need to be restored are the two in the screenshot above (header.tmpl and edit_entry.tmpl).
The other dilemma you may find is after running the patch, you may get a message stating that the file or target wasn't found. You may even be prompted for the file. If so, just press enter to get past the request for the file (press enter repeatedly if necessary). Then, take a look at where you put everything. The wysiwyg_editor.txt file should be IN the Movable Type directory. At the command prompt (or shell), you should be IN the Movable Type directory, too. You can tell if you are by typing dir (Windows) or ls (Linux) at the prompt. If you see wysiwyg_editor.txt and mt-config.cgi, then you are in the right place. If not, get into the right place. Once you have everything where it should be, try running the patch again.