CSSで入力フォームに「太字」や「リスト」機能をつけたい

HTML, CSSの初心者です。
初歩的な内容かもしれませんが、お教えいただけると幸いです。

＜実現したいこと＞
-HTMLで作成したページに、入力フォームへの入力内容を箇条書き形式にしたり太字にしたりできるようなボタンをつけたい (まさにこのteratailの質問入力フォームの上に並んでいるボタン群を挿入できれば最高です)。

＜発生していること/試したこと＞
-色々調べた結果、Bootstrap Markdownというページに行き当たり (https://www.codingdrama.com/bootstrap-markdown/)、Bootstrapのプラグインをサウンロードした上で、ひとまず太字、斜体、取り消し線ボタンをつけようと、サンプルとして下記のHTMLを組みました (GitHubの掲示板を見ると、Bootstrap ver.4ではうまくいかないようなので、v 3.3.7を使用しております)。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4	<title>Sample Text Editor</title>
5	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
6	<link rel="stylesheet" type="text/css" href="bootstrap-markdown.min.css">
7
8</head>
9<body>
10
11<h1>Test!</h1>
12
13<form>
14	<div class = "form-group">
15		<input class="form-control" name="title" type="text" placeholder="Title?">
16	</div>
17
18	<div class = "md-editor active" id = "1537661675182">
19		
20		<div class="btn-group">
21			<button class = "btn-default btn-sm btn" type="button" title="Bold (Ctrl+B)" tabindex="-1" data-provider="bootstrap-markdown" data-handler="booststrap-markdown-cmdBold" data-hotkey="Ctrl+B">
22				<span class="glyphicon glyphicon-bold"></span>
23			</button>
24
25			<button class="btn-default btn-sm btn" type="button" title="Italic (Ctrl+I)" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic" data-hotkey="Ctrl+I">
26				<span class="glyphicon glyphicon-italic"></span>
27			</button>
28
29			<button class="btn-default btn-sm btn" type="button" title="Heading (Ctrl+H)" tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdHeading" data-hotkey="Ctrl+H">
30				<span class="glyphicon glyphicon-header"></span>
31			</button>
32		</div>
33	
34	</div>
35
36	<textarea name="content" data-provide="markdown" rows="15" class="md-input" style="resize: none;">### Hello there
37		How are you?
38
39		I have bellow task for you :
40
41		Select from this text...
42		Click the bold on THIS WORD and make THESE ONE italic
43		Link GOOGLE to google.com
44		Test to insert image (and try to tab after write the image description)
45		Test Preview
46		And ending here... Click "List"
47
48		Enjoy!
49	</textarea>
50
51	<div class="md-fullscreen-controls"><a href="#" class="exit-fullscreen" title="Exit fullscreen"><span class="glyphicon glyphicon-fullscreen"></span></a></div>
52
53</form> 
54
55
56</body>
57</html>

-しかし、結果は↓のように全く使い物にならない状況となっております。

＜利用している環境＞
-どんな情報であればご回答に際して有効かよくわからないのですが、上記はSublime textで記述しており、↓のようなフォルダ状態で作業しております。

-どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答3件

現在試されている事かはら外れてしまいますが、TinyMCEを使うことでも実現したいことを達成できると思います。

TinyMCEはWYSIWYGエディタの一つで、比較的簡単に実装ができます。
また表示させるボタン等もカスタマイズ可能です。

TinyMCE公式サイト
 公式ドキュメントよりも詳しいTinyMCEの使い方（基本編）

こんなのもありますという情報でした^^;

投稿2018/09/23 03:25

8yazaki

総合スコア454

Shun0722

2018/09/23 22:45

ご紹介ありがとうございます。こちらのほうが、使い勝手も良さそうなので、研究してみようと思います。大変参考になりました！

行動規範の内容に同意します

ベストアンサー

jQueryなどのJavaScriptファイルを読み込んだうえで、markdown-jsを読み込むことで、質問者さんの実現したい動作になると思いますが、いかがでしょうか？

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>Sample Text Editor</title>
6    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
7    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/css/bootstrap-markdown.min.css"
8          rel="stylesheet">
9</head>
10<body>
11<div class="container">
12    <h1>Test!</h1>
13
14    <form>
15        <div class="form-group">
16            <input class="form-control" name="title" type="text" placeholder="Title?"/>
17        </div>
18        <textarea name="content" data-provide="markdown" rows="15">### Hello there
19How are you?
20
21I have bellow task for you :
22
23Select from this text...
24Click the bold on THIS WORD and make THESE ONE italic
25Link GOOGLE to google.com
26Test to insert image (and try to tab after write the image description)
27Test Preview
28And ending here... Click "List"
29
30Enjoy!</textarea>
31        <label class="checkbox">
32            <input name="publish" type="checkbox"> Publish
33        </label>
34        <hr/>
35        <button type="submit" class="btn">Submit</button>
36    </form>
37</div>
38<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
39<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
40<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown.js/0.5.0/markdown.min.js"></script>
41<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-markdown/2.10.0/js/bootstrap-markdown.min.js"></script>
42</body>
43</html>

投稿2018/09/23 03:05

編集2018/09/23 03:12

s8_chu

総合スコア14731

Shun0722

2018/09/23 22:44

ご提示いただいたコードで無事動かすことができました。大変ありがとうございます。

行動規範の内容に同意します

追記。
Bootstrap本体のjsを読み込まれてませんが、もしかしたら導入できてないだけでは？
見た感じ、特にBootstrap導入できているようなレイアウトには見えません。
本体CSSだけではなく本体JS(場合によりjQuery本体)までが１セットです。

以下、別角度からの回答です。

マークダウンは所定の書式で書いて登録することで「表示時に置換して」文書の装飾を実現するもので、teratailのプレビュー機能のように入力した結果で即座に反映して見せたければ、JavaScriptで状態監視、またはkeyイベントを取得して置換して別の場所に表示する仕組みが別途必要です。
textareaは入力したものを入力したまま見せる機能しか持っていません。
またはWYSIWYG（ウィジウィグ）エディタのようなものを探された方がいいですね。

投稿2018/09/23 01:59

編集2018/09/23 02:52