标签: 文本编辑器

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

    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 = "<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 class="editor_tools clearfix">
    <span><a href="javascript:SIMPALED.Editor.strong()" title="粗体" class="et_strong">粗体</a></span>
    <span><a href="javascript:SIMPALED.Editor.em()" title="斜体" class="et_em">斜体</a></span>
    <span><a href="javascript:SIMPALED.Editor.underline()" title="下划线" class="et_underline">下划线</a></span>
    <span><a href="javascript:SIMPALED.Editor.del()" title="删除线" class="et_del">删除线</a></span>
    <span><a href="javascript:SIMPALED.Editor.ahref()" title="链接" class="et_ahref">链接</a></span>
    <span><a href="javascript:SIMPALED.Editor.img()" title="图片" class="et_img">图片</a></span>
    <span><a href="javascript:SIMPALED.Editor.code()" title="代码" class="et_code">代码</a></span>
    <span><a href="javascript:SIMPALED.Editor.quote()" title="引用" class="et_quote">引用</a></span>
    <span><a href="javascript:SIMPALED.Editor.private()" title="隐藏" class="et_private">隐藏</a></span>
    <span><a href="javascript:SIMPALED.Editor.smilies()" title="表情" class="et_smilies">表情</a></span>
    <div id="smilies-container"><div class="wp_smilies">'.$link.'</div></div></div>';
    }
                  
    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, '<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>')
            },
            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
    });
    
    三、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 萌の空