wordpress 为评论框添加编辑器和表情

给评论框加上粗体、斜体、下划线、删除线、链接、图片、代码、引用、私密和表情的工具条。效果见我的评论框。适用于主题评论表单使用comment_form的情况。（吐槽comment_form。感觉评论框被封装了，就留几个钩子，太不方便个性化了，吐血 。wordpress3之前没有comment_form，想要什么样的评论框，直接写在comments.php就可以了。）

主要有三步，1.写functions 2.写js 3.写css

具体步骤是

一、先在functions.php加入以下代码

//评论支持短代码
add_filter('comment_text', 'do_shortcode');   

//部分内容仅管理员可见
function private_content($atts, $content = null)
{ if (current_user_can('create_users'))
return '' . $content . ''; return '***隐藏内容仅管理员可见***'; }
add_shortcode('vip', 'private_content');

// 评论编辑丰富
function wp_smilies() {
 global $wpsmiliestrans;
 if ( !get_option('use_smilies') or (empty($wpsmiliestrans))) return;
 $smilies = array_unique($wpsmiliestrans);
 $link='';
 foreach ($smilies as $key => $smile) {
 $file = get_bloginfo('wpurl').'/wp-includes/images/smilies/'.$smile;
 $value = " ".$key." ";
 $img = "<img src=\"{$file}\" alt=\"{$smile}\" />";
 $imglink = htmlspecialchars($img);
 $link .= "<span><a href=\"#commentform\" title=\"{$smile}\" onclick=\"document.getElementById('comment').value += '{$value}'\">{$img}</a> </span>"; 
 }
 echo '<div>
<span><a href="javascript:SIMPALED.Editor.strong()" title="粗体">粗体</a></span>
<span><a href="javascript:SIMPALED.Editor.em()" title="斜体">斜体</a></span>
<span><a href="javascript:SIMPALED.Editor.underline()" title="下划线">下划线</a></span>
<span><a href="javascript:SIMPALED.Editor.del()" title="删除线">删除线</a></span>
<span><a href="javascript:SIMPALED.Editor.ahref()" title="链接">链接</a></span>
<span><a href="javascript:SIMPALED.Editor.img()" title="图片">图片</a></span>
<span><a href="javascript:SIMPALED.Editor.code()" title="代码">代码</a></span>
<span><a href="javascript:SIMPALED.Editor.quote()" title="引用">引用</a></span>
<span><a href="javascript:SIMPALED.Editor.private()" title="管理员可见">私密</a></span>
<span><a href="javascript:SIMPALED.Editor.smilies()" title="表情" class="et_smilies" class="et_smilies">表情</a></span>
<div id="smilies-container"><div>'.$link.'</div></div></div>------------------------------------------------';
} 
if (is_user_logged_in()) {
 add_filter('comment_form_logged_in_after', 'wp_smilies');
}
else {
 add_filter( 'comment_form_before_fields', 'wp_smilies');
}
// -- END ----------------------------------------

二、新建一个 comments.js 放在”主题目录/js”下。需要jquery支持。jquery1.12测试失败；jquery1.9测试成功。

comments.js代码为

/* smilies toggle
-----------------------------------------------*/
$(function() {
    $("a.et_smilies").click(function() {
        $('#smilies-container').toggle(function() {
            $(document).click(function(event) {
                if (!($(event.target).is('#smilies-container') || $(event.target).parents('#smilies-container').length || $(event.target).is('a.et_smilies'))) {
                    $('#smilies-container').hide(200);
                }
            });
        });
    });
});
            
/* comment editor
-----------------------------------------------*/
$(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, '$$', '$$')
        },
        del: function() {
            addEditor(g, '<del>', '</del>')
        },
        underline: function() {
            addEditor(g, '

        

             
            展开/收缩
            

        
        
', '
    
')
        },
        quote: function() {
            addEditor(g, '<blockquote>', '</blockquote>')
        },
        private: function() {
            addEditor(g, '***隐藏内容仅打开君可见***')
        },
        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>')
        }
    };
    window['SIMPALED'] = {};
    window['SIMPALED']['Editor'] = h
});

然后加载这个js，即在comments.php加入 <script src=”<?php bloginfo(‘template_directory’); ?>/js/comments.js”></script>

三、给表情加一个样式。在style.css中加入

/* comment-editor
-----------------------------------------------*/
#smilies-container{
display:none;
position: absolute;
background-color: #FFFFFF;
border-color: rgba(0, 0, 0, 0.2);
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
z-index:99;
cursor:default!important;
-moz-border-radius:3px;
}

大功告成！