javascript - 在 contenteditable 元素内的 span 元素内放置插入符号

Question

我正在开发一个文本编辑器。我有一个 content editable <div>，其中将放置<span>具有实际样式属性的元素。现在，我知道如何在这些 span 元素中放置插入符号，但是一旦我开始输入，文本就会打印在 span 之外，div 本身内部。

这是插入符号放置的相关代码：

var rs = $( "#textEntry" ).insert( "span" ).set( "style" , style );

            sel = window.getSelection();

            sel.collapse( rs[ 0 ] , 0 );

            rs[ 0 ].focus();

rs[ 0 ]当前跨度元素在哪里。

我怎样才能克服这种行为？

PS$不是一个jQuery。

Answer 1

玩了这个之后，似乎解决方案如下：

有必要添加一些内部文本，然后在元素的第一个子节点（即 TEXT 节点）上设置插入符号，然后删除文本。插入符号将保持在该位置，瞧！有用。

var rs = $( "#textEntry" ).insert( "span" ).set( "style" , style ).html( "a" );

rs[ 0 ].focus();
if ( document.selection ) {
    sel = document.selection.createRange();
    sel.moveStart( 'character' , 0 );
    sel.select();
}
else{
    sel = window.getSelection();
    sel.collapse( rs[ 0 ].firstChild , 0 );
}

rs.html( "" , true );

伙计们，我很高兴看到其他解决方案！