contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作

最新推荐文章于 2026-07-21 16:24:40 发布

原创

最新推荐文章于 2026-07-21 16:24:40 发布 · 9.6k 阅读

本文详细介绍了HTML的contentEditable属性，用于使元素变为可编辑状态，常见于富文本编辑器。文章讨论了在不同浏览器中回车时生成标记的差异，并展示了如何通过document.execCommand命令改变新建段落的方式。此外，还探讨了window.getSelection()用于获取用户选择文本的方法，以及如何在可编辑区域进行光标操作，如插入文本、获取光标位置、移动光标和记录恢复光标位置。

这周碰到一个东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等

HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,table,p,span,body,等等很多元素中输入内容．

设置一个容器为可编辑区域:设置contentEditable属性

<body>
	<p contentEditable style="border: 1px solid red;">grsd</p>
	<div  contentEditable style="border: 1px solid red;">rsdgsdg </div>
</body>

在这里插入图片描述

设置placeholder：
这个不像表单一样，给属性加上placeholder属性指定值就可以了，还需要配合特殊的样式:empty做设置

	<style type="text/css">
			.content:empty::before {
    
    
				content: attr(placeholder);
				font-size: 14px;
				color: #CCC;
				line-height: 21px;
				padding-top: 20px;
			}
			.content {
    
    
				border: 1px solid black;
			}
		</style>
	<body>
		<div contentEditable class="content" placeholder="请输入不少于150字"></div>
	</body>

在这里插入图片描述

回车时，在标记生成上的不同点

因为各个浏览器在标记生成上的不同，因此跨浏览器使用 contenteditable 一直以来都是痛点，例如一些看起来十分简单的事情，如：当你按下Enter/Return键在可编辑区域中创建一个新的文本行时，不同主流浏览器对此有不同处理(Firefox 插入<br>、IE/Opera将使用<p>、 Chrome/Safari 将使用 <div>）幸运的是在现代浏览器中，这些不同都趋于一致了。截止到Firefox 60，火狐开始使用<div>元素来包裹新生成的文本行，以与Chrome, modern Opera, Edge, and Safari.的行为趋于一致

改变回车时插入的标签：
如果你想使用不同的方式创建新的段落,上面所有浏览器都支持document.execCommand方法，该方法提供的 defaultParagraphSeparator 命令能够让你以不同的方式创建新的段落例如, 使用 <p> 元素:

document.execCommand("defaultParagraphSeparator", false, "p");

现在在编辑器中按回车就变成p标签了
在这里插入图片描述

document.execCommand的强大：

上面只是document.execCommand的一个命令演示

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。
大多数命令影响document的 selection（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用 execCommand() 将影响当前活动的可编辑元素。

命令很多，这里就不列举出来，具体可以参考官方文档document.execCommand命令大全

基于document.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);
					document.execCommand("defaultParagraphSeparator", false, "div");
				} 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 onload="initDoc();">
		<form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
			<input type="hidden" name="myDoc">
			<div id="toolBar1">
				<select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">