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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/23 22:45