javascript - 将光标设置在空标签上

Question

我正在编写具有一些特殊格式化功能的文本编辑器，在设计模式下使用 iframe。在空元素中设置光标位置时出现问题，例如:

<p></p>

我想设置光标，所以当用户继续输入时，文本出现在 <p> 之间标签。这是我的代码:

<iframe id="editor"></iframe>

$(document).ready(function() {
    var iframe = $('#editor').contents().get(0);
    var iwin = $('#editor')[0].contentWindow;
    iwin.document.designMode = "on";
    $('body', iframe).html('<p>ppp1</p><p></p><p>ppp3</p>');

    $('#editor').focus();
    var start = $('p', iframe)[1];

    var rng = $('#editor')[0].contentDocument.createRange();
    rng.setStart(start, 0);
    rng.setEnd(start, 0);

    var sel = iframe.getSelection();
    sel.removeAllRanges();
    sel.addRange(rng);

});

JsFiddle:http://jsfiddle.net/xbit/MGaTf/3/

Answer 1

这里有几个问题:

• 空段落在大多数浏览器中呈现不明显。您需要其中的一些内容；
• 您在 iframe 的文档而不是 iframe 的 Window 对象上调用了 getSelection()。你需要 var sel = iwin.getSelection();;
• 这些在 IE 中都行不通，IE 处理选择的方式完全不同。
• WebKit 不能将插入符放在空元素中。参见 https://bugs.webkit.org/show_bug.cgi?id=15256

还有一些其他的小问题:对于 iframe DOM 元素，contentWindow 是非标准的并且 contentDocument 没有得到普遍支持。为了最大程度地使用标准，我建议如下所示:

var iframe = $('#editor')[0];
var idoc, iwin;
if (typeof iframe.contentDocument != "undefined") {
    idoc = iframe.contentDocument;
    iwin = idoc.defaultView;
} else if (typeof iframe.contentWindow != "undefined") {
    iwin = idoc.contentWindow;
    idoc = iwin.document;
}

我已经更新了你的例子(虽然不幸的是第二段不再是空的):http://jsfiddle.net/timdown/MGaTf/6/