Tweet

連載：VBで実践！ 外部コンポーネント活用術 Webアプリケーション用HTMLエディタ「FCKeditor」を使う デジタルアドバンテージ　岸本 真二郎 2009/05/15

Page1 Page2 Page3

　「FCKeditor」は、JavaScriptで記述されたオープンソースのHTMLエディタです（「FCK」は作者であるFrederico Caldeira Knabben氏のイニシャル）。MovableTypeやXOOPSといったCMSやBlogツールなどに、ページ作成用の部品として組み込まれているのを目にしたことがあるかもしれません。

　FCKeditorを用いると、HTMLタグを直接記述することなく、HTMLベースのリッチなドキュメントの作成が可能になります。以下はFCKeditor（のコントロール）を組み込んだASP.NETのページの表示例です。また、FCKeditorのホームページにあるデモ・ページでは、実際にその動作を試すことができます。

FCKeditorを使ったASP.NETのページ

このサンプルでは、FCKeditorに入力された内容を、そのままページ下部に表示している。

　FCKeditorはCMSやBlogなどの特定のWebアプリケーションに利用が限定されるものではなく、PerlやPHPなどで作成する自作のWebアプリケーションでも簡単に利用できます。さらにはASP.NETにも対応しており、特にASP.NETでは、Visual Studioを使って自作のWebアプリケーションにFCKeditorを組み込むことができます。今回はASP.NETによるWebアプリケーションでのFCKeditorの利用法を紹介します。

FCKeditorの入手と設定

　ASP.NETでFCKeditorを使用するには、FCKeditorのサイトから、FCKeditor本体と、それをASP.NETで利用するためのサーバサイド・コントロール（FCKeditor.Net）をダウンロードします。

　本稿執筆時点では、FCKeditor本体としてVersion 2.6.4（FCKeditor_2.6.4.zip）が配布されています。またASP.NET用コントロールはVersion 2.6.3（FCKeditor.Net_2.6.3.zip）です。どちらもZIPファイルで提供されていますので、ダウンロード後、適当なディレクトリに展開します。本稿では、FCKeditor本体は「C:\bin\FCKeditor_2.6.4」に、FCKeditor.Netは「C:\bin\FCKeditor.Net_2.6.3」に展開しました。

　FCKeditor.Netには、コントロールのDLLファイルとそのプロジェクト、さらにサンプル・コードなどが含まれています。この中で最低限必要となるのは、展開したフォルダのbinフォルダにある「FredCK.FCKeditorV2.dll」です。コントロールとしては、.NET 1.1用と.NET 2.0用の2種類が用意されており、使用する開発環境に応じて使い分けます。本稿ではVisual Studio 2008（以下、VS 2008）を用いますので、.NET 2.0用のコントロールを使用します。ZIPファイルにはソース・ファイルとともにプロジェクト・ファイルが含まれていますので、必要であれば再ビルドできます。

　FCKeditor本体（FCKeditor_2.6.4.zip）は、上述したように、Perl、PHP、Pythonといったさまざまなプログラミング言語で利用できるようになっています。そのため、ASP.NETで利用する場合には不要となるファイルも含まれています。拡張子が.asp（Active Server Pages用）、.php（PHP用）、.py（Python用）、.lasso（Lasso用）、.cfm（ColdFusion用）などのファイルは削除してしまっても差し支えありません。

Visual Studio 2008での利用設定

　まずFCKeditorをVS 2008で使用するための設定を行います。VS 2008を起動し、Webアプリケーションのプロジェクトを新規作成してWebアプリケーション作成を始めます。

　VS 2005（SP1）やVS 2008では、Webアプリケーションとして、Webアプリケーション・プロジェクトとWebサイト・プロジェクトの2種類が作成できますが、どちらのプロジェクトを作成しても支障はありません。本稿ではWebアプリケーション・プロジェクトを新規作成します。

■ツールボックスにFCKeditorを登録

　続いては、ツールボックスにFCKeditorを登録しておきます。こうしておくと、Webフォームに簡単にFCKeditorを配置できるようになります。

　これには、Webアプリケーション・プロジェクトを新規作成した後、Webフォーム（Default.aspx）をオープンしてページ編集を行う状態にした後、ツールボックスを右クリックして、コンテキスト・メニューから［アイテムの選択］を選択します。

　［ツールボックス アイテムの選択］ダイアログが開きますので、［.NET Framework コンポーネント］タブで［参照］ボタンをクリックし、FCKeditor.Netを展開したフォルダから「FredCK.FCKeditorV2.dll」を選択します。

ツールボックスにアイテムとしてFCKeditorを追加

　［.NET Framework コンポーネント］タブの一覧に「FCKeditor」が表示され、そのチェック・ボックスがチェックされていることを確認して［OK］ボタンでダイアログを閉じます。

　これでツールボックスにFCKeditorという名前のコントロールが追加されます。後はツールボックスから、このFCKeditorコントロールをWebフォーム上にドラッグ＆ドロップして配置します。

WebフォームにFCKeditorコントロールを配置（水色部分）

　FCKeditorコントロールを配置すると、自動的にコントロールの実体であるFredCK.FCKeditorV2.dllへの参照がプロジェクトの参照設定に追加されます。さらに.aspxファイル（Default.aspx）には、アセンブリの登録を行う次の記述が追加されます。

　また、コントロールを配置した部分には、FCKeditorV2というプレフィックスのついた次のようなタグが生成されます。

■ツールボックスにコントロールを登録しない場合

　ツールボックスにFCKeditorコントロールを登録せずに作業を行いたい場合は、プロジェクトにアセンブリの参照追加と、FCKeditorコントロールのタグの記述を手作業で行います。

　まずIDEのメニューから［プロジェクト］−［参照の追加］を選択し、「FredCK.FCKeditorV2.dll」を選択します。

参照の追加

　参照の追加を行ったら、ページに直接タグを記述します。上述した「<%@」で始まるFCKeditorのアセンブリを登録する記述と、FCKeditorコントロールのタグを手作業で記述します。

■fckeditorファルダの中身をプロジェクトにコピーする

　いま配置したFCKeditorコントロールには、エディタ本体のモジュールが含まれていませんので、次にFCKeditor本体をプロジェクトに追加します。

　FCKeditor本体のZIPファイルを展開すると作成される「fckeditor」というフォルダに、必要なすべてのファイルが入っていますので、エクスプローラからfckeditorフォルダをそのままソリューション・エクスプローラにドラッグ＆ドロップして、fckeditorフォルダの中身すべてをプロジェクトに追加します。

fckeditorフォルダを追加したプロジェクト

　ただし前述したように、fckeditorフォルダには、ASP.NETでは不要なファイルも含まれています。特定の拡張子について、セキュリティ上問題があるようなら、削除しておきます。

INDEX
	VBで実践！ 外部コンポーネント活用術
	Webアプリケーション用HTMLエディタ「FCKeditor」を使う
	1．FCKeditorの入手と設定／VS 2008での利用設定
	2．FCKeditorの設定をカスタマイズ
	3．スキンの変更／テンプレート／画像の挿入方法

「VBで実践！ 外部コンポーネント活用術」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

は.NET開発者中心に生まれ変わりました

＠IT Sepcial

＠IT Special ヘ

• 画面の点滅で取引内容に署名、日本セーフネットが新トークン
• 証明書偽造事件の原因はSSLの仕組みにあるのではない――日本ベリサイン
• IASB議長が来日「IFRSフルアドプションが日本のためになる」
• モバゲーのディー・エヌ・エーがIFRS適用へ
• ディスク要らずのデスクトップ仮想化、そのメリットは？
• ネットワーク仮想化のNiciraがベールを脱いだ
• オープンソース・クラウド技術の相互運用実証タスクフォース設立

ニュース一覧へ

＠IT Sepcial

＠IT Special ヘ