网页编辑器实现原型
<!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>
这个更完善，表情是基于discuz的表情
<!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").on('click',function(){ toggleSmile(); }); $('#smiliesdiv_table').on('click',function(){ $("#smiliesdiv_table").toggle(); }); }); function insertSmiley(smilieid) { //checkFocus(); var src = $('#smilie_' + smilieid).attr('src'); var code = $('#smilie_' + smilieid).attr('alt'); insertText('<img src="' + src + '" border="0" smilieid="' + smilieid + '" alt="" />'); toggleSmile(); } function toggleSmile(){ $("#smiliesdiv_table").toggle(); } function insertText(html){ $("#editableText").append(html); } function checkForm(){ var html = $("#editableText").html(); if(html == ''){ alert('请输入内容'); return false; } $("#textarea").html(html); alert($("#textarea").html()); return true; } </script> </head> <body> <fieldset> <legend>编辑区</legend> <div> <form id="form" onsubmit="checkForm();"> 字体颜色： <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> <textarea id="textarea" style="display:none"></textarea> <input type="submit" value="提交" /> </form> <button id='setpic'>表情</button> </div> <br/> <div id="editableText" contenteditable="true" style="width:400px;min-height:100px;border:2px dashed #ccc"></div> <table id="smiliesdiv_table" cellpadding="0" cellspacing="0" style="display:none;"> <tbody> <tr> <td onclick="insertSmiley(1)" id="e_smilie_1_td" initialized="true"> <img id="smilie_1" width="20" height="20" src="static/image/smiley/default/smile.gif" alt=":)"></td> <td onclick="insertSmiley(2)" id="e_smilie_2_td" initialized="true"> <img id="smilie_2" width="20" height="20" src="static/image/smiley/default/sad.gif" alt=":("></td> <td onclick="insertSmiley(3)" id="e_smilie_3_td" initialized="true"> <img id="smilie_3" width="20" height="20" src="static/image/smiley/default/biggrin.gif" alt=":D"></td> <td onclick="insertSmiley(4)" id="e_smilie_4_td"> <img id="smilie_4" width="20" height="20" src="static/image/smiley/default/cry.gif" alt=":'("></td> <td onclick="insertSmiley(5)" id="e_smilie_5_td"> <img id="smilie_5" width="20" height="20" src="static/image/smiley/default/huffy.gif" alt=":@"></td> <td onclick="insertSmiley(6)" id="e_smilie_6_td"> <img id="smilie_6" width="20" height="20" src="static/image/smiley/default/shocked.gif" alt=":o"></td> <td onclick="insertSmiley(7)" id="e_smilie_7_td"> <img id="smilie_7" width="20" height="20" src="static/image/smiley/default/tongue.gif" alt=":P"></td> <td onclick="insertSmiley(8)" id="e_smilie_8_td"> <img id="smilie_8" width="20" height="20" src="static/image/smiley/default/shy.gif" alt=":$"></td> </tr> <tr> <td onclick="insertSmiley(9)" id="e_smilie_9_td"> <img id="smilie_9" width="20" height="20" src="static/image/smiley/default/titter.gif" alt=";P"></td> <td onclick="insertSmiley(10)" id="e_smilie_10_td" initialized="true"> <img id="smilie_10" width="20" height="20" src="static/image/smiley/default/sweat.gif" alt=":L"></td> <td onclick="insertSmiley(11)" id="e_smilie_11_td" initialized="true"> <img id="smilie_11" width="20" height="20" src="static/image/smiley/default/mad.gif" alt=":Q"></td> <td onclick="insertSmiley(12)" id="e_smilie_12_td" initialized="true"> <img id="smilie_12" width="20" height="20" src="static/image/smiley/default/lol.gif" alt=":lol"></td> <td onclick="insertSmiley(13)" id="e_smilie_13_td" initialized="true"> <img id="smilie_13" width="20" height="20" src="static/image/smiley/default/loveliness.gif" alt=":loveliness:"></td> <td onclick="insertSmiley(14)" id="e_smilie_14_td" initialized="true"> <img id="smilie_14" width="20" height="20" src="static/image/smiley/default/funk.gif" alt=":funk:"></td> <td onclick="insertSmiley(15)" id="e_smilie_15_td" initialized="true"> <img id="smilie_15" width="20" height="20" src="static/image/smiley/default/curse.gif" alt=":curse:"></td> <td onclick="insertSmiley(16)" id="e_smilie_16_td"> <img id="smilie_16" width="20" height="20" src="static/image/smiley/default/dizzy.gif" alt=":dizzy:"></td> </tr> <tr> <td onclick="insertSmiley(17)" id="e_smilie_17_td"> <img id="smilie_17" width="20" height="20" src="static/image/smiley/default/shutup.gif" alt=":shutup:"></td> <td onclick="insertSmiley(18)" id="e_smilie_18_td"> <img id="smilie_18" width="20" height="20" src="static/image/smiley/default/sleepy.gif" alt=":sleepy:"></td> <td onclick="insertSmiley(19)" id="e_smilie_19_td" initialized="true"> <img id="smilie_19" width="20" height="20" src="static/image/smiley/default/hug.gif" alt=":hug:"></td> <td onclick="insertSmiley(20)" id="e_smilie_20_td" initialized="true"> <img id="smilie_20" width="20" height="20" src="static/image/smiley/default/victory.gif" alt=":victory:"></td> <td onclick="insertSmiley(21)" id="e_smilie_21_td"> <img id="smilie_21" width="20" height="20" src="static/image/smiley/default/time.gif" alt=":time:"></td> <td onclick="insertSmiley(22)" id="e_smilie_22_td"> <img id="smilie_22" width="20" height="20" src="static/image/smiley/default/kiss.gif" alt=":kiss:"></td> <td onclick="insertSmiley(23)" id="e_smilie_23_td" initialized="true"> <img id="smilie_23" width="20" height="20" src="static/image/smiley/default/handshake.gif" alt=":handshake"></td> <td onclick="insertSmiley(24)" id="e_smilie_24_td"> <img id="smilie_24" width="20" height="20" src="static/image/smiley/default/call.gif" alt=":call:"></td> </tr> </tbody> </table> </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"
