April 03, 2003
Buttons in MT editor
I'm in the process of integrating a better text editor into MovableType's templates. But in the interim I've found a very simple way to add one or two buttons that really help.
First you'll want to get two picture files I've created. One is for a blockquote button and the other for a paragraph. They're available online in my images directory or from here: 
and 
.
Save them into the same place as your other MT icons images. This location is within the StaticWebPath/images/ directory of your MT installation. If you're not sure, root around your MT web server install and find the file 'bold-button-gif' and save these two with it.
Now that the images are available you'll need to edit your templates. I've only edited two templates, the main entry and the bookmarklet entry forms. There may well be others suitable for similar editing but this is enough for me.
IMPORTANT NOTE: my edited templates are for MovableType version 2.63. If you're not using MT 2.63 then DO NOT simply drop in my edited templates. Open you own template files, find the section and add the lines. Upgrading MT is very easy and was absolutely smooth. Seriously look at upgrading if you're not using the latest version.
You'll need to first edit the edit_entry.tmpl file. My already edited version can be found here. What you want to do is find this section: (Note: these are really wide lines of text. You might want to copy/paste them into a text editor in order to avoid line wrapping shenanigans.)
<script language="javascript">
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0" width="107">');
document.write('<tr>');
document.write('<td width="24"><a href="javascript:formatStr(\'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/blockquote-button.gif" alt="blockquote" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'b\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'i\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="italic" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/underline-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'p\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/p-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
document.write('<td width="26"><a href="javascript:insertLink()"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="link" width="26" height="18" border="0"></a></td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write(' ');
}
</script>
And add these two lines:
<script language="javascript">
if (document.selection) {
document.write('<table border="0" cellspacing="0" cellpadding="0" width="107">');
document.write('<tr>');
document.write('<td width="24"><a href="javascript:formatStr(\'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/blockquote-button.gif" alt="blockquote" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'b\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="bold" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'i\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="italic" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/underline-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
document.write('<td width="24"><a href="javascript:formatStr(\'p\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/p-button.gif" alt="underline" width="24" height="18" border="0"></a></td>');
document.write('<td width="26"><a href="javascript:insertLink()"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="link" width="26" height="18" border="0"></a></td>');
document.write('</tr>');
document.write('</table>');
} else {
document.write(' ');
}
</script>
Now go open the bm_entry.tmpl file, find the same section and add the same two lines. My already edited version can be found here.
What this does is add two buttons, one for BL (blockquote) and P (paragraph). I find it very handy to have these when doing any sort of complex editing. The P button is especially useful when I have to turn off MT's convert line breaks function.
Give this a try and let me know if it works for you. Meanwhile, I'll keep plugging way on a better editor... stay tuned.
