给wordpress添加简单文字编辑器,解除评论代码限制、添加颜色选择器、实现淡入淡出效果

怎么说呢,反正是显得没事干瞎折腾,本博主不懂什么代码,所以或许写的代码不够简洁,但总之这是个路子,如果你是内行当然可以改进代码。

我把编辑器也给默认隐藏了,点击评论框便出现,再点击则再次隐藏~你也可以选择更改设置保留编辑器不隐藏只让表情和颜色默认隐藏。关于淡入淡出的时间你也可以自行修改调整。

(如果你只用表情的话,建议点击评论框出现表情,点击评论框外隐藏表情(加上淡入淡出效果),而不是仅仅点击评论框。>>点击阅读《设置wordpress评论框表情特效:点击评论框内和框外实现表情显现和隐藏并淡入淡出》

首先要解除对游客评论的代码限制
本文需要解除的代码标签有:a标签的target属性、img标签、font标签,其他标签如粗体、斜体、下划线、删除线请检查自行添加或去掉文件中的注释。

修改方法:打开wp-includes目录中的kses.php文件

查找“$allowedtags = array”,在后面添加或修改,这个看上面已有的标签比葫芦画瓢都会改吧,注意括号的对应关系和逗号的使用。
添加编辑器代码
打开主题文件中的评论模板comments.php(一般应该都是这个,如果你的主题比较奇葩的话或许在其他地方)。

在合适的地方添加代码,这个根据个人主题情况自行排序,需要加的有表情、颜色选择器、编辑器栏,无非是在评论框附近,评论框的关键代码是“<textarea name="comment" id="comment" ****************></textarea>”

下面以我的主题情况逐步讲解。

我放置代码的顺序是:【评论框id="comment"】-【表情id="smiley"】【编辑器id="editor_tools"(颜色选择器id="fontcolor")-(编辑器栏目id="editor")】:



  1. <p><textarea name="comment" id="comment" tabindex="4"></textarea></p>   

  2.         <div id="smiley"><?php include(TEMPLATEPATH . '/includes/smiley.php'); ?></div>   

  3. <div id="editor_tools">   

  4. <div id="fontcolor">   

  5. <a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></a>   

  6. <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a>   

  7. <a href="javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a>   

  8. <a href="javascript:SIMPALED.Editor.magenta()" style="background-color: magenta"></a>   

  9. <a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>   

  10. <a href="javascript:SIMPALED.Editor.chocolate()" style="background-color: chocolate"></a>   

  11. <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>   

  12. <a href="javascript:SIMPALED.Editor.aquamarine()" style="background-color: aquamarine"></a>   

  13. <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>   

  14. <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>   

  15. <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>   

  16. <a href="javascript:SIMPALED.Editor.thistle()" style="background-color: thistle"></a>   

  17. <a href="javascript:SIMPALED.Editor.brown()" style="background-color: brown"></a>   

  18. <a href="javascript:SIMPALED.Editor.peru()" style="background-color: peru"></a>   

  19. <a href="javascript:SIMPALED.Editor.deeppink()" style="background-color: deeppink"></a>   

  20. <a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>   

  21. <a href="javascript:SIMPALED.Editor.slategray()" style="background-color: slategray"></a>   

  22. <a href="javascript:SIMPALED.Editor.tomato()" style="background-color: tomato"></a>   

  23. </div>   

  24. <p><div id="editor">   

  25. <a href="javascript:;" id="comment-smiley"><b>表情</b></a>   

  26. <a href="javascript:SIMPALED.Editor.strong()"><b>粗体</b></a>   

  27. <a href="javascript:SIMPALED.Editor.em()"><b>斜体</b></a>   

  28. <a href="javascript:" id="font-color"><b>颜色</b></a>   

  29. <a href="javascript:SIMPALED.Editor.quote()"><b>引用</b></a>   

  30. <a href="javascript:SIMPALED.Editor.ahref()"><b>链接</b></a>   

  31. <a href="javascript:SIMPALED.Editor.del()"><b>删除线</b></a>   

  32. <a href="javascript:SIMPALED.Editor.underline()"><b>下划线</b></a>   

  33. <a href="javascript:SIMPALED.Editor.code()"><b>插代码</b></a>   

  34. <a href="javascript:SIMPALED.Editor.img()"><b>插图片</b></a></div>   

  35. </div></p>  



其中的颜色可自行修改,请保持和JS文件进行同步修改,如果你的主题不支持哪种颜色自己去找喜欢的类型替换,提供一个网页颜色选择器地址:
http://www.qqtz.com/hao/color.htm
CSS样式(参考):(请根据个人情况自行修改)
添加CSS代码到style.css文件:



  1. /**评论框编辑器**/  

  2. #editor{width:100%px;height:26px;line-height:26px;border:1px #e0e0e0 solid;border-radius:2px 2px 0 0;box-shadow:0 2px 10px #eee,inset 0 -2px 10px #eee;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;z-index:99999;}   

  3. #editor a{color:#777;display:inline-block;padding:0 6px;height:26px;border-right:1px solid #ddd;}   

  4. #editor a:hover{color:#333;text-decoration:none;}   

  5. #fontcolor{width:446px;height:20px;line-height:20px;border:1px #e0e0e0 solid;z-index:99999;}   

  6. #fontcolor a{display:inline-block;height:20px;width:21px;}  



jQuery代码:
添加到你的js文件中或者自己新建个js文件,不要忘记在头文件模板中引用:



  1. //评论框编辑器   

  2. $(document).ready(function () {   

  3. $("#smiley").hide(500);   

  4. $("#comment-smiley").click(function(){   

  5. $("#smiley").toggle(500);   

  6. });   

  7. });   

  8. $(document).ready(function () {   

  9. $("#fontcolor").hide(500);   

  10. $("#font-color").click(function(){   

  11. $("#fontcolor").toggle(500);   

  12. });   

  13. });   

  14. $(document).ready(function () {   

  15. $("#editor").hide(500);   

  16. $("#comment").click(function(){   

  17. $("#editor").toggle(500);   

  18. });   

  19. });   

  20. $(document).ready(function () {   

  21. $("#smiley").toggle();   

  22. $("#comment").click(function(){   

  23. $("#smiley").hide(500);   

  24. });   

  25. });   

  26. $(document).ready(function () {   

  27. $("#fontcolor").toggle();   

  28. $("#comment").click(function(){   

  29. $("#fontcolor").hide(500);   

  30. });   

  31. });   

  32. $(document).ready(function () {   

  33. $("#smiley").hide();   

  34. $("#comment").click(function(){   

  35. });   

  36. });   

  37. $(document).ready(function () {   

  38. $("#fontcolor").hide();   

  39. $("#comment").click(function(){   

  40. });   

  41. });   

  42. $(function() {   

  43.     function addEditor(a, b, c) {   

  44.         if (document.selection) {   

  45.             a.focus();   

  46.             sel = document.selection.createRange();   

  47.             c ? sel.text = b + sel.text + c: sel.text = b;   

  48.             a.focus()   

  49.         } else if (a.selectionStart || a.selectionStart == '0') {   

  50.             var d = a.selectionStart;   

  51.             var e = a.selectionEnd;   

  52.             var f = e;   

  53.             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);   

  54.             c ? f += b.length + c.length: f += b.length - e + d;   

  55.             if (d == e && c) f -= c.length;   

  56.             a.focus();   

  57.             a.selectionStart = f;   

  58.             a.selectionEnd = f   

  59.         } else {   

  60.             a.value += b + c;   

  61.             a.focus()   

  62.         }   

  63.     }   

  64.     var g = document.getElementById('comment') || 0;   

  65.     var h = {   

  66.         strong: function() {   

  67.             addEditor(g, '<strong>', '</strong>')   

  68.         },   

  69.         em: function() {   

  70.             addEditor(g, '<em>', '</em>')   

  71.         },   

  72.         del: function() {   

  73.             addEditor(g, '<del>', '</del>')   

  74.         },   

  75.         underline: function() {   

  76.             addEditor(g, '<u>', '</u>')   

  77.         },   

  78.         quote: function() {   

  79.             addEditor(g, '<blockquote>', '</blockquote>')   

  80.         },   

  81.         ahref: function() {   

  82.             var a = prompt('请输入链接地址', 'http://');   

  83.             var b = prompt('请输入要显示成文字链接的描述','');   

  84.             if (a) {   

  85.                 addEditor(g, '<a target="_blank" href="' + a + '" rel="external">' + b + '</a>','')   

  86.             }   

  87.         },   

  88.         img: function() {   

  89.             var a = prompt('请输入图片地址', 'http://');   

  90.             if (a) {   

  91.                 addEditor(g, '<img src="' + a + '" alt="" />','')   

  92.             }   

  93.         },   

  94.         code: function() {   

  95.             addEditor(g, '<code>', '</code>')   

  96.         },   

  97.         red: function() {   

  98.             addEditor(g, '<font color="red">', '</font>')   

  99.         },   

  100.         green: function() {   

  101.             addEditor(g, '<font color="green">', '</font>')   

  102.         },   

  103.         blue: function() {   

  104.            addEditor(g, '<font color="blue">', '</font>')   

  105.         },   

  106.         magenta: function() {   

  107.             addEditor(g, '<font color="magenta">', '</font>')   

  108.         },   

  109.         yellow: function() {   

  110.            addEditor(g, '<font color="yellow">', '</font>')   

  111.         },   

  112.         chocolate: function() {   

  113.            addEditor(g, '<font color="chocolate">', '</font>')   

  114.         },   

  115.         black: function() {   

  116.            addEditor(g, '<font color="black">', '</font>')   

  117.         },   

  118.         aquamarine: function() {   

  119.            addEditor(g, '<font color="aquamarine">', '</font>')   

  120.         },   

  121.         lime: function() {   

  122.            addEditor(g, '<font color="lime">', '</font>')   

  123.         },   

  124.         fuchsia: function() {   

  125.           addEditor(g, '<font color="fuchsia">', '</font>')   

  126.         },   

  127.         orange: function() {   

  128.            addEditor(g, '<font color="orange">', '</font>')   

  129.         },   

  130.         thistle: function() {   

  131.             addEditor(g, '<font color="thistle">', '</font>')   

  132.         },   

  133.         brown: function() {   

  134.             addEditor(g, '<font color="brown">', '</font>')   

  135.         },   

  136.         peru: function() {   

  137.             addEditor(g, '<font color="peru">', '</font>')   

  138.         },   

  139.         deeppink: function() {   

  140.             addEditor(g, '<font color="deeppink">', '</font>')   

  141.         },   

  142.         purple: function() {   

  143.             addEditor(g, '<font color="purple">', '</font>')   

  144.         },   

  145.         slategray: function() {   

  146.             addEditor(g, '<font color="slategray">', '</font>')   

  147.         },   

  148.         tomato: function() {   

  149.             addEditor(g, '<font color="tomato">', '</font>')   

  150.         }   

  151.     };   

  152.     window['SIMPALED'] = {};   

  153.     window['SIMPALED']['Editor'] = h   

  154. });   



括号里的数字500是淡入淡出是时间500毫秒,可自行修改。其中的颜色可自行修改,请保持和comments.php文件中的编辑器进行同步修改。

关于js代码里的$(document).ready(function () 事件:

我的效果是:

1、点击评论框隐藏或展示编辑器栏。

2、如果显示了表情或颜色选择器或者表情和颜色选择器同时显示,点击评论框则全部隐藏。

3、表情和颜色选择互不影响。

我已经说过了,我不懂代码,或许自己的方法欠佳显得啰嗦了,如果你懂,可以自己改进。根据括号里的ID名字请自行修改或删除以达到你要求的效果。

最后修改:2019 年 06 月 06 日 08 : 22
如果觉得我的文章对你有用,请随意赞赏

发表评论