HTMLArea
For a few months, I had deliberated adding a WYSIWYG Editor into the Movable Type entry screen and when Typepad implemented an editor into its interface I got jealous. So, here's a way to implement the very powerful HTMLArea into Movable Type (currently only Internet Explorer, Mozilla browsers and other Gecko based browsers supported)
- Download HTMLArea 3.0 rc-1 and upzip it
- Upload the files to a folder called htmlarea in your StaticWebPath
Open up tmpl/cms/header.tmpl and add the following in <head>...</head> tags
<script type="text/javascript"> _editor_url = "<TMPL_VAR NAME=STATIC_URI>htmlarea/"; _editor_lang = "en"; </script> <script type="text/javascript" src="<TMPL_VAR NAME=STATIC_URI>htmlarea/htmlarea.js"></script> <script type="text/javascript"> HTMLArea.loadPlugin("SpellChecker"); function initDocument() { var editor1 = new HTMLArea("text"); editor1.registerPlugin(SpellChecker); editor1.config.pageStyle = "@import url(custom.css);"; editor1.generate(); var editor2 = new HTMLArea("text_more"); editor2.registerPlugin(SpellChecker); editor2.config.pageStyle = "@import url(custom.css);"; setTimeout(function() { editor2.generate(); }, 500); }; </script>
Next replace the <body> tag with
<body onload="initDocument()">
- Save this file as header_htmlarea.tmpl and upload it to MTDIR/tmpl/cms
- Open tmpl/cms/edit_entry.tmpl and search for
<TMPL_INCLUDE NAME="header.tmpl">
and replace it with
<TMPL_INCLUDE NAME="header_htmlarea.tmpl">
Finally delete the old quicktags (depending on what quicktags you are using) the two areas you are looking for begin
<script type="text/javascript">
<!--
if (canFormat) {
with (document) {
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.
Save edit_entry.tmpl and upload it to MTDIR/tmpl/cms
Download this css to make HTMLArea fit in more with the entry screen and upload it to your htmlarea/ directory
And you're done!
27 Comments
Leave a comment
Subscribe to Movalog's Feed
Callum Mcleod said:
on Nov 9, 2004 12:09 AM | Reply
This is exactly what I have been looking for. I am implementing a MT powered site for my work, and the people who will use it are not very good with HTML, so a WYSIWYG editor is brilliant!
Thanks!!
Dan Wolfgang said:
on Nov 9, 2004 10:34 PM | Reply
I stopped using HTMLArea a few months ago. It was easy to use--which was especially nice for my wife who doesn't have interest in learning HTML--but boy, did it make sloppy code! Is it any better now?
lavonne said:
on Nov 20, 2004 4:42 PM | Reply
dang. i can't get it to work. dang.
soy said:
on Nov 22, 2004 8:55 AM | Reply
Greeting :) Greately appriciated with your excelent documention on HTMLArea on MT3. I got it running on my server but got a question on how to fit HTMLArea in more with the entry screen. I see there are two entry in "custom.css" on header_htmlarea.tmpl but is this for the htmlarea.css on step 7 of your procedure? I have tried it and nothing has effect......
Thank you in advance and best regards, soy
gtcaz said:
on Dec 5, 2004 11:26 PM | Reply
You might also want to look at FCKeditor.
It's open source, and their home page has a nifty demo so you can try it out.
wolverine said:
on Dec 6, 2004 7:56 PM | Reply
Cheers! :-)
Tom Keating said:
on Feb 3, 2005 3:19 AM | Reply
I'm having great difficulty getting htmlarea to work with MT 2.661. The wysiwg editor never displays. I know your instructions above are for MT 3.0, but figured you might know the answer.
I found some older instructions here (which should work with mt 2.661) http://www.movabletype.org/support/?act=ST&f=14&t=14673 but it doesn't seem to work.
I know I have the correct path, since I am explicitly specifying the path. I also tested the htmlarea samples which work fine in the blog.tmcnet.com/htmlarea/ path.
Any chance you could see if anything is obvious in my edit_entry.tpl file?
Hmmm. your "code" tag isn't working, so I can't past my code - changed to gobblygook. Guess I will put my edit_entry.tpl file here if you want to download and look at it:
http://blog.tmcnet.com/edit_entry.txt (renamed to .txt so you can open it in an editor - Right-click, Save As)
Tom Keating said:
on Feb 3, 2005 11:14 PM | Reply
Nevermind, I got it to work now.
Is there a way to look at the HTML source code itself before publishing?
HTMLAREA adds some extraneous code I'd like to trim or just do some hand editing. Can't seem to figure out how to get at the source code without disabling HTMLAREA entirely from editentrytmpl.
Elissa said:
on Feb 17, 2005 9:46 PM | Reply
Thank you so much! This is exactly what my manager wanted. Easy, straightforward install. However, I cannot get the TableOperations plugin to work. Please help!
Elissa said:
on Feb 17, 2005 10:39 PM | Reply
Hi! I just got it to work but the edit entry body box became much smaller. Is there a safe way to increase the size for the textarea named "text"?
wsmi said:
on Mar 1, 2005 7:07 PM | Reply
I have installed HTMLArea editor . If I have entered data in the textarea via the HTMLArea editor , how do I actually save the data ? That is , publish or store the output html code ?
Mecandes said:
on Mar 15, 2005 7:11 PM | Reply
I'm having trouble with HTMLArea in Movable Type with regards to the Movable Type-generated RSS feeds. HTMLArea creates code that looks like this:
<h1>Heading</h1><p>First paragraph.</p><p>Second paragraph.</p>
When the HTML is stripped for an RSS feed, it comes out like this:
HeadingFirst paragraph.Second paragraph.
Is there any way to hack HTMLArea — or Movable Type — to get it to insert spaces when it strips out these tags?
Carla said:
on Mar 28, 2005 6:36 AM | Reply
Hi, I've implemented the hack. I seem to have a problem with spell checking. I'm returned this error when I clicked the spellchecker button.
The requested page could not be found. Page not found - /mt-static/htmlarea/plugins/SpellChecker/spell-check-logic.cgi
I've checked the file to be sure the permissions are correctly set and they are. Any ideas?
Dane said:
on Apr 25, 2005 11:51 AM | Reply
Ths's sort of funny, I wrote a how-to in May, 7 months before this came out. Here: http://www.danegardner.com/blog/archives/000042.html
ReneeZara said:
on May 20, 2005 11:58 PM | Reply
Hi, I've been able to install the hack and it works great. I was wondering if you would be able to modify it to include smileys. I'm using Brad Choate's MTMacros plugin and have many many smileys. Because of this, I wouldn't want the smileys to all be displayed in the HTMLArea, but I would like the area to have a link that opens a popup window where my smileys are listed. Then, when I'd click on a smiley, its code would appear in the box where I'm writing my new entry. Would something like this be possible? Thanks :)
ReneeZara said:
on May 26, 2005 4:17 AM | Reply
Another question.... Since I've been using HTML Area, I always get "Continue reading this entry" in my blog, even though I never wrote an extended entry. Is there a way to get rid of this?
Marcus said:
on May 31, 2005 12:59 PM | Reply
Awesome, although i fear it will delay the my enevitable transition into the world of html, css, etc. Oh, and the style sheet d/l is down...
Nathan Newman said:
on Jun 1, 2005 5:20 AM | Reply
Arvind-- I installed the HTMLarea hack and it works fine on new entries, but old entries lose the previous spacing, as if the "convert line breaks" functions is turned off.
Is there something I missed in setting things up?
glascow said:
on Aug 22, 2005 3:41 AM | Reply
Works fine, except: Spell Check does not work (Internal Server Error) Enlage Editor button does not work (error on page message at bottom)
freecia said:
on Aug 27, 2005 6:07 AM | Reply
This does exactly what it advertises, but I can't seem to get it to work with mt-textile. Are you aware of any conflicts? I'm not familiar with htmlarea, but I think there is a conflict between using textile and htmlarea.
thanks. -f
Dakiny said:
on Sep 3, 2005 1:17 AM | Reply
Gratitude and respect are offered to the author of HTMLArea which made great software.
Dakiny said:
on Sep 3, 2005 2:50 AM | Reply
How do you do. It is Dakiny which lives in Japan. The great software which you made got HTML fortunate used. Thank you. It is waiting also for the appearance of the version which can be used by Movable Type 3.2 to pleasure.
glascow said:
on Jan 15, 2006 11:52 PM | Reply
I upgraded to MT 3.2 and it does not seem to work. Entry title is created, but not enrty or extended entry. Help?
Mukund said:
on Feb 26, 2006 12:20 AM | Reply
Unfortunately, after installing this editor, I'm unable to save any changes to my entries or change the size of my editing window. I have no idea what's wrong.
Gatton said:
on May 1, 2006 10:54 PM | Reply
So.... does this or does it not work in MT 3.2? I installed it and I see nothing.
Motivation said:
on Sep 4, 2006 1:45 AM | Reply
This does exactly what it advertises, but I can't seem to get it to work with mt-textile. Are you aware of any conflicts? I'm not familiar with htmlarea, but I think there is a conflict between using textile and htmlarea.
bnkicxyw gijfkyqc said:
on Nov 6, 2008 6:18 AM | Reply
mkyphb fswukpq rewpyx szxqd fcdty gctajire usiekw