非插件给wordpress加上评论编辑器

Author： Alex Gao
发布时间：March 4, 2011
1438views
15 comments
2565字数
Categories： wordpress

一直想给评论加上简易的编辑器，最近正好有心情折腾一下，研究了一下，现在把实现的方法和大家分享（本文参考了<a href="http://imluren.com/2011/01/simple-editor-tools.html">《为评论框添加简单文字编辑器》</a>这篇文章的绝大部分代码，并修改了一些错误，增加了点功能）。

首先在head或者footer加入下面jQuery代码：
```js
/* 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>', '</p></blockquote>
<p>')
        },
        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="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAA1JREFUCJljePfx038ACXMD0ZVlJAYAAAAASUVORK5CYII=" data-original="' + a + '" alt=""  />','')
            }
        },
        code: function() {
            addEditor(g, '<code>', '</code>')
        }
    };
    window['SIMPALED'] = {};
    window['SIMPALED']['Editor'] = h
});
```

**HTML代码：**
```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>
```

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

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

```css
/* editor_tools */
.editor_tools{margin:0;padding:0;width:360px;height:20px;border-left:1px solid #ddd;}
.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;}
.editor_tools a:hover{background:#fff;}
```

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

Last modification：March 5th, 2020 at 05:01 pm

15 comments

百家网络博客
March 7th, 2014 at 10:38 pm

表示没用，js出错，调不出来效果。

Reply
百家网络博客
March 7th, 2014 at 10:30 pm

好多br

Reply
柳飘清枫
January 12th, 2014 at 02:41 pm

谢谢，正需要这个，话说好多都是多余的

Reply
djj
January 10th, 2014 at 11:18 am

不知道该把前面两个方框中的代码加到哪个文件中。head.php或者footer.php？加入后都直接显示在页面上了，HTML那框内的就更不知道该放入哪个文件了。咳，是我自己太差。。。

Reply
测试!!!
April 11th, 2013 at 06:39 pm

评论来测试了!!!!!

Reply
xilouqingzhu
May 1st, 2012 at 11:26 am

啊。为啥我的点击没反应

Reply
1. Alex Gao
  May 5th, 2012 at 08:10 am
  
  @xilouqingzhu
  @xilouqingzhu可能你的网速慢，JS加载不全
  
  Reply
yaoduoshao
November 26th, 2011 at 02:06 pm

呵呵感谢博主提供代码，不过好像有点错误 html代码部分那个
是不是应该是啊

Reply
阿尔滨论坛
November 15th, 2011 at 03:54 pm

一看代码就头疼不过貌似很强大 :lol:

Reply
苦太狼
November 6th, 2011 at 10:02 am

3.0以上怎么修改呢。。怎么uncaught referenceerror:simpaled is not defined.....

Reply
iNove修改小记 - Let's whisper
August 6th, 2011 at 05:49 pm

[...] 　　编辑器去掉了js几十k的QuickTags，换成非插件给wordpress加上评论编辑器，原作者不知是谁（zww？）。 [...]

Reply
whisperer
August 5th, 2011 at 06:53 am

不错~ 我也把庞大的quicktags换成这个了...
能加个清除功能就更好了

Reply
1. Alex Gao
  August 5th, 2011 at 09:37 am
  
  @whisperer
  @whisperer呵呵，这个虽然简单，但也够用了
  
  Reply
远走高飞
August 1st, 2011 at 12:52 pm

正在找这个功能呢

Reply
1. Alex Gao
  August 5th, 2011 at 09:37 am
  
  @远走高飞
  @远走高飞可以试试哦
  
  Reply