【Javascript】contenteditableなdivでカーソル位置が指定できなかった原因

javascript html wysiwyg

contenteditableなdivに「今日はいい天気だ」というテキストが存在して「は」の後ろ(前から3文字目)にカーソルを置きたかった。以下のようなコードで実験したけどなぜかカーソルが先頭にきてしまった。

<div id="editor" contenteditable="true">
  今日はいい天気だ
</div>
<script>
window.onload = function() {
    var editor = document.getElementById('editor')
    var selection = window.getSelection()
    var range = document.createRange()
    range.setStart(editor.firstChild, 3)
    range.collapse(true)
    selection.removeAllRanges()
    selection.addRange(range)
    editor.focus()
}
</script>

原因は改行コードとスペースが含まれていたからそこも含めた位置だったというオチだった。。

<div id="editor" contenteditable="true">今日はいい天気だ</div>

ちなみにブラウザからスペースを挿入すると「 」が挿入されるので表示もスペースで表示される。以上です