如何在 contenteditable div 中关注 <p>
How to focus on <p> in contenteditable div
我正在使用 contenteditable div 制作丰富的编辑器。
我现在的问题是，在嵌入 Instagram 框架后，我无法立即将插入符号定位在 <p> 上。
我尝试的是创建新的 <p> 并在嵌入 Instagram 框架后关注它。但是没用。
有人知道这个问题的解决方法吗？
I make JSFiddle as example
（我将其中一个嵌入代码放在 CSS 块中）
虽然 contenteditable spec 指出应该可以将光标放在一个空的 p 标签内，如下所示：
<div>aaa<p>|</p>bbb</div>
Webkit (Safari) and Blink (Chrome) currently do not support it. More info here.
幸运的是，有一个相对简单的解决方法。我们只需要在 p 标签中获取一些内容，允许我们将光标放置在这里。一种选择是附加一个包含 Zero Width Space 的文本节点。这种方法有时对涉及内联标签的情况很有用。
对于您的情况，最有效的解决方案是简单地在段落中附加一个换行符。 Contenteditable 实现通常将块标记内的换行符视为 "temporary holding nodes"，并且默认处理在主要浏览器中是相同的。初始结果应如下所示：
<div>aaa<p>|<br></p>bbb</div>
一旦您开始输入，BR 就会被替换（浏览器会自动执行此操作）：
<div>aaa<p>inner text|</p>bbb</div>
即使您删除了内部文本，浏览器也会自动重新插入换行符，因此您总能将光标移回内部。
我已经用一个例子 fork 并更新了你的 jsfiddle here。
我正在使用 contenteditable div 制作丰富的编辑器。
我现在的问题是，在嵌入 Instagram 框架后，我无法立即将插入符号定位在 <p> 上。
我尝试的是创建新的 <p> 并在嵌入 Instagram 框架后关注它。但是没用。
有人知道这个问题的解决方法吗？
I make JSFiddle as example （我将其中一个嵌入代码放在 CSS 块中）
虽然 contenteditable spec 指出应该可以将光标放在一个空的 p 标签内，如下所示：
<div>aaa<p>|</p>bbb</div>
Webkit (Safari) and Blink (Chrome) currently do not support it. More info here.
幸运的是，有一个相对简单的解决方法。我们只需要在 p 标签中获取一些内容，允许我们将光标放置在这里。一种选择是附加一个包含 Zero Width Space 的文本节点。这种方法有时对涉及内联标签的情况很有用。
对于您的情况，最有效的解决方案是简单地在段落中附加一个换行符。 Contenteditable 实现通常将块标记内的换行符视为 "temporary holding nodes"，并且默认处理在主要浏览器中是相同的。初始结果应如下所示：
<div>aaa<p>|<br></p>bbb</div>
一旦您开始输入，BR 就会被替换（浏览器会自动执行此操作）：
<div>aaa<p>inner text|</p>bbb</div>
即使您删除了内部文本，浏览器也会自动重新插入换行符，因此您总能将光标移回内部。
我已经用一个例子 fork 并更新了你的 jsfiddle here。