在contenteditable div中创建标签之间设置光标

Question

嘿我对如何在嵌套标签中设置光标有疑问。我想创建<pre><code></code></pre>并在<code>之间设置光标，但现在光标在<pre>之后设置。如果开始写一些东西，我会得到<pre>for example<code></code></pre>。但我会收到<pre><code>for example</code></pre>.请查看代码：

var getSel = window.getSelection().focusNode;
var createPre = document.createElement('pre');
var createCode = document.createElement('code')
createPre.appendChild(createCode);
getSel.appendChild(createPre);

所有内容都在contenteditable容器中。

Answer 1

创建范围和选择对象，设置范围开始，将范围折叠到第一个边界，删除选择对象中的先前范围，将新范围添加到其中（Selection对象）并将焦点设置为可编辑格。

＆＃13;

＆＃13;

var range = document.createRange(),
    selec = window.getSelection();

range.setStart(editableDiv.childNodes[0].childNodes[0], 0);
range.collapse(true);
selec.removeAllRanges();
selec.addRange(range);
editableDiv.focus();

＆＃13;

＆＃13;

＆＃13;