inputやtextareaタグを使わないで、画面上で文字を入力できるようにする方法を教えてください。

Question

現在あるメディアを作成していて、その記事作成画面のコーディングでつまづいています。

記事作成画面のUIとしては以下のnoteさんのサービスを参考にしたいと思っています。
https://note.mu/

ただ、このサービスではディベロッパーツールで確認する限り、inputやtextareaを使用していないのに文字を入力できるようになっています。
divタグの中で文字が入力ができて、入力するとdivタグの中にpタグが生成されてそのpタグの中に文字列が格納されるという形になっているようです。

ひとまず、この全体の仕組みを知りたいというよりは、inputやtextareaを使わないでテキスト入力させることが可能なのか、可能な場合その方法を知りたいと思っています。
わかる方、ご回答いただけると幸いです。

参考までに画面のスクリーンショットを添付しておきます。

Comments

[退会済みユーザー]

分類的にはこれにちかいとおもいますな http://ckeditor.com/demo

[退会済みユーザー]

ありがとうございます。
このようなものの設定を変更することで、自分の理想の形にしていく以外方法はないということでしょうか？

Answer 1

inputやtextareaを使わないでテキスト入力させることが可能なのか

については、HTML5からタグにcontenteditable属性を指定することでブラウザからの文字入力が可能になります

例

<div contenteditable=true></div>

参考サイト
[HTML5API] contentEditable 属性を使用したリッチテキストエディタの実現
（存在は知っていましたが、CTRL+bなどの書式変更もできちゃうことを初めて知りました）

Comments

[退会済みユーザー]

ありがとうございます！！
このような機能があることは知りませんでした。
ここでずっとつまづいていて困っていたので、本当に助かりました！
本当にありがとうございます！！