WordPress Hacks: Adding TinyMCE Editor to the Prologue Theme

[UPDATED: Please see my first comment before reading.]

In 48 Unique Ways to Use WordPress, the Prologue WP theme figured very significantly in the examples. Prologue, if you’re not familiar with it, gives WordPress users (both wordpress.com and self-hosted) Twitter-like microbloggging functionality. But out of the box, the theme has a very plain edit area (see image below), and adding links, images, etc., is tedious.

http://www.freediagrams.net/pix/performancing/prologue-add-tinymce/snap-filmscenic-no-tinymce-700w.jpg

Fortunately, there’s a really easy fix to this problem: TinyMCE editor. TinyMCE is a Javascript-based freeware editor. If you have a recent version of WordPress, it’s the default “visual” editor that you get in the admin panel. Thanks to its easy integration features, we can use this as a replacement to the default HTML message editor in the Prologue theme. And you won’t believe how incredibly easy it is to hack it. I think it took me about 2 minutes, not including download and installation. I’m actually surprised that Automattic didn’t do it themselves.

How to Install TinyMCE

Installing TinyMCE takes three simple steps:

  1. Download the TinyMCE .zip from Moxiecode. (There is also a .gz file, if that suits you better.)
  2. Unzip the .ZIP file. You’ll get a directory called tinymce/.
  3. Upload this directory pretty much anywhere you want on your web server. I used the root. So as an example, I now have the directory http://filmscenic.com/tinymce/ on my FilmScenic site. Below that is the scripts/ directory, where the important code lives.

How to Hack the Prologue Theme to Use TinyMCE

It’s really quite easy to hack your Prologue WP theme installation to incorporate the TinyMCE editor on the home page of your site.

  1. Insert two lines of “script” code into your Prologue header.php file, just above the </head> tag:

    <script language=”javascript” type=”text/javascript” src=”/tinymce/jscripts/tiny_mce/tiny_mce.js”></script>
    <script language=”javascript” type=”text/javascript”>
    tinyMCE.init({
        mode : “textareas”
    });
    </script>

  2. Change the src parameter’s URL value to point to the right path. In the code above, I’ve already changed the URL to be relative to the server root.

If you don’t feel comfortable doing this, just download this copy of the header.php file (for Prologue theme), change the extension from .phps to .php, and replace the original in your Prologue theme directory. That’s it, you’re done. Please note that this header.php uses the “Advanced” mode TinyMCE editor, as discussed somewhere below.

How to Use TinyMCE From Your Prologue-Based WordPress Blog

Believe it or not, that’s it. TinyMCE should work now. Refresh your Prologue site’s home page in your browser. If necesary, use F5 in Windows, or the equivalent for other systems, to do a “hard refresh”. You should see the simple default editor, as shown in the screenshot below.

http://www.freediagrams.net/pix/performancing/prologue-add-tinymce/snap-filmscenic-basic-tinymce-700w.jpg

How to Enable the Advanced Features of TinyMCE

Of course, you’ve probably seen all the great extra features of TinyMCE from within your WordPress admin panel’s editor page. You can get the same features and more for your Prologue site. The simple editor form that you’ll get from the steps above doesn’t even have a way to add a hyperlink to text, so that’s the least you’d want. Here’s how to activate the extra features.

Modify the code snippet within one of the script lines, as indicated in this Advanced Theme example.

tinyMCE.init({
    mode : “textareas”,
    theme : “advanced”
});

You’ll get something like the screenshot below:

http://www.freediagrams.net/pix/performancing/prologue-add-tinymce/snap-filmscenic-advanced-tinymce-700w.jpg

If you need even more advanced features, there are additional examples accessible from the drop-down menu at the top right of the Moxiecode TinyMCE example page. I’ve used the “All buttons and plugins” mode at Filmscenic.com, as seen in the screenshot below. It probably has far more features than necessary, but I can always tone it down if there are too many options. In fact, if you study the Javascript code snippet for one of the more advanced modes, you’ll see that there are a number of TinyMCE “plugins” enabled. Just start removing plugin names and play around until you have the configuration you want. (Or you could actually read the TinyMCE wiki.)

http://www.freediagrams.net/pix/performancing/prologue-add-tinymce/snap-filmscenic-all-buttons-tinymce-700w.jpg

Caveats

Some of the advanced TinyMCE modes take up more space horizontally than the Prologue theme is set up for. This may cause problems in browsers other than Firefox (the only one I use for development and blogging, but not for browsing). The edit area is sizable, thanks to the grippy in the bottom right corner, but you cannot make the editor less wide. So you’ll have to tweak your Prologue installation’s stylesheet(s) to fix the width of the blue background area – provided you don’t like the appearance. On the other hand, since only registered authors will ever see the editor area, it might not be a big deal.

Note

If you do any film blogging and want an account on Filmscenic, to build links to your site(s) or to that of friends, please drop me a Perf PM with your full name and other details (desired WP username, email address, site URL).

Comments

  1. One more serious caveat:

    Shortly after I posted this article, the TinyMCE editor in the “all buttons” and “advanced” modes stopped functioning properly in both version 1.5x and 2.0x of Firefox. When I try to type in the message tags, the edit area refreshes and gets rid of any text typed in.

    This is of course a huge disappointment because they were working. I’ll have to explore this problem in the morning, after I’ve had some sleep.

  2. Update: Actually, I tested without TinyMCE code and the problem seems to be with Prologue for some reason.

  3. Problem solved:

    When you tweak the Prologue header.php file, you must specify an absolute path to the main JS script. For example, the sample header.php file that I’ve linked to uses




    However, the src value, for my site, must be set as http://filmscenic.com/tinymce/jscripts/tiny_mce/tiny_mce.js

    not as /tinymce/jscripts/tiny_mce/tiny_mce.js

    So you need to ensure that you do something similar, regardless of where you install the tinymce/ folder on your web server.

  4. I have also some little problems witz TinyMCE…

  5. Raj Dash says:

    Willi: Do you want to elaborate?

  6. spartacus says:

    Hi

    Great hack…I notice there is a brief hang in Firefox when the page loads. In the postbox area I also see “<p><br mce_bogus=”1″></p>” for a second before disappearing. Might this cause it?

    Thx

  7. Raj Dash says:

    Spartacus: Ah, never noticed. Thanks for the tip. I’ll look into it. The solution actually works as is in IE 7.0, but nothing else. It worked temporarily in FF 1.5x and FF 2.0x. However, the comment form on each permalink page works. So there’s some small bug that needs to be fixed and it’ll all work fine.

  8. Raj Dash says:

    I found that “bogus” bit but it’s part of the MCE javascript code. So it must be applied to both the home page and to permalink pages. So if one location works and the other doesn’t, there has to be some other problem I’ve overlooked.

  9. Spartacus says:

    Raj

    Any luck with the ‘bogus’ piece? I’m still seeing it on my end.

    Thx

  10. Raj Dash says:

    Spartacus: No. I posted in the TinyMCE forums and got no response. I searched there and found nothing useful. I’ve given up on this line, but I am playing with an alternative solution that uses jQuery. If I manage it, it’ll probably appear over at Nettuts.com. Coding articles are not well received at Performancing.

  11. great information..I have a question…can I add embedding video plugin icon into the editör? help will be appreciated…regards

  12. New Version of Prologue ist out, called “P2″ – tried to implement the TinyMCE with your instructions (again – worked fine with the old version “prologue), but it seems to interfere with the new shortcuts or so :/ Can’t get it working – any known workarounds? Thanks for your Tips so far :)

  13. @Levent: Why not use the “Code” fuction?

Speak Your Mind

*

Current ye@r *