質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WYSIWYG

WYSIWYGとは、ディスプレイに表示されたものが見た通りの状態でプリンターなどに出力できる技術、およびその概念です。HTMLがなくても容易にWebページのレイアウトなどができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1318閲覧

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

puppet_master

総合スコア24

WYSIWYG

WYSIWYGとは、ディスプレイに表示されたものが見た通りの状態でプリンターなどに出力できる技術、およびその概念です。HTMLがなくても容易にWebページのレイアウトなどができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/06/19 06:28

前提

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

実現したいこと

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

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

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

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

該当のソースコード

Javascript

1function paste(){ 2 let paste = (event.clipboardData || window.clipboardData).getData('text'); 3 event.preventDefault(); 4 5 var sel = window.getSelection(); 6 var range = sel.getRangeAt(0); 7 var newNode = document.createTextNode(paste); 8 range.deleteContents(); 9 range.insertNode(newNode); 10 11 var area = document.getElementById('text_editable'); 12 if(sel.anchorOffset<sel.focusOffset){ 13 range.setStart(area, sel.anchorOffset); 14 }else{ 15 range.setStart(area, sel.focusOffset); 16 } 17 var new_area=area.innerHTML; 18 new_area=new_area.replace(/ /g,"&nbsp;"); 19 new_area=new_area.replace(/\\n/g,"<br>"); 20 text_editable.innerHTML = new_area; 21 sel.removeAllRanges(); 22 } 23}

試したこと

最初はカーソルが表示されていなかったので、以下を参考に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/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

js

1 text_editable.innerHTML = new_area;

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

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

投稿2022/06/20 00:03

int32_t

総合スコア20663

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

puppet_master

2022/06/21 06:49

ご教授有難うございます。 > 原因はこれで、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); を追加したところ、当初の仕様の通りに挙動する様になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問