nobu blog

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

*



ASP.NET MVCでテキストエディタを使う その3 HtmlHelper作成

      2015/02/15

はじめに

前回までにcontenteditable属性を用いたテキストエディタのHTMLでの作成方法を説明しました。
今度はこのHTMLをASP.NET MVCで簡単に出力できるようなHtmlHelperを作成しようと思います。

実行サンプル

まずは、今回で作成するヘルパーで出力を行うサンプルです。
View(xxxx.cshtml)に以下のような記述を行うことでフォントの指定が可能なテキストエディタを生成します。

上記ではModelのDetailプロパティ(string)をヘルパーに渡すことで下記のようなエディタが出力されます。

edit

ヘルパークラスの作成

以下のようなヘルパークラスを作成します。

基本的に前回、前々回で説明したタグを生成しているだけですが、注意点としてcontenteditableを付与したエリアはdivタグで作成されたものなので、そのままではフォームの値としてサーバに送信することはできません。そこでhiddenのtextareaを用意してフォーカス移動時にそこに値を移すように設定しています。
私の使用方法としては確定ボタン→確認DLG→submitといった形になるのでこの方法で問題がありませんが、場合によってはonblurではなく別の方法でhiddenのtextarea等に移す必要があるかもしれません。

まとめ

見た目も機能もまだまだ改善の余地ありですが、これで通常のテキストエディタが少しリッチになったと思います。
次回はサーバサイドなどのコードも含めて使い方を進めていこうと思います。

その1
その2
その4

 - ASP.NET MVC, C#, HTML