Question

我正在制作WYSIWYG编辑器，我想要做的是在输入键上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

在jQuery中创建一个div：

$('<div/>)

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

$('<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

Answer 2

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

基本方法是：

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

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

jQuery开始在标签之间输入

2 个答案: