一直想给评论加上简易的编辑器,最近正好有心情折腾一下,研究了一下,现在把实现的方法和大家分享(本文参考了《为评论框添加简单文字编辑器》这篇文章的绝大部分代码,并修改了一些错误,增加了点功能)。

首先在head或者footer加入下面jQuery代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<br />
/* Comment Editor */<br />
$(function() {<br />
    function addEditor(a, b, c) {<br />
        if (document.selection) {<br />
            a.focus();<br />
            sel = document.selection.createRange();<br />
            c ? sel.text = b + sel.text + c: sel.text = b;<br />
            a.focus()<br />
        } else if (a.selectionStart || a.selectionStart == '0') {<br />
            var d = a.selectionStart;<br />
            var e = a.selectionEnd;<br />
            var f = e;<br />
            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);<br />
            c ? f += b.length + c.length: f += b.length - e + d;<br />
            if (d == e && c) f -= c.length;<br />
            a.focus();<br />
            a.selectionStart = f;<br />
            a.selectionEnd = f<br />
        } else {<br />
            a.value += b + c;<br />
            a.focus()<br />
        }<br />
    }<br />
    var g = document.getElementById('comment') || 0;<br />
    var h = {<br />
        strong: function() {<br />
            addEditor(g, '<strong>', '</strong>')<br />
        },<br />
        em: function() {<br />
            addEditor(g, '<em>', '</em>')<br />
        },<br />
        del: function() {<br />
            addEditor(g, '<del>', '</del>')<br />
        },<br />
        underline: function() {<br />
            addEditor(g, '<u>', '</u>')<br />
        },<br />
        quote: function() {<br />
            addEditor(g, '<br />
<blockquote>'
, '</p></blockquote>
<p>'
)<br />
        },<br />
        ahref: function() {<br />
            var a = prompt('请输入链接地址', 'http://');<br />
            var b = prompt('请输入链接描述','');<br />
            if (a) {<br />
                addEditor(g, '<a target="_blank" href="' + a + '"rel="external">' + b + '</a>','')<br />
            }<br />
        },<br />
        img: function() {<br />
            var a = prompt('请输入图片地址', 'http://');<br />
            if (a) {<br />
                addEditor(g, '<img src="' + a + '" alt="" />','')<br />
            }<br />
        },<br />
        code: function() {<br />
            addEditor(g, '<code>', '</code>')<br />
        }<br />
    };<br />
    window['SIMPALED'] = {};<br />
    window['SIMPALED']['Editor'] = h<br />
});<br />

HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
</p>
<div id="editor_tools">
   <a href="javascript:SIMPALED.Editor.strong()">粗体</a><br />
    <a href="javascript:SIMPALED.Editor.em()">斜体</a><br />
    <a href="javascript:SIMPALED.Editor.del()">删除线</a><br />
    <a href="javascript:SIMPALED.Editor.underline()">下划线</a><br />
    <a href="javascript:SIMPALED.Editor.ahref()">链接</a><br />
    <a href="javascript:SIMPALED.Editor.code()">插代码</a><br />
    <a href="javascript:SIMPALED.Editor.quote()">引用</a><br />
    <a href="javascript:SIMPALED.Editor.img()">插图</a>
</div>
<p>

PS:如果主题使用了wordpress3.0以上提供的数组描述来写的,应根据具体情况适当修改。

最后将下列样式加入样式表:

1
2
3
4
5
<br />
/* editor_tools */<br />
.editor_tools{margin:0;padding:0;width:360px;height:20px;border-left:1px solid #ddd;}<br />
.editor_tools a{float:left;color:#999;height:20px;line-height:20px;padding:0 5px;font-weight:bold;background:#fafafa;border-top:1px solid .ddd;border-right:1px solid #ddd;}<br />
.editor_tools a:hover{background:#fff;}<br />

好了,这样一个简洁但很好用的评论编辑器就加入成功了,赶快试试吧!

 
目前有14条回应
Comment
Trackback
Loading ....
  • 本篇文章没有Trackback
你目前是游客,请输入昵称和电邮!