直接来干活上代码。就一个函数execCommand()；自己百度一下。
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
<script type="text/javascript">
var oDoc, sDefTxt;
function initDoc() {
oDoc = document.getElementById("textBox");
sDefTxt = oDoc.innerHTML;
if (document.compForm.switchMode.checked) { setDocMode(true); }
}
function formatDoc(sCmd, sValue) {
if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
}
function validateMode() {
if (!document.compForm.switchMode.checked) { return true ; }
alert("Uncheck \"Show HTML\".");
oDoc.focus();
return false;
}
function setDocMode(bToSource) {
var oContent;
if (bToSource) {
oContent = document.createTextNode(oDoc.innerHTML);
oDoc.innerHTML = "";
var oPre = document.createElement("pre");
oDoc.contentEditable = false;
oPre.id = "sourceText";
oPre.contentEditable = true;
oPre.appendChild(oContent);
oDoc.appendChild(oPre);
} else {
if (document.all) {
oDoc.innerHTML = oDoc.innerText;
} else {
oContent = document.createRange();
oContent.selectNodeContents(oDoc.firstChild);
oDoc.innerHTML = oContent.toString();
}
oDoc.contentEditable = true;
}
oDoc.focus();
}
function printDoc() {
if (!validateMode()) { return; }
var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
oPrntWin.document.open();
oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body οnlοad=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
oPrntWin.document.close();
}
</script>
<style type="text/css">
.intLink { cursor: pointer; }
img.intLink { border: 0; }
#toolBar1 select { font-size:10px; }
#textBox {
width: 540px;
height: 200px;
border: 1px #000000 solid;
padding: 12px;
overflow: scroll;
}
#textBox #sourceText {
padding: 0;
margin: 0;
min-width: 498px;
min-height: 200px;
}
#editMode label { cursor: pointer; }
</style>
</head>
<body οnlοad="initDoc();">
<form name="compForm" method="post" action="sample.php" οnsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
<input type="hidden" name="myDoc">
<div id="toolBar1">
<select οnchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
<option selected>- formatting -</option>
<option value="h1">Title 1 <h1></option>
<option value="h2">Title 2 <h2></option>
<option value="h3">Title 3 <h3></option>
<option value="h4">Title 4 <h4></option>
<option value="h5">Title 5 <h5></option>
<option value="h6">Subtitle <h6></option>
<option value="p">Paragraph <p></option>
<option value="pre">Preformatted <pre></option>
</select>
<select οnchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- font -</option>
<option>Arial</option>
<option>Arial Black</option>
<option>Courier New</option>
<option>Times New Roman</option>
</select>
<select οnchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- size -</option>
<option value="1">Very small</option>
<option value="2">A bit small</option>
<option value="3">Normal</option>
<option value="4">Medium-large</option>
<option value="5">Big</option>
<option value="6">Very big</option>
<option value="7">Maximum</option>
</select>
<select οnchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- color -</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
<select οnchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
<option class="heading" selected>- background -</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="black">Black</option>
</select>
</div>
<div id="toolBar2">
<img class="intLink" title="Clean" οnclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="https://img-blog.csdnimg.cn/2022010704215350513.gif" />
<img class="intLink" title="Print" οnclick="printDoc();" src="https://img-blog.csdnimg.cn/2022010704215441085.png">
<img class="intLink" title="Undo" οnclick="formatDoc('undo');" src="https://img-blog.csdnimg.cn/2022010704215484854.gif" />
<img class="intLink" title="Redo" οnclick="formatDoc('redo');" src="https://img-blog.csdnimg.cn/2022010704215411502.gif" />
<img class="intLink" title="Remove formatting" οnclick="formatDoc('removeFormat')" src="https://img-blog.csdnimg.cn/2022010704215451014.png">
<img class="intLink" title="Bold" οnclick="formatDoc('bold');" src="https://img-blog.csdnimg.cn/2022010704215448213.gif" />
<img class="intLink" title="Italic" οnclick="formatDoc('italic');" src="https://img-blog.csdnimg.cn/2022010704215559038.gif" />
<img class="intLink" title="Underline" οnclick="formatDoc('underline');" src="https://img-blog.csdnimg.cn/2022010704215541398.gif" />
<img class="intLink" title="Left align" οnclick="formatDoc('justifyleft');" src="https://img-blog.csdnimg.cn/2022010704215511927.gif" />
<img class="intLink" title="Center align" οnclick="formatDoc('justifycenter');" src="https://img-blog.csdnimg.cn/2022010704215547574.gif" />
<img class="intLink" title="Right align" οnclick="formatDoc('justifyright');" src="https://img-blog.csdnimg.cn/2022010704215630383.gif" />
<img class="intLink" title="Numbered list" οnclick="formatDoc('insertorderedlist');" src="https://img-blog.csdnimg.cn/2022010704215636318.gif" />
<img class="intLink" title="Dotted list" οnclick="formatDoc('insertunorderedlist');" src="https://img-blog.csdnimg.cn/2022010704215694122.gif" />
<img class="intLink" title="Quote" οnclick="formatDoc('formatblock','blockquote');" src="https://img-blog.csdnimg.cn/2022010704215684301.gif" />
<img class="intLink" title="Add indentation" οnclick="formatDoc('outdent');" src="https://img-blog.csdnimg.cn/2022010704215634102.gif" />
<img class="intLink" title="Delete indentation" οnclick="formatDoc('indent');" src="https://img-blog.csdnimg.cn/2022010704215778602.gif" />
<img class="intLink" title="Hyperlink" οnclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="https://img-blog.csdnimg.cn/2022010704215728742.gif" />
<img class="intLink" title="Cut" οnclick="formatDoc('cut');" src="https://img-blog.csdnimg.cn/2022010704215761977.gif" />
<img class="intLink" title="Copy" οnclick="formatDoc('copy');" src="https://img-blog.csdnimg.cn/2022010704215729071.gif" />
<img class="intLink" title="Paste" οnclick="formatDoc('paste');" src="https://img-blog.csdnimg.cn/2022010704215868174.gif" />
</div>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
<p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" οnchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
<p><input type="submit" value="Send" /></p>
</form>
</body>
</html>
255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
