Saber 酱的抱枕

可以无压力用在基于WordPress原生评论上。

    <script type="text/javascript">
        var yanwenziDiv=document.createElement('div');
        yanwenziDiv.id='ywz-wrapper';
        yanwenziDiv.innerHTML="<br />      <a class=\"ywzbutton ds-toolbar-button\" id=\"ywzbutton\">颜文字</a> <br /> <div class=\"biaoqing_box\">      <a>(⌒▽⌒)</a><a>（￣▽￣）</a><a>(=・ω・=)</a><a>(｀・ω・´)</a><a>(〜￣△￣)〜</a><a>(･∀･)</a><a>(°∀°)ﾉ</a><a>(￣3￣)</a><a>╮(￣▽￣)╭</a><a>( ´_ゝ｀)</a><a>←_←</a><a>→_→</a><a>(&amp;lt;_&amp;lt;)</a><a>(&amp;gt;_&amp;gt;)</a><a>(;¬_¬)</a><a>(\"▔□▔)/</a><a>(ﾟДﾟ≡ﾟдﾟ)!?</a><a>Σ(ﾟдﾟ;)</a><a>Σ( ￣□￣||)</a><a>(´；ω；`)</a><a>（/TДT)/</a><a>(^・ω・^ )</a><a>(｡･ω･｡)</a><a>(●￣(ｴ)￣●)</a><a>ε=ε=(ノ≧∇≦)ノ</a><a>(´･_･`)</a><a>(-_-#)</a><a>（￣へ￣）</a><a>(￣ε(#￣) Σ</a><a>ヽ(`Д´)ﾉ</a><a>(╯°口°)╯(┴—┴</a><a>（#-_-)┯━┯</a><a>_(:3」∠)_</a>        </div> <br /> ";
        document.getElementsByClassName('comment-form-comment')[0].appendChild(yanwenziDiv);
        var commentArea=document.getElementById("comment");//获取输入框
        var yanwenziBox=document.getElementsByClassName("biaoqing_box")[0];//获取颜文字容器
        var yanwenziText=yanwenziBox.getElementsByTagName("a");//获取颜文字的数组
        document.getElementById("ywzbutton").onmouseover=function  () {
            yanwenziBox.style.display="block";
        }
        for (var i = yanwenziText.length - 1; i >= 0; i--) {
            yanwenziText[i].addEventListener('click', function(){
                commentArea.value=commentArea.value+this.innerText;
                yanwenziBox.style.display="none";
            },false);
        };
    </script>
    <style type="text/css">
    .biaoqing_box{display: none;width: 650px;height:150px;background: #fff;position: absolute;}
    .biaoqing_box a{display: block;float: left;font-size:12px;padding: 3px 5px;margin: 5px 5px;line-height: 16px;border:none;border-radius: 5px;text-decoration: none;}
    .biaoqing_box a:hover{color: #fff;background: #4BCBED;}
    #ywzbutton{display: block;font-size: 12px; background: none !important;width: 66px !important;line-height: 15px;border:none;}
    </style>

js的主要功能，首先是输出颜文字部分的html代码（直接改模板也可以），输出后只显示一个颜文字的按钮。之后，鼠标经过这个按钮的时候展开颜文字区域，最后，点击颜文字会把颜文字追加到评论框内。

其实一开始我是想添加到我网站的多说评论框上的，后来失败了，改成了在WordPress默认评论上可用的，不过思路没变。

说说多说的这些破事吧：

1.因为多说没有本地模板，所以我才用了添加div节点这个麻烦的方法。
2.css无法生效，除非是生成的时候就写到标签内。
3.评论的复杂性。多说有一个textarea，但是输入的文字并不在这里面，而是添加到了一个隐藏起来的pre标签中。我们输入的文字实际上是出现在pre标签中的。然而，用js把颜文字追加到pre里面，提交的时候却提示没有输入内容。所以，可能真正提交上去的也不是pre的内容，而是一种我们所不知道的方式。
4.如果你输入一些内容然后不提交，关闭或者刷新页面，之前输入的内容还在。问题是，在页面的元素中完全找不到这些内容。所以最终我没能搞定多说，败下阵来了。

给wordpress评论框添加颜文字