contenteditableのdivでエディタを作っていて、キャレットから一番近いHTMLタグのid属性を常に把握していきたいのですが、これがうまくいきません。
idを常に把握しておきたい理由
下の画像のように、contenteditableなdivで作ったテキスト入力エリアの横に、画像やYouTubeを挿入するためのボタンを用意していて、それを挿入する場所を指定するため。
現状
divの中ではEnterを押すと新しい<p></p>を作成し、そこにランダムにidを割り振るようにしています。
そこで、あとはkeypressなどで現状のタグの中のidを把握できれば完了なのですが、そこがうまくいきません。
以下のようにやればできるかと思ったのですができず、他の方法を調べてもできる方法が見つかりません。
わかる方、教えてください。
HTML
1<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div>
javascript
1var div = document.getElementById('body-text') 2div.addEventListener('keypress', onKeyPress) 3 4function onKeyPress(e) { 5 var check = document.activeElement 6 console.log(check.getAttribute('id'))//body-textが帰ってきてしまう、アクティブなのは親のdivだと判定されてしまうようです 7 }
追記
状況をわかりやすくするためにサンプルを作成しました。
以下のサンプルで現状とやりたいことを確認いただければと思います。
現状では<div>の最後の子要素としてYoutubeの埋め込みが入ってしまっているのですが、これを最後にキャレットが当たっていた場所に挿入するようにしたいです。
あなたの回答
tips
プレビュー