RSS 2.0
HTML編集用のWYSIWYGエディタ CKEditor をASP.NET MVC環境にセットアップしたときのメモを記載します。CKEditorは以前は FCKEditor という名前でした。CKEditorはGPLライセンスなので、商用のパッケージなどで使用する場合のために商用ライセンスが用意されているようです。
CKEditor のほかに TineMCE というエディタも有名なようです。こちらは社内や個人用途で使う場合にはとくに制限がないようなので、GPLによる汚染が心配な場合はTinyMCEを使用を検討してみるのもよいかもしれません。
検証環境
- 組み込み環境は ASP.NET MVC3
- CKEditor のバージョン 3.6.3
Webファイルマネージャー は CKEditor には含まれていません。CKEditorと連携可能な Webファイルマネージャーとして CKFinder がありますが、こちらはライセンス料がかかるため今回のメモでは導入していません。かわりに、 FileManager というWebファイルマネージャーを CKEditor に組み込んで使用する方法を[ASP.NET MVC] FileManager 導入メモで記載しています。。
1.ファイルのダウンロード
CKEditor のダウンロードのサイト(http://ckeditor.com/download)からCKEditorをダウンロードします。記事の記載時点で CKEditor のバージョンは 3.6.3でした。リンク先の下の方に CKEditor for ASP.NET がありますが、ASP.NET Form と統合するためのコントロールが含まれています。今回は ASP.NET MVCと統合するので CKEditor for ASP.NET はダウンロード不要です。
2. ファイルの配置
ダウンロードしたファイルを解凍して、 ASP.NET MVC のプロジェクトのフォルダに 配置します。本例では、 [Webアプリケーションルート]/ckeditor にファイルを配置したものとして説明を記載します。
ツールバーやスキンなどいろいろいじらなければこれで準備完了です。 ckeditor/_sample/index.html をブラウザで表示して CKEditor が動作するのか確認してみましょう。サンプルページには CKEditor をclass属性やjavascript, jquery を使用した組み込み方法が記載されています。
3. 実際に使ってみる
Integrationのページを参考にしてCKEditor を ASP.MVC 3のビューで使用してみます。やることは2つです。まず 任意のビュー(もしくはレイアウトファイルに含めておくでもOKです。) /ckeditor/ckeditor.js へのスクリプト参照を設定します。次に、ページロード時 (onload イベントなど)に textarea 要素 (ここでは id を Bodyとします。) に対して、下記サンプルのようにreplace コマンドを次のスクリプトを実行します(サンプルページの説明によると textarea 要素の class 属性にckeditor とするだけでも OK のようです)。詳細はIntegrationのページを参照してください。サンプルではjQueryを導入している環境なのでjQueryのready メソッド内で 初期化処理のスクリプトを記述しています。
<script src="@Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
CKEDITOR.replace('Body');
});
</script>
本例で使用しているidがBodyのtextareaに対して RequiredAttribute を使用している場合下記問題が発生します。
Property にRequiredAttribute が設定されていて、クライアントサイド検証が有効な場合、 CKEditorの保存ボタン以外のsubmit ボタンでサーバーに POST すると、必須項目未入力エラーが発生します。検証が発生する前に、textarea への反映が行われないみたいです。
もう一度submitボタンをクリックすると、RequiredAttributeによる必須項目エラーは発生せず、フォームデータがサーバーにポストされます。submitボタンクリック時にupdateElement メソッドを使用する(CKEDITOR.instance.Body.updateElement())方法等試してみましたがうまい解決方法を見つけららませんでした。結局特定のプロパティに対してクライアントサイド検証を無効にする方法で対応しています。
特定の Property に対してクライアントサイド検証を行わないようにするのは別のところで記載します。
4.そのほかの設定
jQuery インテグレーションを行う場合は次のURLを参照
jQuery Adapter
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/jQuery_Adapter
そのほかの設定やtoolbarをカスタマイズしたり、スキンを設定する場合は下記ドキュメントやサンプルドキュメントを参照。
CKEditor 3.x Developer's Guide
http://docs.cksource.com/CKEditor_3.x/Developers_Guide
CKEditor Toolbar
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
Namespace CKEDITOR.config
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
上記のURL Namespace CKEditor.config を参考にして、 config.js を編集し、 config.height = 'XXpx' などとすると高さなどの設定を行うことができて便利です。
導入の説明は以上です。
5. まとめ
簡単ですが、導入方法の説明を記載しました。FCKEditor 時代には Webファイルマネージャーが付属していて、内部ファイルへのリンクや画像のリンクの作成やファイルのアップロードを行えたのですが、CKEditor 単体ではファイルマネージャーは付属していません。CKFinder を使えとのことでしょうが、有料みたいなので今回は試しませんでした。代わりにFileManagerをCKEditorのファイルマネージャーとして使用できます。FileManager のセットアップ方法は[ASP.NET MVC] FileManager 導入メモで記載しています。