QuickTags Part II
UPDATE: I had pulled out the functionality to check spelling with this toolbar, well I've put back the functionality. Just download the quicktags.js file that coressponds to your version of MT again and re-upload it. A new button called "Dict." will appear that will query a highlighted word to dictionary.com !
Please go to the MT 2.x instructions to fix a problem with the Quicktags not aligning properly.
This tutorial will allow you to have the Quicktags I described in my previous entry but is not restricted to MT 3.01D.
The files you will need:
Quicktags.js
The MT 2.x Version | The MT 3.x Version
Upload the quicktags js file to your staticwebpath - ie the same folder than contains your docs and images folders and styles.css.
No matter what version of MT you are running add the following to your styles.css:
.quicktags input {
background: #f4f4f4;
border: 1px solid #b2b2b2;
color: #000;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 1px;
padding: 3px;
}If you're using MT 2.x - if you're using MT 3.x skip on down:
- Find in your edit_entry.tmpl file the following
<td width="402"><font class="pagetitle"><MT_TRANS phrase="Entry Body"></font></td>
<td width="98" align="right" valign="top">
<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(\'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="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 replace it with this:
<td width="402"><font class="pagetitle"><MT_TRANS phrase="Entry Body"></font><br />
<table border="0" cellspacing="0" cellpadding="0" width="107">
<tr>
<script src="<TMPL_VAR NAME=STATIC_URI>js_quicktags.js" type="text/javascript"></script><script type="text/javascript">edToolbar();</script>
</tr>
</table>
Find in your file
name="text"and add right before itid="text"In the same line as you edited step 2, go all the way to the end and add this just before the closing </td>
<script type="text/javascript">var edCanvas = document.getElementById('text');</script>
If you're using MT 3.x follow these instructions:
- Find in your edit_entry.tmpl file the following:
<script type="text/javascript">
<!--
if (canFormat) {
with (document) {
write('<div style="float: right;">');
write('<a title="<MT_TRANS phrase="Bold">" href="#" onclick="return formatStr(document.entry_form.text, \'strong\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/bold-button.gif" alt="<MT_TRANS phrase="Bold">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Italic">" href="#" onclick="return formatStr(document.entry_form.text, \'em\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/italic-button.gif" alt="<MT_TRANS phrase="Italic">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Underline">" href="#" onclick="return formatStr(document.entry_form.text, \'u\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/underline-button.gif" alt="<MT_TRANS phrase="Underline">" width="24" height="18" border="0" /></a>');
write('<a title="<MT_TRANS phrase="Insert Link">" href="#" onclick="return insertLink(document.entry_form.text)"><img src="<TMPL_VAR NAME=STATIC_URI>images/url-button.gif" alt="<MT_TRANS phrase="Insert Link">" width="26" height="18" border="0" /></a>');
write('</div>');
}
}
// -->
</script>
and replace it with
<div class="quicktags">
<script src="<TMPL_VAR NAME=STATIC_URI>js_quicktags.js" type="text/javascript"></script><script type="text/javascript">edToolbar();</script>
</div>
- Three lines after the above add the following:
<script type="text/javascript">var edCanvas = document.getElementById('text');</script>
Make sure this is after the textarea.
33 Comments
Leave a comment
Subscribe to Movalog's Feed
Brian Finn said:
on Aug 14, 2004 3:01 PM | Reply
Might have been good to mention the template you refer to is bm_entry.tmpl
Made the changes, replaced the installation file and....nothing!
Now I have the fun of putting it all back the way it was.
Arvind Satyanarayan said:
on Aug 14, 2004 3:05 PM | Reply
Brian I do not understand what you are talking about, I edited the edit_entry.tmpl file as I said above and the quicktags are showing as they are meant to !
Brian Finn said:
on Aug 14, 2004 3:25 PM | Reply
Your page did not mention it is part of the edit_entry.tmpl file at the time. Now it does so why is the text to replace not in there?.
Arvind Satyanarayan said:
on Aug 14, 2004 3:27 PM | Reply
The text is there, please do search ! The text in the tutorial will not be formatted exactly as the tmpl file so you will need to look a little harder ! What version of MT are you using perhaps it would just be easier if I emailed you the file !
Brian Finn said:
on Aug 14, 2004 3:31 PM | Reply
version 3.1 which I understand is a patched version of 3.0d
Arvind Satyanarayan said:
on Aug 14, 2004 3:32 PM | Reply
Then download the previous file in my previous entry http://www.movalog.com/archives/hacks/quicktags.php the tmpl file is uploaded to MTDIR/tmpl/cms/ in ascii mode and you'll need the js file for MT 3.x !
Mariann said:
on Aug 14, 2004 4:45 PM | Reply
This hack works great, even in Safari... except for one nagging detail. My quicktags align to the right and widen the table so much that there's a horizontal scroll bar. Any ideas how I can fix this?
Arvind Satyanarayan said:
on Aug 14, 2004 4:47 PM | Reply
Hi Mariann, what version of MT are you using, is it possible you could take a screenshot and email it to me at arvind_2111 | at | yahoo.com !
Mariann said:
on Aug 14, 2004 5:54 PM | Reply
Arvind, thanks for helping me out with this alignment quirk. The updated template works perfectly! :)
Arvind Satyanarayan said:
on Aug 14, 2004 5:55 PM | Reply
No problem Mariann, I'm glad we got it to work in the end ! I hadn't noticed that alignment problem in Firefox !
Thomas said:
on Aug 15, 2004 12:40 AM | Reply
Great! I tried it, and it works. Nice!
marza said:
on Aug 15, 2004 12:59 AM | Reply
I managed to include the Quicktags succesfuly on a site that uses MT 2.64, but not on another one, that uses 2.6.6.1, where the tags do show up, but clicking them doesn't trigger the inclusion of tags. I do get popups for links and images, but these are not inserted in the Entry Body. Any idea what might cause this?
Arvind Satyanarayan said:
on Aug 15, 2004 6:25 AM | Reply
Hi Marza if it works properly on 2.64 then it will on 2.661, you say that the toolbar is there but the tags aren't being inserted ? That means that this line is not present, please make sure it is !
Marza said:
on Aug 16, 2004 7:15 AM | Reply
Alas, Arvind, I checked and that is not the problem. Since clicking the link and img button does result in a popup window (I can even enter an alt-text for images), it seems as if the script doesn't 'know' where to insert the tags. Maybe the id=text should be inserted elswhere?
Thanks for your help.
Marza said:
on Aug 16, 2004 8:51 AM | Reply
Well, turns out it was all my own fault, as I was so anxious to get it to work, I omitted a quote mark from the id="text". Thanks Arvind for finding the solution!
Jerry said:
on Aug 17, 2004 12:02 AM | Reply
Arvind, My little problem is when I do a preview, I see nothing execpt the title of the entry. I am using MT 2.661 and Firefox 0.9.3
My one question is about the statement:
Find in your file name="text" and add right before it id="text In the orginal tmpl it is name="text", is the change to id="text" right.
If I save the entry without preview it is still blank.
Arvind Satyanarayan said:
on Aug 17, 2004 4:29 PM | Reply
I'm sorry Jerry, I don't understand what problem you are experiencing ! There was a typo above with the id="text" bit which I've corrected sorry !
Jerry said:
on Aug 17, 2004 8:58 PM | Reply
Arvid, I did not read the line about adding id="text" correctly. I had removed name="text" and replaced it with id="text".
All is working fine now... Thanks for creating this hack, makes posting a lot easier.
Alex said:
on Aug 18, 2004 1:10 AM | Reply
FYI, the QuickTags are now LGPLG'ed.
Bruce said:
on Aug 19, 2004 7:50 PM | Reply
Arvind, thanks for this! I was really wondering how to get the buttons to appear in Firefox. This helped a ton!
andy said:
on Aug 30, 2004 10:34 AM | Reply
Arvind,
I'm using 2.5 and have added the Quicktags hack. Am seeing nothing in IE or Firefox. Have been through your instructions and can't see where I've gone wrong
andy said:
on Aug 30, 2004 11:20 AM | Reply
Fixed it. Duh!!
ChrisHenry said:
on Nov 7, 2004 1:09 AM | Reply
Sweet hack!
One question though... In Safari, when I hit any of the tag buttons, the new tag text is placed at the end of the entry instead of at the current cursor location. Is this a limitation of the script or of safari?
Many thanks, -Chris
Arvind Satyanarayan said:
on Nov 7, 2004 6:43 AM | Reply
It works fine in Firefox, Mozilla and Internet Explorer so it must be a limitation with Safari, I'm sorry!
Ed said:
on Nov 11, 2004 4:34 AM | Reply
I must have done something wrong. No buttons have changed for me. Do I need to change permissions for either of the uploaded files?
Cleo said:
on Nov 16, 2004 12:01 PM | Reply
The latest version of MT's rditentry.tmpl has two javascript sections which look significantly different then the example you have posted. I can imagine that most people trying to implement your quicktags would be just as frightenede to make any changes for fear of unknowingly breaking something. I sent an email to your yahoo address with the new editentry.tmpl. I hope you can take a look at it and figure out what I need to substitute. Thanks again for these wonderful additions!
Arvind Satyanarayan said:
on Nov 16, 2004 12:11 PM | Reply
You're using MT 3.12. An updated tutorial shows how to implement quicktags for MT 3.12. This tutorial is for versions previous to 3.12 as 3.12 acquired very nice graphics that I wished to keep.
I suggest you use that tutorial instead of this one for 3.12
Cleo said:
on Nov 17, 2004 2:13 AM | Reply
Hey. Thanks Arvind. I shouldve looked a little harder ;s
Beth said:
on Jan 14, 2005 5:03 AM | Reply
Hi - I used this tutorial successfully for version 3.14 - but my question now is what would be the script to insert these buttons into the comment section of my individual archive? Thank you!
Beth said:
on Jan 18, 2005 5:23 AM | Reply
hmm... I tried using your script in the comment section of this page... but it doesn't seem to wanna work for me. The buttons show up just like they are suppose to, but unfortunately nothing happens when I click on them. They work fine in "create new entry" - so, you must have had to add additional script for it to work in both areas. Do you mind posting what you did? That would be fantastic and much appreciated! :) Thank you!!!!
sooyin said:
on Aug 5, 2005 12:17 PM | Reply
Thanks very much for this hack! Instructions are clear and easy-to-follow...even for a semi IT-illiterate person like yours truly...=)
Nezua said:
on Dec 23, 2006 9:53 PM | Reply
Arvind, your site is such a valuable resource for us MT users. I really want to implement a few things you have, but I'm using MT 3.33 and your Javascript code that I am to look for and replace is different than what you have noted.
So before I go ahead (even on my testing blog), can you tell me if you see any problems with my using this hack/script?
--
also: can I find somewhere on your site a way to implement this "live preview" for commenters? I don't mean the plugin you made. I mean what I see right now to the right of this textbox as I type.
Thanks so much.
Architectural Renderings said:
on Sep 17, 2007 6:38 PM | Reply
Wow, good find.