contenteditableでのインライン要素指定について

Question

こんにちは。いつもお世話になっております。

現在，ブロックエディタを自作してみようと試行錯誤をしております。
そこで調べても試行錯誤でも自力では解決できないことがあったため，皆さんの助力を乞いたいと思いご質問させていただきます。

はまっている内容

• contenteditable内の文字の細かくインライン要素が設定できない

<div contenteditable="true">0123456789</div>

上記のようなコードがある際にインライン要素(フォントカラー，太字等)を設定したいと思っています。

<div contenteditable="true">
<span>0123</span>
<span data-bold="true">456</span>
<span>789</span>

のようにインライン要素を設定することはgetSelectionを用いればできますが，一度タグを入れてしまうと6</span><span>7を選択して新たにインライン要素を設定することがうまくできません。
形としては，

<div contenteditable="true">
<span>0123</span>
<span data-bold="true">45</span>
<span data-bold="true" data-italic="true">6</span>
<span data-italic="true">7</span>
<span>89</span>

のようにしたいと思っています。

ヒントとなるような内容でもサンプルコードでも大丈夫ですので何かアドバイスをお願いします。

Answer 1

let r = getSelection().getRangeAt(0);
let newSpan = document.createElement('span');
newSpan.dataset.italic = 'true';
newSpan.appendChild(r.extractContents());
r.insertNode(newSpan);

手軽にやるならこんな感じでしょうか。
この挙動が気に食わない場合は自力でDOM操作で頑張るしかないと思います。

---

追記:

新しい<span>で囲まなくても、r.extractContents() の結果のDOMに data-italic="true" を足して insertNode() すると質問文の期待する結果の通りになる気がします。

Comments

[ikeyu.tp]

>追記
それ試してないので後ほど試してみます！
ありがとうございます