<!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="https://files.cnblogs.com/wzq806341010/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="https://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>
