contenteditable でのペースト後、カーソルが先頭に移動してしまう

Question

前提

ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。

実現したいこと

コピペ時のスタイル情報を削除するため、以下の操作でペーストできる機能を開発しています。

1. contenteditableのエディタ領域(id="text_editable")上でペーストして置き換えたい文字列を選択
2. ペースト実施
3. 文字列が置き換えられ、選択した文字列の開始位置にカーソルが移動

発生している問題・エラーメッセージ

ペースト実施後にカーソルがエディタ部の先頭に移動してしまいます。
対処法がもしお分かりになればご教授いただきたいです。

該当のソースコード

function paste(){
  let paste = (event.clipboardData || window.clipboardData).getData('text');
  event.preventDefault();
                    
  var sel = window.getSelection();
  var range = sel.getRangeAt(0);
  var newNode = document.createTextNode(paste);
  range.deleteContents();  
  range.insertNode(newNode);

  var area = document.getElementById('text_editable'); 
  if(sel.anchorOffset<sel.focusOffset){
    range.setStart(area, sel.anchorOffset);
  }else{
    range.setStart(area, sel.focusOffset);
  }
  var new_area=area.innerHTML;
  new_area=new_area.replace(/ /g,"&nbsp;");
  new_area=new_area.replace(/\\n/g,"<br>");
  text_editable.innerHTML = new_area;
  sel.removeAllRanges();
  }
}

試したこと

最初はカーソルが表示されていなかったので、以下を参考にsetStartの行を追加したのですが、「選択した文字列の開始位置」に移動してくれません。
https://proglearn.com/2021/02/12/contenteditable%E3%81%AA%E8%A6%81%E7%B4%A0%E3%81%A7%E3%82%AD%E3%83%A3%E3%83%AC%E3%83%83%E3%83%88%E3%82%AB%E3%83%BC%E3%82%BD%E3%83%AB%E3%82%92%E6%96%87%E6%9C%AB%E3%81%AB%E7%A7%BB%E5%8B%95%E3%81%95/

Answer 1

  text_editable.innerHTML = new_area;

原因はこれで、text_editable の内容をすべて入れ替えているので、キャレットの位置がリセットされてしまいます。

  や <br> への置き換えは変数 paste を対象に行うのがよいでしょう。<br> が入ってくるので、range.insertNode() に渡すのは Text か HTMLBRElement を含んだ DocumentFragment になりますね。

Comments

[puppet_master]

ご教授有難うございます。

> 原因はこれで、text_editable の内容をすべて入れ替えているので、キャレットの位置がリセットされてしまいます。
>&nbsp; や <br> への置き換えは変数 paste を対象に行うのがよいでしょう。

一旦
var area = document.getElementById('text_editable');
if(sel.anchorOffset<sel.focusOffset){
range.setStart(area, sel.anchorOffset);
}else{
range.setStart(area, sel.focusOffset);
}
var new_area=area.innerHTML;
new_area=new_area.replace(/ /g,"&nbsp;");
new_area=new_area.replace(/\\n/g,"<br>");
text_editable.innerHTML = new_area;
sel.removeAllRanges();
の行は削除しました
代わりに
paste=paste.replace(/ /g,"&nbsp;");
paste=paste.replace(/\\n/g,"<br>");
を
range.insertNode(newNode);
の前に追加しました。
最後に
range.setEnd(sel.anchorNode, sel.anchorOffset);
を追加したところ、当初の仕様の通りに挙動する様になりました。

ありがとうございました。