読者です 読者をやめる 読者になる 読者になる

なか日記

一度きりの人生、楽しく生きよう。

ASP.NET MVCでwysiwygなエディタ「CKEditor」を使用する方法

ブログやイベント告知の本文などでは見出しを付けたり、箇条書きやフォントの大きさを変えたかったりしますよね。

そんな時、エンドユーザへの提供方法としては2種類あると思います。1つはHTMLやMarkdown等のマークアップ言語を使ってガリガリ書いてもらう方法。もう一つは、Wordやはてなブログの見たまま記法のように、WYSIWYG*1なエディタを提供する方法です。

今回はWYSIWYGなエディタであるCKEditorを使ってみることにします。

ダウンロード

まずは公式サイトから一式をダウンロードします。

f:id:nakaji999:20150129023359p:plain

ダウンロードできるパッケージとして、以下の4種類が提供されています。デモページがあるので、そこでどのパッケージにどんな機能が付いているのか確認することもできます。

  • Basic Package
  • Standard Package
  • Full Package
  • カスタマイズ

組み込み

解凍と配置

ダウンロードしたファイルを解凍し、適当な場所に起きます。

JavaScriptの参照

ckeditor.jsを参照します。

@section scripts
{
    <script src="~/Scripts/ckeditor/ckeditor.js"></script>
}

textareaにclassを設定

textarea に ckeditor というクラスを設定します。

@Html.EditorFor(model => model.Contents, 
    new { htmlAttributes = new { @class = "form-control ckeditor" } })

完成

これだけで下のようにリッチな入力欄が出来上がりました。

f:id:nakaji999:20150129025812p:plain

※ 画面のイメージはカスタマイズ版なので Standard Package とはちょっと異なってます。

POSTする際には

ソースを眺めてみると、元々あった textarea は visibility: hidden; が設定されて見えなくなっており、その代わりに CKEditor の項目が追加されています。

ですが、POSTの際には textarea の ID でデータが飛びますので、特に何か意識する必要はありません。

まぁ、当然と言えば当然ですね。