jQuery 开始在标签之间输入

Question

我正在制作一个所见即所得的编辑器，我想要做的是在 enter 键上 preventDefault，相反，当按下 enter 时，它会创建一个带有标签 <div></div> 的新行。所以基本上每个<div> 都是一行。我不知道如何创建 <div> 并让指针在每个 <div> 之间开始，如下所示：

<div>Line one here</div> // Press enter
<div>Start typing next line here</div> // When you press Enter, it creates a div and automatically when you start typing its in between the tags.

然后在您再次按新行后，它只会为下一行创建另一个<div>...有人可以帮忙吗？我不需要preventDefault 的帮助，只需要按下 Enter 键时要执行的新操作。

Answer 1

从表面上看，这应该不会太难。但是，浏览器的不一致会导致问题。

基本做法是：

1. 捕获 Enter 按键并阻止浏览器默认行为。到目前为止很容易。
2. 在大多数浏览器中使用 DOM Range 或在 IE 中使用 TextRange 从浏览器的选择对象中获取当前插入符号的位置。在 IE 中略显繁琐。
3. 如果插入符号位于当前<div> 的末尾，则创建一个新的<div>，否则拆分当前<div>。这不是微不足道的（想想如果插入符号位于 <div> 内的嵌套内联元素内，您需要做什么）但仍然可行。
4. 再次使用 Range 或 TextRange，将插入符号放在新 <div> 的开头。这就是它开始出错的地方：WebKit won't let you place the caret at the start of a text node，而 IE 对此也有自己的问题，我现在忘记了其中的细节。

这很难。看看大编辑（TinyMCE、CKEditor）如何处理这个问题。

Answer 2

在 jQuery 中创建一个 div：

$('<div/>)

放在当前div之后（“obj”应该由event.target在keypress中给出）

$('<div/>).insertAfter(obj);

到目前为止，它是独立于浏览器的。

要放置指针，您可以使用 TextRanges。它们使您能够移动指针。有两种不同的实现：

IE：http://msdn.microsoft.com/en-us/library/dd347140%28v=VS.85%29.aspx
其他：http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html