问 AI 一个 contenteditable 的问题半天没答案

问题

当你有一个 contentEditable 为 true 的元素，在按顺序点击 Enter 时，获取到的 innerText 是正常的：

html 复制代码

<div class="code-editor" contenteditable="true" data-placeholder="Start typing your code here...">
	1
	<div>2</div>
	<div>3</div>
</div>

上面的 innerText 是 '1\n2\n3'。

但是！当你输入 1、Enter、2，然后按方向键↑，然后再输入 Enter，元素则会变成这样：

html 复制代码

<div class="code-editor" contenteditable="true" data-placeholder="Start typing your code here...">
	1
	<div>
		<br />
		<div>2</div>
	</div>
</div>

根据肉眼观察，你得到的应该是 '1\n\n2'，但是实际上，通过 innerText 得到的是 '1\n\n\n2'。（顺带一提，当你在这个元素里面全选复制，拿到的是正常的 '1\n\n2'）

我拿着这问题问了两个 AI，结果都在胡扯。首先它们就猜不对第二段 HTML 输出的 innerText，它们的答案都是很符合直觉的 '1\n\n2'。其实这个时候就已经凉了一大半了，接着我强行告诉它第二个结构的输出，问这种情况怎么获得正常的 \n，结果教我用正则去除重复两次以上的 \n，但实际上用户就是有可能多次 Enter，显然无效。

在习惯了 AI 时代的我最后才想起返璞归真，去 stackoverflow 上找答案，结果是，十分高效，立刻就找到了。

解 1

ts 复制代码

contentEditable = "plaintext-only";

暴力 plaintext-only，设置之后修改内容只会插入 <br>，不会插入 <div>。缺点自然是如果你在粘贴富文本时会强制转为纯文本。

解 2

在 contenteditable 添加 display:inline-block;。可以说正常来说你根本想不到，也很难找到资料推理出向 contenteditable 添加 display:inline-block; 就能做到让用户输入不再插入 <div>。

解 3

ts 复制代码

document.addEventListener("keydown", (event) => {
	if (event.key === "Enter") {
		document.execCommand("insertLineBreak");
		event.preventDefault();
	}
});

在用户 Enter 时直接 preventDefault，用 execCommand 手动帮用户插入 \n。这个方法倒是"可以想象"，execCommand 确实是一个神奇的函数，只可惜我还没了解它，它就已经处于弃用状态，也不知道有什么替代方案。

结语

关键时刻，还得是 stackoverflow，AI 问半天都是错的，太偏门的问题 AI 只会给你幻觉，歇歇吧。不要小看在 stackoverflow 积累的真正的人的智能 😏

顺便这个问题是在实现 AI 提醒的时候遇到的，顺道还遇到了些 CSS 问题，例如两个叠在一起元素明明行高是一样的，但是用 \n 换行的那个元素偏偏总比 contentEditable 的元素高一点，问 AI 同样没结果，最后乱搞 CSS 碰巧解决了......JavaScript 是挺简单的，但是 CSS 和浏览器接口，真的好难啊！

问 AI 一个 contenteditable 的问题半天没答案

问题

解 1

解 2

解 3

结语

参考