标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>富文本编辑器</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script> function setpic(){ alert(‘xxx‘); $("#editableText").append(‘<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" />‘); } $(function(){ $("#setpic").on(‘click‘,function(){ setpic(); }); }); </script> </head> <body> <fieldset> <legend>编辑区</legend> <div> <form> 字体颜色： <select onchange="setFontColor(this)"> <option value="black">Black </option> <option value="red">Red </option> <option value="green">Green </option> <option value="blue">Blue </option> </select> 字体样式： <select onchange="setFontStyle(this)"> <option value="bold">Bold </option> <option value="italic">Italic </option> <option value="underline">Underline </option> <option value="striketthrough">StriketThrough </option> </select> 字体名称： <select onchange="setFontFamily(this)"> <option value="serif">Serif </option> <option value="sans-serif">Sans-serif </option> <option value="monospace">Monospace </option> <option value="comic sans ms">Comic Sans </option> </select> </form> <button id=‘setpic‘>设置图片</button> </div> <br/> <div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div> </fieldset> <script type="text/javascript"> function setFontColor(obj) { document.execCommand("forecolor",false,obj.value); } function setFontStyle(obj) { document.execCommand(obj.value,false,null); } function setFontFamily(obj) { document.execCommand("fontname",false,obj.value); } </script> </body> </html> </body> </html>
网页编辑器原来是专业实现的，
contenteditable="true"
标签：
原文地址：http://www.cnblogs.com/james888/p/5531836.html
