分类
其他

强化 WordPress 自带评论框

功能:给WordPress自带评论框添加工具按钮,包括字体样式、链接、引用、插图片、插代码,也就是把评论支持的标签做成按钮一键输入。很可惜我已经把这功能去掉了,需要的同学可以参考参考。

JavaScript部分

$(function() { // comment editor
    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>')
        },
        empty: function() {
            g.value = "";
            g.focus()
        },
        fontColor: function() {
            var a = prompt("u8f93u5165u989cu8272cssu503c", "#000000");
            a && addEditor(g, "[color=#" + a.match(/[^#]{3,6}/gi)[0] + "]", "[/color]")
        },
    };
    window['SIMPALED'] = {};
    window['SIMPALED']['Editor'] = h
});

HTML部分:

<div id="editor-tools">
    <a href="javascript:SIMPALED.Editor.strong()">粗体</a>
    <a href="javascript:SIMPALED.Editor.em()">斜体</a>
    <a href="javascript:SIMPALED.Editor.del()">删除线</a>
    <a href="javascript:SIMPALED.Editor.underline()">下划线</a>
    <a href="javascript:SIMPALED.Editor.ahref()">链接</a>
    <a href="javascript:SIMPALED.Editor.code()">插代码</a>
    <a href="javascript:SIMPALED.Editor.quote()">引用</a>
    <a href="javascript:SIMPALED.Editor.img()">插图</a>
</div>

参考CSS:

#editor-tools{height:20px;width:360px;}
#editor-tools a{background:#fafafa;color:#999;float:left;font-size:12px;height:20px;line-height:20px;padding:0 5px;}
#editor-tools a:hover{background:#fff;}