<!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> <title></title> <link href="EditBase.css" rel="stylesheet" type="text/css" /> <style> .bc_blue { border: solid 1px blue; } .bc { border: solid 1px #2C3D5B; } .fontbold{font-weight:bold;} .w80{width:80px} .w100 { width: 100px; } .w200 { width: 200px; } .w600 { width: 600px; } .h300 { height: 100px; } .edti{border:solid 1px #ccc;width:700px;} .editContent{ background-color:White;padding:10px;word-wrap:break-word;height: auto; min-height: 200px;padding-top:15px;} .editTool{width:100%;height:26px;background-color:#D7E4F2;margin:0px;} .editTool div{ float:left;padding:3px 9px 3px 9px; cursor:pointer;text-decoration:none;color:Black } .editTool .curr{background-color:#81AAD1;} </style> </head> <body> <div class="edti"> <div class="editTool"> <div id="bold" class="fontbold" onclick='DivEdit.setBold()' title="加粗"> B </div> <div id="Underline" class="fontbold" onclick='DivEdit.setUnderline()' title="下划线"> <u>U</u></div> <div id="Italic" class="fontbold" onclick='DivEdit.setLtalic()' title="斜体"> <i>I</i></div> <div id="Insert1" class="fontbold" onclick="DivEdit.insertText('插入的值')" title="插入的值"> + </div> <div> <select id="fontSize" onchange="DivEdit.setFontSize()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select></div> <div> <select id="ForeColor" onchange="DivEdit.setForeColor()"> <option value="0">字体颜色</option> <option value="#ED0D08"></option> <option value="#000000">黑色</option> </select></div> <div> <select id="backColor"> <option value="0">背景颜色</option> </select></div> </div> <div id="divCon" onclick="DivEdit.setEditObj('divCon');" class="bc editContent" contenteditable="true"> </div> </div> </body> </html> <script src="http://files.cnblogs.com/wzq806341010/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="http://files.cnblogs.com/wzq806341010/rangy-core.js" type="text/javascript"></script> <script type="text/javascript"> var editObj = document.getElementById('divCon'); var editId = 'divCon'; var Caret = 0; var editorcurrentcaretset = {}; editObj.onkeyup = function () { DivEdit.saveEditorCaretPos(); DivEdit.setToolStyle(); } var DivEdit = { setEditObj: function (eId) { editId = eId; editObj = document.getElementById(eId); DivEdit.saveEditorCaretPos(); DivEdit.setToolStyle(); }, setToolStyle: function () { $(".editTool div").removeClass("curr"); if (document.queryCommandState("Bold")) { $("#bold").addClass("curr"); } if (document.queryCommandState("Underline")) { $("#Underline").addClass("curr"); } if (document.queryCommandState("Italic")) { $("#Italic").addClass("curr"); } }, setCommand: function (command) { editObj.focus(); if (rangy.getSelection().toString() == "") { DivEdit.getEditorCurrentCaret(); } document.execCommand(command); DivEdit.setToolStyle(); }, setBold: function () { DivEdit.setCommand("Bold"); }, setUnderline: function () { DivEdit.setCommand("Underline"); }, setLtalic: function () { DivEdit.setCommand("Italic"); }, setFontSize: function () { editObj.focus(); if (rangy.getSelection().toString() == "") { DivEdit.getEditorCurrentCaret(); } var color = document.getElementById("fontSize").value; document.execCommand('FontSize', false, color) }, setForeColor: function () { editObj.focus(); if (rangy.getSelection().toString() == "") { DivEdit.getEditorCurrentCaret(); } var size = document.getElementById("ForeColor").value; document.execCommand('ForeColor', false, size) }, getEditorCurrentCaret: function () { var sel = rangy.getSelection(); if (sel && sel.getRangeAt && sel.rangeCount) { var range = editorcurrentcaretset["c" + editId]; if (range) { sel.removeAllRanges(); sel.addRange(range); } } }, saveEditorCaretPos: function () { var sel = rangy.getSelection(); if (sel && sel.getRangeAt && sel.rangeCount) { editorcurrentcaretset["c" + editId] = sel.getRangeAt(0); } else { editorcurrentcaretset["c" + editId] = null; } }, insertText: function (html) { editObj.focus(); DivEdit.getEditorCurrentCaret(); sel = rangy.getSelection(); //如果兼容性不好：换成rangy.getSelection() //../js/rangy-core.js" if (sel && sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); node = range.createContextualFragment(html); //根据指定的文本创建节点 var lastNode = node.lastChild; //获得节点的最后一个字节点 range.insertNode(node); //将节点插入到范围内开头 range.setEndAfter(lastNode); //在指定的节点后结束范围 range.collapse(false); //折叠：true光标到开始，false：光标到结束 sel.removeAllRanges(); sel.addRange(range); sel.collapseToEnd(); } } } </script>