Nintendo Wii forums Forum for writers phpBB mods Essays on copyright Dating advice Narnia forums

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.

Screenshot of WYSIWYG editor.

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!

The steps

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:

Screenshot of command prompt.

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.

Problems?

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.

Navigate

« GreaseMonkey script for Digg friends stuff | Main | My wife's site is online! »

Nav by tag: movable_type
Main | MTOS has a licensing problem, right out of the gate! »
Nav by tag: tech
« GreaseMonkey script for Digg friends stuff | Main | Fixing the City of Palo Alto site »
Bookmark It! Technorati del.icio.us Netvouz DZone ThisNext Wists blinkbits BlinkList blogmarks blogtercimlap Blue Dot Bumpzee co.mments connotea DotNetKicks Fark feedmelinks Fleck Furl Gwar Haohao Hemidemi IndiaGram IndianPad Internetmedia kick.ie LinkaGoGo Linkter Ma.gnolia MyShare Netscape NewsVine PlugIM PopCurrent ppnow RawSugar Reddit Shadows Simpy Slashdot Smarking Spurl Webride YahooMyWeb
TrackBack

TrackBack URL for this entry:
http://www.outshine.com/cgi-bin/outshine/trackback.cgi/24

Comments (16)
yotixon writes:

Hi all!

Thanks for the ifnormation you provide. It's great to see an agency site with usefull information. The site is not bad either.


This Article Really Help ME thanks


Tony writes:

You're welcome. :)


Starly Jackson writes:

With already many different ways to edit Movable Type templates, does the GoLive + Movable Type template editing make any sense? For
Regardless of your take of the visual WYSIWYG paradigm, the Movable Type integration into GoLive is a welcome addition For it:
We may never know the answer, but with GoLive giving way to Dreamweaver it will be interested to see if this feature gets included if at all in the next version of Dreamweaver


Mystery Calling writes:

Great website. Very helpful. Thank you.


That information is really helpful. Great that you posted it. kepp up this great content. Thanks


Kill Bed Bugs writes:

Resources like the one you mentioned here will be very useful to me! I will post a link to this page on my blog. I am sure my visitors will find that very useful.


Sinus Symptoms writes:

I dont even remember how i reached your site but it doesnt matter, cause i’m so happy i found it, it really made me think, keep up the good work.


Thanks for sharing such great info. Though the tutorial is simple (and that's the beauty about it), the effort is much appreciated.


The rss feed does not show in my browser IE5 how can I repair


StemeKege writes:

I just book marked your blog on Digg and StumbleUpon.I enjoy reading your commentaries.


omron pedometer writes:

Very useful,thanks for sharing keep on going another one.You have gained a new reader.Thanks for the info! Very help full for someone like me.


Thanks for the step by step guide. Appreciate your effort in helping us.


fejsart025 writes:

Hello everybody, how do you do
My name's Pigeon Johnny
LA symph's the company
I remember what you're opinion
Who is this dumb-bell
My name's Pigeon Johnny
I type the ladies drool
Not as a matter of fact but it sounds self-control conceding that


sdfsdgfd writes:

I find myself coming to your blog more and more often to the point where my visits are almost daily now!


Post a comment

Verification (needed to reduce spam):