自己动手制作编辑器
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> #textarea{ border:solid 1px #ccc; width:300px; height:200px; padding:4px; } .img{cursor:pointer;} </style> </head> <body> <img src="./emoji/0x1f4a3.png" alt="" class="img" /> <img src="./emoji/0x1f3c3.png" alt="" class="img" /> <img src="./emoji/0x1f4af.png" alt="" class="img" /> <div> <div contenteditable="true" id="textarea" cols="30" rows="10"></div> </div> <script type="text/javascript"> $(function(){ $(".img").click(function(){ var text=$("#textarea").html(); var src=$(this).attr("src"); var img="<img src='"+src+"' />"; $("#textarea").html(text+img); }); }); </script> </body> </html>
效果如图
