给Micolog加QQ表情评论功能

前几天看到六维博客里看到了一篇博文WP博客评论区加入QQ表情，此功能很酷，想了想就移植到Micolog了，本人不懂php，只是解剖了他的源代码，稍加改造，并加上前几天研究如何给最新评论增加过滤功能的积累，就很简单的实现了。没写过插件，只是改造了代码也不知能不能叫插件！

１.首先下载 QQ表情包

上传到你的博客程序的image下，如果你有大菠萝相册，用GAE上传程序直接上传到大菠萝程序的static下。这样可以起到分流的作用！

２.在留言输入框附近 加如下代码：

<p>
<script type="text/javascript">/*<![CDATA[*/function grin(tag) {
        if (typeof tinyMCE != 'undefined') {
            grin_tinymcecomments(tag);
        } else {
            grin_plain(tag);
        }
    }
    function grin_tinymcecomments(tag) {
        tinyMCE.execCommand('mceInsertContent', false, ' ' + tag + ' ');
    }
    function grin_plain(tag) {
        var myField;
        var myCommentTextarea = "comment";
        tag = ' ' + tag + ' ';
        if (document.getElementById(myCommentTextarea) && document.getElementById(myCommentTextarea).type == 'textarea') {
            myField = document.getElementById(myCommentTextarea);
        } else {
            return false;
        }
        if (document.selection) {
            myField.focus();
            sel = document.selection.createRange();
            sel.text = tag;
            myField.focus();
        }
        else if (myField.selectionStart || myField.selectionStart == '0') {
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var cursorPos = endPos;
            myField.value = myField.value.substring(0, startPos)
                          + tag
                          + myField.value.substring(endPos, myField.value.length);
            cursorPos += tag.length;
            myField.focus();
            myField.selectionStart = cursorPos;
            myField.selectionEnd = cursorPos;
        }
        else {
            myField.value += tag;
            myField.focus();
        }
    }
    function moreSmilies() {
        document.getElementById('wp-smiley-more').style.display = 'inline';
        document.getElementById('wp-smiley-toggle').innerHTML = '<a href="javascript:lessSmilies()">&laquo;&nbsp;less</a></span>';
    }
    function lessSmilies() {
        document.getElementById('wp-smiley-more').style.display = 'none';
        document.getElementById('wp-smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">more&nbsp;&raquo;</a>';
    }/*]]>*/</script>

<img src='http://hikeimg.appspot.com/static/images/icon/icon_smile.gif' alt=':)' onclick='grin("^~smile~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_lol.gif' alt='lol' onclick='grin("^~lol~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_cool.gif' alt='8)' onclick='grin("^~cool~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_surprised.gif' alt=':-o' onclick='grin("^~surprised~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_mrgreen.gif' alt='mrgreen' onclick='grin("^~mrgreen~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_evil.gif' alt='evil' onclick='grin("^~evil~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_arrow.gif' alt='arrow' onclick='grin("^~arrow~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_sad.gif' alt=':(' onclick='grin("^~sad~^")' class='wp-smiley-select' /> <span id="wp-smiley-more" style="display:none"><img src='http://hikeimg.appspot.com/static/images/icon/icon_wink.gif' alt='wink' onclick='grin("^~wink~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_neutral.gif' alt=':-|' onclick='grin("^~neutral~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_mad.gif' alt=':-x' onclick='grin("^~mad~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_twisted.gif' alt='twisted' onclick='grin("^~twisted~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_eek.gif' alt='8-O' onclick='grin("^~eek~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_rolleyes.gif' alt='roll' onclick='grin("^~rolleyes~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_razz.gif' alt=':-P' onclick='grin("^~razz~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_redface.gif' alt='oops' onclick='grin("^~redface~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_idea.gif' alt='idea' onclick='grin("^~idea~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_biggrin.gif' alt=':-D' onclick='grin("^~biggrin~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_cry.gif' alt='cry' onclick='grin("^~cry~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_confused.gif' alt=':-?' onclick='grin("^~confused~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_question.gif' alt='?' onclick='grin("^~question~^")' class='wp-smiley-select' /> <img src='http://hikeimg.appspot.com/static/images/icon/icon_exclaim.gif' alt='!' onclick='grin("^~exclaim~^")' class='wp-smiley-select' /> </span> <span id="wp-smiley-toggle"><a href="javascript:moreSmilies()">more&nbsp;&raquo;</a></span>
</p>

将http://hikeimg.appspot.com/static/images/icon/icon_exclaim.gif 的红色部分的路径替换成您上传ＱＱ表情的路径。过几天此路径可能失效！下面遇到同样的路径也要替换！

３.在blog.py的大概279行，增加红色部分。

if not (name and email and content):
    if useajax:
                self.write(simplejson.dumps((False,-101,_('Please input name, email and comment .'))))
    else:
        self.error(-101,_('Please input name, email and comment .'))
else:
    comment=Comment(author=name,
                    content=content.replace('^~',"<img src=http://hikeimg.appspot.com/static/images/icon/icon_").replace('~^','.gif />'),
                    email=email,
                    entry=Entry.get(key))
    if url:
       try:
            comment.weburl=url
       except:
           comment.weburl='http://'+url

４.为了使首页的最新评论不显示表情或图片，要做过滤。打开model.py，大概在464行。代码修改如下，复制红色部分即可。主要[：len]的位置有所改变！

@property
def shortcontent(self,len=24):  #self.content[:len].replace
    scontent=self.content.replace('<br />','&nbsp;').replace('<img src=http://hikeimg.appspot.com/static/images/icon/icon_','Icon(').replace('.gif />',')').replace('<','&lt;').replace('>','&gt;')[:len]
    return scontent

OK，完成。自己发个表情试试