强化 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;}
2013年 12月 12日