htmlArea Works with Movable Type 3.0 - All the Pages Are My Days

htmlArea, a free program from interactivetools.com, provides a cross-platform WYSIWYG editing tool that works on both IE and mozilla/firewhatever and on windows, the Mac and linux! This forum thread has more info about the latest version. Check out the live preview.

While this tool has a lot of potential applications, my first thought was to see if I could add this capability to the standard MT 3.0 Edit Entry form. Given this is a dynamic page generated by the movabletype program I knew it would be a bit more tricky than simply setting up a static htmlArea enabled form; the static demo simply works right out of the box! Turns out that in less time than it took to write this article, I got it to work.

I figured out that I would have to edit the MT templates (something else to remember next time I upgrade; good thing I’ve noted it here!), but soon thereafter found myself stuck. Google to the rescue, of course. I learned a little from the official 3.0 docs, a little more from here, and finally, borrowing A LOT from here, I’ve been able to setup htmlArea on MT 3.

What follows is essentially an update of Outer Web’s very fine instructions for mating htmlArea and MT.
Summary of changes:

separate file for header (copy and rename)
main edits occur in header file now
English language file path changed (other langs supported now)

Details follow in the extended entry.

htmlArea/MT setup

download software
download software
upload files to the mt-static directory on your webserver
copy tmpl/cms/header.tmpl to tmpl/cms/header-edit.tmpl
edit tmpl/cms/edit_entry.tmpl to refer to header-edit.tmpl instead of header.tmpl
Add some JavaScript into the <head> element of tmpl/cms/header-edit.tmpl:

<script src="<TMPL_VAR NAME=STATIC_URI>htmlarea/htmlarea.js" language="JavaScript1.2"></script>
<script src="<TMPL_VAR NAME=STATIC_URI>htmlarea/lang/en.js" language="JavaScript1.2"></script>
<script src="<TMPL_VAR NAME=STATIC_URI>htmlarea/dialog.js" language="JavaScript1.2"></script>
<script type="text/javascript">
var editor = null;
function initEditor() {
  editor = new HTMLArea("taha");
  var cfg = editor.config;
  cfg.editorURL = "<TMPL_VAR NAME=STATIC_URI>htmlarea/";
  editor.generate();
}
</script>

Change the <body> tag into:

<body onload="initEditor()">

and finally add an id attribute to the text editing <textarea>:

<td colspan="2" width="100%" valign="top"><textarea<TMPL_IF NAME=AGENT_MOZILLA> cols=""</TMPL_IF> 
  class="width500" id="taha" name="text" rows="<TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED>10<TMPL_ELSE>30
  </TMPL_IF>" wrap="virtual"><TMPL_VAR NAME=TEXT></textarea>
</td>

(Note: for mt3 this means changing “text” to “taha”; not sure what, if anything, that breaks)
Overall, this tool seems like a welcome addition to my tool kit; thanks Alan! I used it to edit this post, and while I can type raw html fairly quickly, it’s not hard to get used to mousing certain tasks. One thing I noticed while grabbing URLs for this article is that I’m one version behind on my installation. Well, it’s always something, isn’t it? Yes … I just also realized, when I split this into a main and an extended post that the text area for the extended entry doesn’t yet benefit from htmlArea. Like I said, there’s always something, or 2 things or …

1 thought on “htmlArea Works with Movable Type 3.0”