Loading... 一直想给评论加上简易的编辑器,最近正好有心情折腾一下,研究了一下,现在把实现的方法和大家分享(本文参考了<span class="external-link"><a class="no-external-link" href="http://imluren.com/2011/01/simple-editor-tools.html" target="_blank">《为评论框添加简单文字编辑器》<i data-feather='external-link'></i></a></span>这篇文章的绝大部分代码,并修改了一些错误,增加了点功能)。 <!--more--> 首先在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 © 允许规范转载
表示没用,js出错,调不出来效果。
好多br
谢谢,正需要这个,话说好多都是多余的
不知道该把前面两个方框中的代码 加到哪个文件中。head.php或者footer.php? 加入后 都直接显示在页面上了,HTML那框内的就更不知道该放入哪个文件了。咳,是我自己太差。。。
评论来测试了!!!!!
啊。为啥我的点击没反应
@xilouqingzhu可能你的网速慢,JS加载不全
呵呵 感谢博主提供代码,不过好像有点错误 html代码部分 那个
是不是应该是 啊
一看代码就头疼 不过貌似很强大 :lol:
3.0以上怎么修改呢。。怎么uncaught referenceerror:simpaled is not defined.....
[...] 编辑器去掉了js几十k的QuickTags,换成非插件给wordpress加上评论编辑器,原作者不知是谁(zww?)。 [...]
不错~ 我也把庞大的quicktags换成这个了...
能加个清除功能就更好了
@whisperer呵呵,这个虽然简单,但也够用了
正在找这个功能呢
@远走高飞可以试试哦