🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
WYSIWYG

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

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2648閲覧

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

takushikai

総合スコア12

WYSIWYG

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

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/11/30 10:42

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

やってみたコード

JavaScript

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

エラー
Cannot set property 'fontStyle' of undefined

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

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

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

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

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

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

guest

回答2

0

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

投稿2020/11/30 10:49

yambejp

総合スコア116661

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

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

takushikai

2020/11/30 10:55

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

2020/12/01 00:51 編集

contenteditableはハードルが高めなので とりあえずすべての文字を細分化して処理する方法をあげておきます (冗長な書き方になっていますが、もうすこし効率的にかけそうな気もします) https://codepen.io/yambejp/pen/QWKbMjp ちなみに取り消し線と下線は処理が競合するので、どちらかしか反映されません
takushikai

2020/12/02 14:04

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

0

ベストアンサー

こんにちは。

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

js

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

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

投稿2020/12/01 01:46

Lhankor_Mhy

総合スコア36928

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

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

takushikai

2020/12/02 14:03

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

2020/12/03 01:24

>回答いただいた方法だと、もしかしたら太字と斜字の同時適用は難しい?のかなと思いました おっしゃるとおりです。 上手くいく場合といかない場合があるはずです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問