怎么说呢，反正是显得没事干瞎折腾，本博主不懂什么代码，所以或许写的代码不够简洁，但总之这是个路子，如果你是内行当然可以改进代码。
我把编辑器也给默认隐藏了，点击评论框便出现，再点击则再次隐藏~你也可以选择更改设置保留编辑器不隐藏只让表情和颜色默认隐藏。关于淡入淡出的时间你也可以自行修改调整。
（如果你只用表情的话，建议点击评论框出现表情，点击评论框外隐藏表情（加上淡入淡出效果），而不是仅仅点击评论框。>>点击阅读《设置wordpress评论框表情特效：点击评论框内和框外实现表情显现和隐藏并淡入淡出》）
首先要解除对游客评论的代码限制
本文需要解除的代码标签有：a标签的target属性、img标签、font标签，其他标签如粗体、斜体、下划线、删除线请检查自行添加或去掉文件中的注释。
修改方法：打开wp-includes目录中的kses.php文件
查找“$allowedtags = array”，在后面添加或修改，这个看上面已有的标签比葫芦画瓢都会改吧，注意括号的对应关系和逗号的使用。
添加编辑器代码
打开主题文件中的评论模板comments.php（一般应该都是这个，如果你的主题比较奇葩的话或许在其他地方）。
在合适的地方添加代码，这个根据个人主题情况自行排序，需要加的有表情、颜色选择器、编辑器栏，无非是在评论框附近，评论框的关键代码是“<textarea name="comment" id="comment" ****************></textarea>”
下面以我的主题情况逐步讲解。
我放置代码的顺序是：【评论框id="comment"】-【表情id="smiley"】【编辑器id="editor_tools"（颜色选择器id="fontcolor"）-（编辑器栏目id="editor"）】：
- <p><textarea name="comment" id="comment" tabindex="4"></textarea></p>
- <div id="smiley"><?php include(TEMPLATEPATH . '/includes/smiley.php'); ?></div>
- <div id="editor_tools">
- <div id="fontcolor">
- <a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></a>
- <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a>
- <a href="javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a>
- <a href="javascript:SIMPALED.Editor.magenta()" style="background-color: magenta"></a>
- <a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>
- <a href="javascript:SIMPALED.Editor.chocolate()" style="background-color: chocolate"></a>
- <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>
- <a href="javascript:SIMPALED.Editor.aquamarine()" style="background-color: aquamarine"></a>
- <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>
- <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>
- <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>
- <a href="javascript:SIMPALED.Editor.thistle()" style="background-color: thistle"></a>
- <a href="javascript:SIMPALED.Editor.brown()" style="background-color: brown"></a>
- <a href="javascript:SIMPALED.Editor.peru()" style="background-color: peru"></a>
- <a href="javascript:SIMPALED.Editor.deeppink()" style="background-color: deeppink"></a>
- <a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>
- <a href="javascript:SIMPALED.Editor.slategray()" style="background-color: slategray"></a>
- <a href="javascript:SIMPALED.Editor.tomato()" style="background-color: tomato"></a>
- </div>
- <p><div id="editor">
- <a href="javascript:;" id="comment-smiley"><b>表情</b></a>
- <a href="javascript:SIMPALED.Editor.strong()"><b>粗体</b></a>
- <a href="javascript:SIMPALED.Editor.em()"><b>斜体</b></a>
- <a href="javascript:" id="font-color"><b>颜色</b></a>
- <a href="javascript:SIMPALED.Editor.quote()"><b>引用</b></a>
- <a href="javascript:SIMPALED.Editor.ahref()"><b>链接</b></a>
- <a href="javascript:SIMPALED.Editor.del()"><b>删除线</b></a>
- <a href="javascript:SIMPALED.Editor.underline()"><b>下划线</b></a>
- <a href="javascript:SIMPALED.Editor.code()"><b>插代码</b></a>
- <a href="javascript:SIMPALED.Editor.img()"><b>插图片</b></a></div>
- </div></p>
其中的颜色可自行修改，请保持和JS文件进行同步修改，如果你的主题不支持哪种颜色自己去找喜欢的类型替换，提供一个网页颜色选择器地址：
http://www.qqtz.com/hao/color.htm
CSS样式（参考）：（请根据个人情况自行修改）
添加CSS代码到style.css文件：
- /**评论框编辑器**/
- #editor{width:100%px;height:26px;line-height:26px;border:1px #e0e0e0 solid;border-radius:2px 2px 0 0;box-shadow:0 2px 10px #eee,inset 0 -2px 10px #eee;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;z-index:99999;}
- #editor a{color:#777;display:inline-block;padding:0 6px;height:26px;border-right:1px solid #ddd;}
- #editor a:hover{color:#333;text-decoration:none;}
- #fontcolor{width:446px;height:20px;line-height:20px;border:1px #e0e0e0 solid;z-index:99999;}
- #fontcolor a{display:inline-block;height:20px;width:21px;}
jQuery代码：
添加到你的js文件中或者自己新建个js文件，不要忘记在头文件模板中引用：
- //评论框编辑器
- $(document).ready(function () {
- $("#smiley").hide(500);
- $("#comment-smiley").click(function(){
- $("#smiley").toggle(500);
- });
- });
- $(document).ready(function () {
- $("#fontcolor").hide(500);
- $("#font-color").click(function(){
- $("#fontcolor").toggle(500);
- });
- });
- $(document).ready(function () {
- $("#editor").hide(500);
- $("#comment").click(function(){
- $("#editor").toggle(500);
- });
- });
- $(document).ready(function () {
- $("#smiley").toggle();
- $("#comment").click(function(){
- $("#smiley").hide(500);
- });
- });
- $(document).ready(function () {
- $("#fontcolor").toggle();
- $("#comment").click(function(){
- $("#fontcolor").hide(500);
- });
- });
- $(document).ready(function () {
- $("#smiley").hide();
- $("#comment").click(function(){
- });
- });
- $(document).ready(function () {
- $("#fontcolor").hide();
- $("#comment").click(function(){
- });
- });
- $(function() {
- function addEditor(a, b, c) {
- if (document.selection) {
- a.focus();
- sel = document.selection.createRange();
- c ? sel.text = b + sel.text + c: sel.text = b;
- a.focus()
- } else if (a.selectionStart || a.selectionStart == '0') {
- var d = a.selectionStart;
- var e = a.selectionEnd;
- var f = e;
- c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length);
- c ? f += b.length + c.length: f += b.length - e + d;
- if (d == e && c) f -= c.length;
- a.focus();
- a.selectionStart = f;
- a.selectionEnd = f
- } else {
- a.value += b + c;
- a.focus()
- }
- }
- var g = document.getElementById('comment') || 0;
- var h = {
- strong: function() {
- addEditor(g, '<strong>', '</strong>')
- },
- em: function() {
- addEditor(g, '<em>', '</em>')
- },
- del: function() {
- addEditor(g, '<del>', '</del>')
- },
- underline: function() {
- addEditor(g, '<u>', '</u>')
- },
- quote: function() {
- addEditor(g, '<blockquote>', '</blockquote>')
- },
- ahref: function() {
- var a = prompt('请输入链接地址', 'http://');
- var b = prompt('请输入要显示成文字链接的描述','');
- if (a) {
- addEditor(g, '<a target="_blank" href="' + a + '" rel="external">' + b + '</a>','')
- }
- },
- img: function() {
- var a = prompt('请输入图片地址', 'http://');
- if (a) {
- addEditor(g, '<img src="' + a + '" alt="" />','')
- }
- },
- code: function() {
- addEditor(g, '<code>', '</code>')
- },
- red: function() {
- addEditor(g, '<font color="red">', '</font>')
- },
- green: function() {
- addEditor(g, '<font color="green">', '</font>')
- },
- blue: function() {
- addEditor(g, '<font color="blue">', '</font>')
- },
- magenta: function() {
- addEditor(g, '<font color="magenta">', '</font>')
- },
- yellow: function() {
- addEditor(g, '<font color="yellow">', '</font>')
- },
- chocolate: function() {
- addEditor(g, '<font color="chocolate">', '</font>')
- },
- black: function() {
- addEditor(g, '<font color="black">', '</font>')
- },
- aquamarine: function() {
- addEditor(g, '<font color="aquamarine">', '</font>')
- },
- lime: function() {
- addEditor(g, '<font color="lime">', '</font>')
- },
- fuchsia: function() {
- addEditor(g, '<font color="fuchsia">', '</font>')
- },
- orange: function() {
- addEditor(g, '<font color="orange">', '</font>')
- },
- thistle: function() {
- addEditor(g, '<font color="thistle">', '</font>')
- },
- brown: function() {
- addEditor(g, '<font color="brown">', '</font>')
- },
- peru: function() {
- addEditor(g, '<font color="peru">', '</font>')
- },
- deeppink: function() {
- addEditor(g, '<font color="deeppink">', '</font>')
- },
- purple: function() {
- addEditor(g, '<font color="purple">', '</font>')
- },
- slategray: function() {
- addEditor(g, '<font color="slategray">', '</font>')
- },
- tomato: function() {
- addEditor(g, '<font color="tomato">', '</font>')
- }
- };
- window['SIMPALED'] = {};
- window['SIMPALED']['Editor'] = h
- });
括号里的数字500是淡入淡出是时间500毫秒，可自行修改。其中的颜色可自行修改，请保持和comments.php文件中的编辑器进行同步修改。
关于js代码里的$(document).ready(function () 事件：
我的效果是：
1、点击评论框隐藏或展示编辑器栏。
2、如果显示了表情或颜色选择器或者表情和颜色选择器同时显示，点击评论框则全部隐藏。
3、表情和颜色选择互不影响。
我已经说过了，我不懂代码，或许自己的方法欠佳显得啰嗦了，如果你懂，可以自己改进。根据括号里的ID名字请自行修改或删除以达到你要求的效果。
