菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码：
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="//cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet"> <link href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="/public/startbootstrap/css/modern-business.css" rel="stylesheet"> <link href="/public/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!--[if gte IE 9]><!--> <script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script> <!--<![endif]--> <!--[if lt IE 9]> <script src="//cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style> .com_form { width:100%; position:relative } .com_form p { height:28px; line-height:28px; position:relative; margin-top:10px; } span.emotion { width:42px; height:20px; padding-left:20px; cursor:pointer } span.emotion:hover { background-position:2px -28px } .qqFace { margin-top:4px; background:#fff; padding:2px; border:1px #dfe6f6 solid; } .qqFace table td { padding:0px; } .qqFace table td img { cursor:pointer; border:1px #fff solid; } .qqFace table td img:hover { border:1px #0066cc solid; } </style> </head> <body> <div class="panel panel-success"> <div class="panel-heading"><h4 class="panel-title">qq face</h4></div> <div class="panel-body" id="showContainer"> </div> </div> <div class="com_form"> <textarea class="form-control" id="saytext" name="deblock_udid" rows="6" style="min-width:90%"><ins>哪有什么岁月静好 安然若素</ins> 只是有人在为你负重前行[em_71] 感激愧疚 此刻才深有体会[em_75] 背后的负重前行的人是有多么不易 </textarea> <p><div class="btn-group pull-right"> <button type="button" class="btn btn-success" id="preview">效果预览</button> <button type="button" class="btn btn-success" id="submit">提交发布</button> </div> <span class="emotion">表情<span class="caret"></span></span> </p> </body> <script type="text/javascript" src="/public/jquery/jquery.qqFace.js"></script> <script type="text/javascript"> $(function(){ $('.emotion').qqFace({id:'facebox',assign:'saytext',path:'arclist/'}); $("#preview").click(function(){ var str = $("#saytext").val(); $("#showContainer").html(replace_em(str,faces)); }); $("#submit").click(function(){ var str = $("#saytext").val(); $("#showContainer").html(replace_em_db(str,faces)); }); }); function replace_em(str,faces){ str = str.replace(/<br>/g,'<br/>') .replace(/\[em_([0-9]*)\]/g, function(a,b,c,d){ return '<img src="'+faces[b]+'" border="0" />'; }); return str; } function replace_em_db(str,faces){ str = str .replace(/\</g,'<').replace(/\>/g,'>') .replace(/<br>/g,'<br/>') ; return str; } </script> </html>
运行结果