如何专注于 <p> 在内容可编辑的div中

Question

我正在使用contenteditable div来进行丰富的编辑。 我现在的问题是，在嵌入Instagram框架后，我无法立即将插入符放置在<p>上。 我尝试的是在嵌入Instagram框架后创建新的<p>并专注于此。 但这是行不通的。

有人知道这个问题的解决方案吗？

我以JSFiddle为例 （我将嵌入代码之一放在CSS块中）

Answer 1

尽管contenteditable 规范指出应该可以将光标放置在一个空的p标签中，如下所示：

<div>aaa<p>|</p>bbb</div>

Webkit （Safari）和Blink （Chrome）当前不支持。 更多信息在这里 。

幸运的是，有一个相对简单的解决方法。 我们只需要在p标签内获取一些内容，就可以将光标放在此处。 一种选择是附加一个包含零宽度空格的textnode。 这种方法有时对于涉及内联标签的情况很有用。

对于您而言，最有效的解决方案是将换行符简单地添加到段落中。 可内容编辑的实现通常将块标记内的换行符视为“临时保持节点”，并且在主要浏览器中的默认处理相同。 初始结果应如下所示：

<div>aaa<p>|<br></p>bbb</div>

并且，一旦您开始键入，BR将被替换（浏览器会自动执行此操作）：

<div>aaa<p>inner text|</p>bbb</div>

即使删除内部文本，浏览器也应自动重新插入换行符，这样您始终可以将光标移回内部。

我在这里用示例分叉并更新了您的jsfiddle。