contenteditable での選択範囲の保存と再選択

Question

前提・実現したいこと

ブラウザベースでのWYSIWYGエディタをJavaScript で開発中です。オープンソースのWYSIWYGエディタも試してみましたが、DBやS3へのデータ格納の為の改造が必要であまり省力化にならないため、自作で機能を絞って実装する方向に舵を切っています。

以下の操作でリンク挿入できる機能を開発しています。

1. contenteditableのエディタ領域上でリンクで囲みたい文字列を選択
2. エディタ領域外に配置したリンク挿入ボタンをクリック
3. モーダルがポップアップし、URL入力フィールドにURLを入力し、挿入ボタンをクリック
4. contenteditableのエディタ領域上の囲んだ文字列がリンクで囲まれた状態になる

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

困っているのは、3でURLを入力するとgetSelentionで選択されているのがモーダルになってしまい、4でのリンク挿入が行われません。その後もう一度リンク挿入ボタンをクリックして、モーダルのURLを変更せずに挿入ボタンをクリックすると、リンクの挿入はうまくいきます。

このため2の操作で選択範囲自体を保存し、4の操作の前に再度同じ範囲が選択された状態にしてから、リンクで囲むようにしたいと思っています。
このような実装を行いたい場合、どのメソッドなどを使えばよいかご教示いただけますか？
調べてはみたのですが、当てはまるようなサンプルが見当たらず困っております。
もちろん、上記手順での操作が可能であれば、別のアプローチでのアドバイスも頂けると大変ありがたいです。

該当のソースコード

3で挿入ボタンをクリックすると呼ばれる処理が以下になります。

function add_link(){
var link_url = document.getElementById('textarea_link_url').value;

var sel = window.getSelection();
var range = sel.getRangeAt(0);
var newNode = document.createElement('a');
newNode.href=link_url;
var dom=range.cloneContents();
newNode.appendChild(dom);
range.deleteContents();  
range.insertNode(newNode);
                        
sel.removeAllRanges();
}

試したこと

getSelectionの返り値を格納するselや、getRangeAt(0)の返り値を格納するrangeについては、別のグローバル変数に格納して試してみましたが、モーダル上でURLを入力すると別の変数になっているはずが、その変数側もモーダル自体が選択された状態に中身が変わってしまいました。

Answer 1

contenteditableの要素からフォーカスが外れるときに getSelection().getRangeAt(0).cloneRange() を変数に保存しておいて、挿入ボタンをクリックしたときには getSelection().removeAllRanges(); getSelection().addRange(その変数) としてテキスト選択を復帰させてから挿入処理を行うのはどうでしょうか。

Comments

[puppet_master]

ありがとうございます！cloneRangeでいけました！

Answer 2

こんな感じのは、試しましたか？

var selObj = window.getSelection();
var range = selObj.getRangeAt(0);
//selObj.removeAllRanges();
selObj.addRange(range);

参考
https://developer.mozilla.org/ja/docs/Web/API/Selection

Comments

[puppet_master]

コメントありがとうございます。
誤解を与えたかもしれませんが、モーダルなどで入力しない処理については既に動作しています。
目先は、ある時点でのrangeの情報をどうにかして保存しておきたいのですが、モーダルでの入力が発生した際にrangeの中身が変わってしまっているので困っています。