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


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

首先在head或者footer加入下面jQuery代码:
[cc lang='javascript']
/* 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, '
', '

')
},
ahref: function() {
var a = prompt('请输入链接地址', 'http://');
var b = prompt('请输入链接描述','');
if (a) {
addEditor(g, '' + b + '','')
}
},
img: function() {
var a = prompt('请输入图片地址', 'http://');
if (a) {
addEditor(g, '','')
}
},
code: function() {
addEditor(g, '', '')
}
};
window['SIMPALED'] = {};
window['SIMPALED']['Editor'] = h
});
[/cc]

HTML代码:
[cc lang='html']

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

最后将下列样式加入样式表:
[cc lang='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;}
[/cc]

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

声明:雅布叔叔的糖果屋|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 非插件给wordpress加上评论编辑器


雅布叔叔的四季糖果屋,那个洋溢着阳光味道和快乐音符的时光铺子啊,珍藏着最美的童话~~