前回ではTextAreaの代替として利用可能なcontenteditable属性を付与したdivタグの編集エリアを作成しましたが、今回はこの編集エリアのフォントサイズや色を変更可能なエリアを作成します。
まず、フォントサイズと色の変更ボックスを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<label>フォントサイズ:</label> <select onchange="document.execCommand('fontSize',false, this.value)"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected>3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> </select> <label>フォントカラー:</label> <select onchange="document.execCommand('ForeColor',false, this.value)"> <option value="black" selected>黒</option> <option value="blue">青</option> <option value="red">赤</option> <option value="yellow">黄</option> <option value="green">緑</option> </select> |
selectタグのonchangeイベントでサイズや色を変更処理が実行されているようにします。
次に太字とイタリックに変更を行うボタンを配置します。
|
1 2 |
<button type="button" class="btn btn-xs btn-primary" onclick="document.execCommand('bold')">太字</button> <button type="button" class="btn btn-xs btn-primary" onclick="document.execCommand('italic')">イタリック</button> |
簡易な機能しかありませんが、とりあえずこれでフォントなどの設定が可能になりました。
次回はこれらをASP.NET.MVC側で実際にHTMLヘルパー化しようと思います。