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

» 2009年05月15日 00時00分 公開
[岸本真二郎デジタルアドバンテージ]
前のページへ 1|2|3       

■スキンの変更

 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を試してみてはいかがでしょうか。

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

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

前のページへ 1|2|3       

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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