連載：VBで実践！ 外部コンポーネント活用術

Webアプリケーション用HTMLエディタ「FCKeditor」を使う

デジタルアドバンテージ　岸本 真二郎
2009/05/15
Page1 Page2 Page3

■スキンの変更

　FCKeditorでは、スキンによりツールバーの外見を変更することもできます。標準では、「Default」「Office2003」「Silver」という3つのスキンが用意されています。スキンはCSSファイルと画像ファイルで構成されていますが、これら3つのスキンはfckeditor/editor/skinsに格納されています。

　スキンの指定は、このスキン情報が格納されたパスを指定します。デフォルトでは、次のような設定になっています。

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;

　これをOffice 2003のスキンに変更する場合は、次のように書き換えます。

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

　スキンはインターネットから入手することも可能ですし、もちろん独自に作成することも可能です。次の画面は、ダウンロードしたOffice 2007風のスキンを設定した場合のものです。


Office 2007風のスキン

■テンプレート

　スキンに加えて、テンプレートという機能もあります。テンプレートは、あらかじめレイアウトを決めたHTMLのブロック（HTMLドキュメントの構成要素）を用意しておき、それをベースに、ユーザーが入力できるようにするものです。

　テンプレート自体は、fckeditorフォルダの「fcktemplates.xml」で次のように定義されています。この例は、ページの見出しを記述するためのブロックを定義しています。

<Template title="Image and Title" image="template1.gif">
<Description>One main image with a title and text that surround the image.</Description>
<Html>
<![CDATA[
<img style="MARGIN-RIGHT: 10px" height="100" alt="" width="100" align="left"/>
<h3>Type the title here</h3>
Type the text here
]]>
</Html>
</Template>
テンプレート「Image and Title」の定義
XMLファイルでCDATAセクションを使ってHTMLタグが記述されている。

　テンプレートは、定型のレイアウト・パターンによるHTMLドキュメントを作成する場合に役立ちます。テンプレートを追加するには、fcktemplates.xmlに<Template>要素を追加して、HTMLを記述します。

　作成したテンプレートは、ツールバーのボタン（「テンプレート（雛形）」をクリックして表示されるテンプレートの一覧に表示されます。


テンプレートの選択

画像の挿入方法（画像のアップロード）

　最後に画像のアップロード機能について紹介します。FCKeditorでは、作成するHTMLドキュメント内に画像を含めることができます。これには、Webサーバ上にある画像のURLを指定することになりますが、まずローカルPCに保存してある画像をWebサーバにアップロードし、そのURLを取得してテキスト中に画像を表示することも可能です。

　次の画面は、画像を挿入するために、画像のURLを指定しようとしているところです。


画像を挿入するための［イメージ プロパティ］ダイアログ
ツールバーの［イメージ挿入/編集］ボタンにより開く。

　画像を挿入できるようにするためには、IISの設定と構成ファイルの修正が必要になります。

　まず、画像を保存するフォルダを用意し（デフォルトでは「/userfiles」）、ここにIISがファイルを書き込めるように権限を設定しておきます。

　続いて、fckconfig.jpの次の部分(160行目付近）を「'php'」から「'aspx'」に変更します（2カ所）。

var _FileBrowserLanguage  = 'aspx' ;   // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage  = 'aspx' ;   // asp | aspx | cfm | lasso | perl | php | py

　残念ながらこの部分は、カスタム構成ファイルでの設定が行えませんので、fckconfig.jpを直接変更します。

　以上により、ブラウザから画像のアップロードが可能になり、Webサーバの/userfilesフォルダに保存された画像ファイルから選択して、画像を挿入できるようになります。

　次の画面は、上記の［イメージ プロパティ］ダイアログで［サーバー ブラウザー］ボタンをクリックする表示されるリソース・ブラウザです。


リソース・ブラウザ
画像の保存に指定したフォルダの内容を一覧表示して、画像を選択できる。

　ここで画像を選択すると、その画像がドキュメントに挿入されます。次に示すように、生成されたHTMLタグを見ると、/userfilesにある画像ファイルを参照しているのが分かります。


挿入した画像はWebサーバの/userfilesにある画像を参照している

おわりに

　FCKeditorは、TextBoxコントロールの代わりに使ったり、CMS的なWebアプリケーション構築で利用したりと、ASP.NETでもさまざまな用途に利用できます。オープンソースのブログやCMSといった規模の大きなアプリケーション専用として組み込まれている印象が強いFCKeditorですが、ASP.NETによるWebアプリケーションでも問題なく利用できます。

　WindowsフォームアプリケーションでRichTextBoxコントロールを使用するように、WebアプリケーションでFCKeditorを試してみてはいかがでしょうか。End of Article

　

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

TechTargetジャパン

Insider.NET フォーラム 新着記事

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

RSSフィード

＠IT 新着記事

キャリアアップ

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

.NET開発者中心コーナー

- PR -

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH