WordPress评论框添加简单文本编辑器和弹出表情框

功能和效果如文后评论框,包括:粗体、斜体、下划线、删除线、链接、图片、代码、引用、隐藏、表情,需要更多功能的可以尝试使用JS Quicktags或者在评论框加载TinyMCE Advanced编辑器。

一、functions.php添加以下代码:
// -- START ----------------------------------------
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 = "\"{$smile}\"";
        $imglink = htmlspecialchars($img);
        $link .= "{$img}";
    }
    echo '';
}
              
if (is_user_logged_in()) {
    add_filter('comment_form_logged_in_after', 'wp_smilies');
}
else {
    add_filter( 'comment_form_after_fields', 'wp_smilies');
}
              
function private_content($atts, $content = null)
{ if (current_user_can('create_users'))
return '' . $content . ''; return '***隐藏内容仅管理员可见***'; }
add_shortcode('private', 'private_content');
add_filter('comment_text', 'do_shortcode'); /* 添加隐藏短代码*/
// -- END ----------------------------------------
二、然后加载以下JS即可(表情框需要jQuery):
/* 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, '', '')
        },
        em: function() {
            addEditor(g, '', '')
        },
        del: function() {
            addEditor(g, '', '')
        },
        underline: function() {
            addEditor(g, '', '')
        },
        quote: function() {
            addEditor(g, '
', '
') }, private: function() { addEditor(g, '***隐藏内容仅管理员可见***') }, ahref: function() { var a = prompt('请输入链接地址', 'http://'); var b = prompt('请输入链接描述',''); if (a) { addEditor(g, '','') } }, code: function() { addEditor(g, '', '') } }; window['SIMPALED'] = {}; window['SIMPALED']['Editor'] = h });
三、CSS部分(仅供参考):
/* comment-editor
-----------------------------------------------*/
.editor_tools {
position: relative;
margin: 0 -5px -10px;
border:1px solid #ccc;
background-color:#e9e9e9;
background-image:-ms-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-moz-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-o-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:-webkit-linear-gradient(bottom,#ddd,#e9e9e9);
background-image:linear-gradient(bottom,#ddd,#e9e9e9);
}
.editor_tools a {
margin: 2px;
line-height:20px;
width:20px;
height:20px;
float:left;
overflow:hidden;
display:block;
text-indent:-2000em;
}
.editor_tools span,
.editor_tools span:hover {
margin: 4px 0 4px 8px;
color:#464646;
border:1px solid #c3c3c3;
-webkit-border-radius:3px;
border-radius:3px;
background-color:#eee;
background-image:-ms-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-moz-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-o-linear-gradient(bottom,#e3e3e3,#fff);
background-image:-webkit-linear-gradient(bottom,#e3e3e3,#fff);
background-image:linear-gradient(bottom,#e3e3e3,#fff);
float:left;
overflow:hidden;
cursor: pointer;
}
.editor_tools span.splitter {
padding-right: 5px;
margin-right: 15px;
border-right: 1px solid #c3d8eb;
}
.editor_tools span:hover {
border-color:#aaa;
background:#ddd;
}
.editor_tools a.et_strong {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -280px transparent;
}
.editor_tools a.et_em {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -350px transparent;
}
.editor_tools a.et_underline {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -420px transparent;
}
.editor_tools a.et_del {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -490px transparent;
}
.editor_tools a.et_ahref {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -560px transparent;
}
.editor_tools a.et_img {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -630px transparent;
}
.editor_tools a.et_code {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -700px transparent;
}
.editor_tools a.et_quote {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -770px transparent;
}
.editor_tools a.et_private {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -840px transparent;
}
.editor_tools a.et_smilies {
background: url("/theme/images/sprites.png") no-repeat scroll 0 -910px transparent;
}
.wp_smilies a{
text-indent:0;
margin-left:4px;
margin-top:4px;
}
#smilies-container span {
margin: 5px;
width:24px;height:24px;
cursor: pointer;
}
#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;
border-radius:3px;
left: 346px;
top: -29px;
width: 396px;
padding: 10px;
}
注:仅适用于WordPress3.0及以后版本,即支持comment_form()函数之后。

转自MoeSora 萌の空

DD_belatedPNG,IE6下PNG透明解决方案

官网:http://www.dillerdesign.com/experiment/DD_belatedPNG/#download

不得承认IE6是个垃圾。。。

使用方法
1.在这里下载DD_belatedPNG.js文件.
2.在网页中引用,如下:

其他方案
在这里还是提供其他方案供大家参考.

转自http://www.jb51.net/article/25538.htm

IE6中负的margin值导致出界部分不显示问题的解决

IE 6 下 margin 负数部分被截掉的兼容方案是, 在使用负数的对象上加上  position:relative;

 

例如:   div{ margin-left:-30px; position:relative; }

更多情况可以参考http://www.search-this.com/2007/08/01/the-positive-side-of-negative-margins/