Quicktags with 3.12
UPDATE: Make your own
With Movable Type 3.12, Six Apart built in a more powerful set of quicktags and on the whole they worked pretty well and looked quite nice too. I didn't really want to go back to the clunky Quicktags of before. So here are a few hacks to port some of the most useful features (in my opinion) from the old quicktags, to the new. You will need the following files
- edit_entry.tmpl, this is found in MTDIR/tmpl/cms
- mt.js, this is found in your StaticWebPath (or if you have none in your root MTDIR folder)
I have decided to port over four functions, Spell Check, Encoding HTML and Insert Image
Add the following to the end of your mt.js file
function Spell(myField) {
var word = '';
if (document.selection) {
myField.focus();
var sel = document.selection.createRange();
if (sel.text.length > 0) {
word = sel.text;
}
}
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
if (startPos != endPos) {
word = myField.value.substring(startPos, endPos);
}
}
if (word == '') {
word = prompt('Enter a word to look up:', '');
}
if (word != '') {
window.open('http://dictionary.reference.com/search?q=' + escape(word));
}
}
In your edit_entry.tmpl file find
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
and add right after it
write('<a title="Spell Check" href="javascript:Spell(document.entry_form.text)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/html-abc.gif" alt="Spell Check" width="22" height="16" /></a>');
This will add the button to use with the Entry Body field. To add it for the Extended Entry field, in your edit_entry.tmpl file find
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
and add right after it
write('<a title="Spell Check" href="javascript:Spell(document.entry_form.text_more)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/html-abc.gif" alt="Spell Check" width="22" height="16" /></a>');
Finally, you will need to download this image and upload it into the images directory, obviously if you don't like the image you can make your own.
This actually makes use of ScriptyGoddess' Encode HTML Javascript
Add the following to the end of your mt.js file
function decodeIt(textfield) {
strSelection = ""
if (document.selection) {
strSelection = document.selection.createRange().text;
strSelection = strSelection.replace(new RegExp("<","g"), "<");
strSelection = strSelection.replace(new RegExp(">","g"), ">");
document.selection.createRange().text = strSelection;
}
//MOZILLA/NETSCAPE support
else if (textfield.selectionStart || textfield.selectionStart == '0') {
textfield.focus();
var startPos = textfield.selectionStart;
var endPos = textfield.selectionEnd;
strSelection = textfield.value.substring(startPos, endPos)
strSelection = strSelection.replace(new RegExp("<","g"), "<");
strSelection = strSelection.replace(new RegExp(">","g"), ">");
textfield.value = textfield.value.substring(0, startPos) + strSelection + textfield.value.substring(endPos, textfield.value.length);
}
}
In your edit_entry.tmpl file find
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
and add right after it
write('<a title="Encode HTML" href="javascript:decodeIt(document.entry_form.text)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/html-encode.gif" alt="Encode HTML" width="22" height="16" /></a>');
This will add the button to use with the Entry Body field. To add it for the Extended Entry field, in your edit_entry.tmpl file find
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
and add right after it
write('<a title="Encode HTML" href="javascript:decodeIt(document.entry_form.text_more)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/html-encode.gif" alt="Encode HTML" width="22" height="16" /></a>');
Finally, you will need to download this image and upload it into the images directory, obviously if you don't like the image you can make your own.
Add the following to the end of your mt.js file
function InsertImage(myField) {
var myValue = prompt('Enter the URL of the image', 'http://');
if (myValue) {
myValue = '<img src="'
+ myValue
+ '" alt="' + prompt('Enter a description of the image', '')
+ '" />';
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
myField.focus();
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
myField.focus();
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else {
myField.value += myValue;
myField.focus();
}
}
}
In your edit_entry.tmpl file find
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
and add right after it
write('<a title="Insert Image" href="javascript:InsertImage(document.entry_form.text)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/html-image.gif" alt="Insert Image" width="22" height="16" /></a>');
This will add the button to use with the Entry Body field. To add it for the Extended Entry field, in your edit_entry.tmpl file find
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
and add right after it
write('<a title="Insert Image" href="javascript:InsertImage(document.entry_form.text_more)" ><img src="<TMPL_VAR NAME=STATIC_URI>images/html-image.gif" alt="Insert Image" width="22" height="16" /></a>');
Finally, you will need to download this image and upload it into the images directory, obviously if you don't like the image you can make your own.
The following tutorial will show you how to make your own buttons. These buttons allow you to wrap your text with a tag (for example blockquote, code, pre etc.)
For the entry body, you'll need this (just change the parts in red)
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
and for extended entry, you'll need this (just change the parts in red)
write('<a title="<MT_TRANS phrase="Quote">" href="#" onclick="return formatStr(document.entry_form.text_more, \'blockquote\')"><img src="<TMPL_VAR NAME=STATIC_URI>images/html-quote.gif" alt="<MT_TRANS phrase="Quote">" width="22" height="16" /></a>');
You'll need an image that you specified above, and it would need to be upload to the images directory in the StaticWebPath.
18 Comments
Leave a comment
Subscribe to Movalog's Feed
quack said:
on Oct 21, 2004 7:17 PM | Reply
If you use Firefox (might be apparent on other browsers too) instead of IE, you may notice the buttons now sit on the left instead of the right.
Easily fixed... 1) Open styles.css 2) Find the line: #edit-entry .field-buttons { 3) After it add: float: right; And bingo, the buttons now sit in the right place again.
Arvind Satyanarayan said:
on Oct 21, 2004 7:24 PM | Reply
I've not noticed any problem with the buttons sitting on the left, but thank you!
Lutz-R. Frank said:
on Oct 22, 2004 4:33 PM | Reply
I tried something similar with the QuickPost template to add the new buttons there too (as discussed on Mantis). They appear perfectly but it seems I'm getting "permission errors" trying to use i.e. "upload file". Any idea?
Great tutorial !! CU Lutz
Autumn said:
on Oct 24, 2004 12:47 AM | Reply
I tried using these little tags before but I can never get them to work. The only thing that seems to work is the image tag.
Do you know what I need to make this work? These tabs have not been working since 2.65.
Arvind Satyanarayan said:
on Oct 24, 2004 5:52 PM | Reply
These tags aren't compatible with MT 2.6x, only 3.12x, you'll need to apply the hack found here
Autumn said:
on Oct 24, 2004 7:52 PM | Reply
Arvind - I'm using 3.121. I got Movalogs tags to work (spell & insert picture). But I meant the other tags like Bold, Italic, Underline, link, e-mail and so forth.
Carla said:
on Oct 25, 2004 9:02 PM | Reply
Thanks for sharing. I got my SpellCheck and Insert Image working just fine.
Jonas Bergenudd said:
on Nov 5, 2004 4:32 PM | Reply
all the icons that you should download from this page are missing
http://www.movalog.com/mt/images/html-image.gif for instance
Arvind Satyanarayan said:
on Nov 5, 2004 5:07 PM | Reply
Images have been restored, they got moved around by mistake whilst I was working on another tutorial!
Cleo said:
on Nov 16, 2004 10:06 PM | Reply
Hey Arvind. Thanks a million for doing this. It will help out tremendously. I did the upgrade from 2.661 to 3.12. I followed your steps and your buttons appear in new entry fields. However, I am not getting them to appear in the 'comments' section like you have. What am I doing wrong?
Cleo said:
on Nov 17, 2004 2:11 AM | Reply
Hey. I got them to appear in the new entry field. How do I get them to show up when people want to post comments though like you have it? I've been searching high and low for an answer.
Cleo said:
on Nov 17, 2004 2:12 AM | Reply
Hey. I was able to get it to work when I create a new entry. How do I get it to work when people post comments such as what you hav here?
Cleo said:
on Nov 17, 2004 11:42 PM | Reply
Sorry man for the quadruple post - your comments weren't showing up in browser for some strange reason.
jayseae said:
on Nov 22, 2004 8:50 PM | Reply
Hi Arvind - Have you had any luck with getting the spelling lookup (for instance) to open a dialog or perhaps even a new tab, as opposed to a completely new window?
Sigurdur Holm Gunnarsson said:
on Sep 15, 2005 5:08 AM | Reply
Hi,
Thanks for these great tutorials. I can't get the insert image thing to work. I have but all the code in the right places, but when I click on the image icon nothing happens. Any idea why?
I am using MT 3.2. The "mt.js" file is in "MTDIR/mt-static/" folder if that helps!
Thanks!
Marius said:
on Sep 24, 2005 3:28 AM | Reply
Hi...thanks for writing this script! I'm trying to implement your update for creating your own tag. I'm trying to use "highlite". The idea is that it will insert the font tag followed by a hex color number. I'm not sure if this is possible. Obviously I was able to do just the font opening and closing tag, but I would like to pass set variables inside this tag. How? I really would appreciate any help, since I don't know where else to look.
Kind regards,
Marius
Lukas238 said:
on Oct 3, 2005 1:21 PM | Reply
This modification works for me with Movable Type 3.2.
In the edit_entry.tmpl I use the same code that the rest of the buttons use, but change the function name for my fuction name (insertImage):
"------------------------------------------------ write('" href="#" onclick="return insertImage(document.entry_form.text)">images/html-image.gif" alt="" width="22" height="16" />'); ------------------------------------------------"
And in the MT.js file I just added a small code. This function use an other function allready in the mt.js file to print the result.
function insertImage (e) { var str = getSelected(e); if (!str) return; var myValue = prompt('Enter the URL of the image', 'http://'); if (myValue) { myValue= ''; setSelection(e, myValue); } return false;
}Lukas238 said:
on Oct 4, 2005 5:55 PM | Reply
Another code for the image button is use the same code of the rest of the buttons on the edit_entry file, but changing the name of the function they call for owr new function ("insertImage").
write('<a title="<MTTRANS phrase="Quote">" href="#" onclick="return insertImage(document.entryform.textmore, \'blockquote\')"><img src="<TMPLVAR NAME=STATICURI>images/html-quote.gif" alt="<MTTRANS phrase="Quote">" width="22" height="16" /></a>');Then in the MT.js file add this code:
function insertImage (e) { var myValue = prompt('Entry the Ingrese la URL de la imagen:', 'http://'); if (!myValue ) return; var str = getSelected(e); if (!str ) { myValue= '<a href="'+ myValue + '" target="blank"><img width=320 height=240 src="'+ myValue +'"></a>'; } else { myValue= '<a href="' + myValue + '" target="blank">'+ str +'</a>'; } setSelection(e, myValue); return false;
}In this code I use the same functionality as the link button, so you can insert an image (that is also a link to the real-size image in a new windows) or select a text and make IT a link to thath image in a new windows. You can allways modify the HTML code.
To print the code in the text area I use the same function the rest of the buttons use: "setSelection".
It works for me.