When researching possible solutions for inline editing for a customer project, I stumbled onto HTMLArea, which is a WYSIWYG <textarea> replacement released under a BSD-ish license by the cool folks of InteractiveTools.com. The stable 2.03 version runs under IE5.5+ on Windoze only, but the new version, developed by Mihai Bazon (or Mishoo), funded by IT.com, runs under Mozilla 1.3, too. He claims it to be running under all OSes, but from a quick test by Bruno, it doesn't run under Linux.
Either case, I'm very happy with this inline WYSIWYG thingie, and I immediately ventured into integrating it with MovableType. Despite my severe Javascript brain damage, it was actually quite easy.
- CVS-export an uptodate copy of HTMLArea from the Sourceforge project
- Upload files to the mt-static directory of my webserver
- Adding some JavaScript into the <head> element of tmpl/cms/edit_entry.tmpl:
<script src="<TMPL_VAR NAME=STATIC_URI>htmlarea/htmlarea.js" language="JavaScript1.2"></script>
<script src="<TMPL_VAR NAME=STATIC_URI>htmlarea/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>
- Changing the <body> tag into:
<body onload="initEditor()">
- and finally adding 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>
The HTML output is reasonably clean, if not XHTML of course. Caveat: Tom already reports the editor doesn't work under Moz 1.4b. Since his blog is running on the same MT instance as mine, he's an involuntary test guinea pig. But he can cope with that. ;-)
Update: the obligatory screenshot:
Check out Midas too
http://www.mozilla.org/editor/midasdemo/
The solution for Mozilla is a native XUL implementation. I want to hack together a XUL weblog post mechanism with full integration for Mozilla composer as soon as the echo stuff slows down.
Kevin