javascript - Jquery 和 Contenteditable - 强制换行显示为单个空格

Question

我找到了让所有浏览器在按“enter”时阻止默认事件的方法，以便显示换行符“\n”。原始代码在这里:http://jsfiddle.net/FhEf6/3/

它工作得很好，但是当我将其包含在我自己的网站上时(使用 Jquery 1.7.2)，它确实显示了新的“\n”，就像一个空格一样。我很好奇，因为在源代码中它正确地显示了换行符。

另一件事是，如果我尝试替换为 <br>而不是换行符... <br>完全像这样显示(查看源代码，<,> 被它们各自的 htmlentities 替换...)。

这是一件很奇怪的事情，因为原始代码在 jsfiddle 中运行得很好，而且我没有做任何更改。我在这里读到一个问题( View Post )，但我认为这不是一个很好的解决方案。

编辑:

Ups!...我需要在容器上使用“white-space:pre”。好吧，但是...我还是不明白，为什么会这样？，换行就是换行，还是不是？

Answer 1

它仍然是 HTML，因此使用换行符不起作用。坚持使用
标签。

这不适用于您当前的代码，因为它是一个元素节点，而不是文本节点。

我建议使用Rangy适用于所有内容可编辑的项目。

我这里有一个几乎可行的解决方案: http://jsfiddle.net/7A8Xw/ (在 chrome 中，它会插入中断，但如果您在内容末尾按 Enter 键，它不会将光标移动到 br 之后(如果按两次则有效))