連載
» 2009年05月15日 00時00分 公開

連載:VBで実践! 外部コンポーネント活用術:Webアプリケーション用HTMLエディタ「FCKeditor」を使う (1/3)

ASP.NETのWebページにコントロールとして配置できるリッチなHTMLエディタを紹介。カスタマイズ機能も豊富だ。

[岸本真二郎,デジタルアドバンテージ]
連載:VBで実践! 外部コンポーネント活用術
業務アプリInsider/Insider.NET

powered by Insider.NET

「連載:VBで実践! 外部コンポーネント活用術」のインデックス

連載目次

 「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)には、アセンブリの登録を行う次の記述が追加されます。

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

追加されたアセンブリ登録のための記述

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

 <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" > </FCKeditorV2:FCKeditor>

FCKeditorコントロールのタグ

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

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

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

参照の追加

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

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

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

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

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

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

       1|2|3 次のページへ

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。