ASP.NET MVCでテキストエディタを使う その1

ただいま、ASP.NET MVCを勉強中ということで色々試したものなどを載せようと思います。

ASP.NET MVCで以下のようなTextAreaを利用した自由な文章入力を可能とする画面を作成していたのですが、この入力エリアに対してblogの投稿画面のように文字のフォントや色などを変えられるような機能を追加したいと考えています。

とりあえず、フォントサイズや色指定をJavaScriptでゴリゴリと実装しないといけないのかと思って調査していたのですが、HTML５では以下のようなcontenteditable属性を使ったリッチテキストエディタが実装可能なようです。

参考：http://blogs.msdn.com/b/osamum/archive/2014/02/14/html5api-contenteditable.aspx

この機能を使うと、かなりお手軽にエディタが実現できそうです。

まず、今まで利用していたTextAreaタグの代わりに今回のcontenteditable属性を付与したdivタグを利用します。

class属性にBootstrapのform-controlを付与するとそのほか入力タグのようにちゃんとフォーム入力のスタイルが適応されるようです。

下がform-control指定時です。

ただ、このままだと表示行数を超えて入力ができてしまうため、スクロールバーが表示可能なようにCSSを追加します。

これでスクロールバーが表示されます。

その2へ