nobu blog

プログラミングやゲーム、ゲーム音楽コンサート周りの話をつらつらと。

*



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

      2015/02/08

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

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

 

post

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

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

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

 

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

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

 

 

下がform-control指定時です。

form

 

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

 

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

form2

 

その2へ

 - ASP.NET MVC, C#, HTML