マウスで選択した部分を太字や斜字などにしたい

Question

JavaScriptから、マウスで選択した部分を太字や斜字、取り消し線などにしたいです。　
イメージとしては、
リンク内容
のような感じなのですが、いま欲しい機能は太字、斜字、下線、取り消し線だけなので、このようなライブラリを使わず自作したいと考えています。

やってみたコード

//ボタンを押したら斜字にしたい
document.getElementById("btn").onclick  = function(){
var sel = window.getSelection();
sel.style.fontStyle = "italic";
}

エラー
Cannot set property 'fontStyle' of undefined

どのようにすればよいのでしょうか？初歩的なことかもしれませんが、ご教授いただければ幸いです。

Answer 1

contenteditableを利用すればできそうですが
それなりにdomの知識が必要になるでしょう

Comments

[takushikai]

回答ありがとうございます。contenteditable、調べてみます。

[yambejp]

contenteditableはハードルが高めなので
とりあえずすべての文字を細分化して処理する方法をあげておきます
（冗長な書き方になっていますが、もうすこし効率的にかけそうな気もします）

https://codepen.io/yambejp/pen/QWKbMjp

ちなみに取り消し線と下線は処理が競合するので、どちらかしか反映されません

[takushikai]

ありがとうございます。見てみます！

Answer 2

こんにちは。

簡単にやるならこんな感じです。

  const span = document.createElement('span');
  span.style.fontStyle = "italic";
  window.getSelection().getRangeAt(0).surroundContents(span);

ただ、これでは要素をまたぐ場合に上手くいきません。
要素をまたぐ場合は、rangeを分割する必要があるので、それなりに複雑な操作する必要があります。
そういったコードを再発明をするのもいいですが、おとなしく既存のライブラリを検討した方がいいのかもしれません。

Comments

[takushikai]

回答ありがとうございます。回答いただいた方法だと、もしかしたら太字と斜字の同時適用は難しい？のかなと思いました。ライブラリの利用も検討しようと思います。

[Lhankor_Mhy]

>回答いただいた方法だと、もしかしたら太字と斜字の同時適用は難しい？のかなと思いました

おっしゃるとおりです。
上手くいく場合といかない場合があるはずです。