前几天看到六维博客里看到了一篇博文WP博客评论区加入QQ表情,此功能很酷,想了想就移植到Micolog了,本人不懂php,只是解剖了他的源代码,稍加改造,并加上前几天研究如何给最新评论增加过滤功能的积累,就很简单的实现了。没写过插件,只是改造了代码也不知能不能叫插件!
1.首先下载 QQ表情包
上传到你的博客程序的image下,如果你有大菠萝相册,用GAE上传程序直接上传到大菠萝程序的static下。这样可以起到分流的作用!
2.在留言输入框附近 加如下代码:
<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()">« less</a></span>';
}
function lessSmilies() {
document.getElementById('wp-smiley-more').style.display = 'none';
document.getElementById('wp-smiley-toggle').innerHTML = '<a href="javascript:moreSmilies()">more »</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 »</a></span>
</p>
将http://hikeimg.appspot.com/static/images/icon/icon_exclaim.gif 的红色部分的路径替换成您上传QQ表情的路径。过几天此路径可能失效!下面遇到同样的路径也要替换!
3.在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
4.为了使首页的最新评论不显示表情或图片,要做过滤。打开model.py,大概在464行。代码修改如下,复制红色部分即可。主要[:len]的位置有所改变!
@property
def shortcontent(self,len=24): #self.content[:len].replace
scontent=self.content.replace(‘<br />’,' ’).replace(‘<img src=http://hikeimg.appspot.com/static/images/icon/icon_’,'Icon(‘).replace(‘.gif />’,')’).replace(‘<’,'<’).replace(‘>’,'>’)[:len]
return scontent
OK,完成。自己发个表情试试