Note (2009): Another very old contribution, of no current use to anyone.

A quick MovableType hint. This applies specifically to those who have implemented the writeImgTag form of clicakble smilies in their Comments AND the Live Preview script. It enables you to get the smilies in the live preview. But the principle is also easy to adapt to other methods of using clickable smilies. My method is explained below, but also posted here in the MT forums. Try it out in the comments right here to see if it would suit your needs.

I originally implemented the clickable smilies with writeImgTag and used it to put in the codes like ":smiley:" which would be replaced by the image source on publishing by Brad Choate's MTMacros plug-in.

If you have those up and running, here are some mods that put the smilies in the Live Preview (but you also lose the nice simple coding ":smiley:" in exchange for the ugly image tag, and you must allow "img src" as a tag in Comments).

All we're doing is altering the function that writes the smilies to also write to the live preview. So first, find the code in your Comments template that makes the "smily bar." It should be a series of lines like this (one for each smiley):

You can see there that we're passing the name "smiley" to the writeImgTag function. We will now change that to pass the path to the image to the function. Just replace 'smiley' with 'src' (with no quotation marks), like this:

Now, you should also have the ReloadtextDiv function installed to implement live comments, just double check that you have this:

function ReloadTextDiv()
{
var NewText = document.getElementById("DynamicText").value;
var DivElement = document.getElementById("TextDisplay");
DivElement.innerHTML = NewText;
}

Leave that one alone, but recognize that we are now going to go look at the writeImgTag function, and alter it to additionally write the smiliey path into the Live Preview HTML. So, the original writeImgTag looks like this:

function writeImgTag(code)
{
var cache = document.comments_form.text.value;
this.code = code;
document.comments_form.text.value = cache + " :" + code + ":";
document.comments_form.text.focus();
}

We will change it to this (takes the path, makes it an img src tag, and writes it to both the entry box and the live preview):

function writeImgTag(path)
{
var NewText = document.getElementById("DynamicText").value;
var DivElement = document.getElementById("TextDisplay");
this.path = path;
var pathU = NewText + "<img src="" + path + "">";
DivElement.innerHTML = pathU;
document.comments_form.text.value = pathU;
document.comments_form.text.focus();
}

That's it. Any other smiley or button writing function can be similarly altered to also write to the live preview, thus including button clicks in the preview. Hope this is clear enough!

Comments

10 Responses to Clickable Smilies and Live Preview

Oscar Says:
March 31st, 2004 at 11:03 pm
Sure Felix - that should work well. You might try searching over at the MT forums for a more specific answer as I’m just totally out of time these days, but you should be easy to do.
felix Says:
March 31st, 2004 at 09:00 pm
This is so cool! Just one question: would it be possible to get this to work with bbcodes? My sites comments don’t use HTML and I haven’t got the foggiest on how to change this.

Any ideas? Is it even possible?
Says:
September 20th, 2003 at 02:45 am
Oscar Says:
February 27th, 2003 at 03:40 pm
Oops! You are right to begin with Adam, as I have pointed out over on SG ... My problem is this particular browser!
Oscar Says:
February 26th, 2003 at 09:56 pm
Actually Adam, I coulodn’t get that to work, but this foes:

NewText = NewText.replace( /[rn]/g,"<br />");
Oscar Says:
February 26th, 2003 at 01:13 am
Hey, good thinking Adam! Thanks. I hadn’t even noticed that it didn’t!
adam Says:
February 26th, 2003 at 12:50 am
Thanks for the tips. If you want your live preview to reflect newlines as well, all you have to do is add NewText = NewText.replace(/n/g,”<br />”); to ReloadTextDiv().

Thanks for putting up the info to make smilies work with the live preview!
Julie Says:
February 25th, 2003 at 09:12 pm
Hey, Oscar, not that this just isn’t the greatest, whatever it is, but I’m ready for something else here ... but I do like the new jokes thing ...
Oscar Says:
February 25th, 2003 at 12:51 pm
Yes, this is all kinds of fun! Be sure to check out Scriptygoddess’s LazyMan’s smilies ... I’m too lazy to install them ... actually, the truth is, I have hundreds of smilies, and the thing would take forever to load ... guess I’ll have to cogitate on the matter ... probably the intelligent thing is to actually pick and choose the best smilies and trash the rest ... but who can do that? I my smilies!
Maggie Says:
February 25th, 2003 at 12:01 pm
I’m testing this out and finding it very cool indeed Oscar this should definitely keep Maggie entertained today