[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.
How to Install TinyMCE
Installing TinyMCE takes three simple steps:
- Download the TinyMCE .zip from Moxiecode. (There is also a .gz file, if that suits you better.)
- Unzip the .ZIP file. You’ll get a directory called tinymce/.
- 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.
- Insert two lines of “script” code into your Prologue header.php file, just above the </head> tag:
mode : “textareas”
- 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.
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.
mode : “textareas”,
theme : “advanced”
You’ll get something like the screenshot below:
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.
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).
@Levent: Why not use the “Code” fuction?
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 🙂
great information..I have a question…can I add embedding video plugin icon into the editör? help will be appreciated…regards
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.
Any luck with the ‘bogus’ piece? I’m still seeing it on my end.
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.
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?
Willi: Do you want to elaborate?
I have also some little problems witz TinyMCE…
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.
Update: Actually, I tested without TinyMCE code and the problem seems to be with Prologue for some reason.
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.