私の仕事は、現在のキャレット位置の contentEditable div 内に空のスパン ノードを挿入することです。
以下は、Firefox 22.0 では問題ありません。
HTML
<div class="parent" contentEditable=true>
<div>text</div>
</div>
Javascript
$('.parent').on("keyup", function(e){
if (e.which == 73) {
node = '<span class="new"></span>';
document.execCommand('insertHtml', null, node);
}
});
再現するには:「テキスト」という単語のどこかにキャレットを置き、「i」キーを押して、現在の選択範囲に空のスパンを挿入します。
参照: http://jsfiddle.net/amirisnino/pZecx/2/
例:
単語の途中で「i」キーを押すと
期待される結果:
<div class="parent" contentEditable=true>
<div>tei<span class="new"></span>xt</div>
</div>
代わりに何が起こりますか?
<div class="parent" contentEditable=true>
<div>teixt</div>
<span class="new"></span>
<div><br></div>
</div>
これについての助けをいただければ幸いです。前もって感謝します。