Webページのデザイン
では、さっそくアプリケーションを作成していきましょう。
作成するのは、HTMLエディタを持ったWebアプリケーションです。文書編集に必要なほとんどの機能はC1Editorコントロールに装備されていますが、文書を保存する機能は組み込まれていませんので、この処理だけコードを記述します。
ページのレイアウト
使用するコントロールは、C1Editorコントロールだけです。
① ツールボックスからC1Editorコントロールのアイコンをページにドラッグ＆ドロップします。
② 今回は、ほとんどの機能をデフォルトのまま使用しますので、テーマだけを変えます。
C1Editorコントロールのタスクトレイを開き、メニュー「テーマ」のリストから「Cobalt」をクリックします。
③ あとは、リボンの「書式」タブにある「上書き保存」ボタンの実行処理を作成するだけです。
まず、プロパティウィンドウを「イベント」に切り替えます。そして、「TextSaved」イベントハンドラを作成します。
④ イベントハンドラでは、FileクラスのWriteAllTextメソッドを使用して、C1Editorコントロールの入力内容をテキストファイルに保存します。
C1EditorコントロールのTextプロパティには、入力した内容がHTMLタグ付きで格納されていますので、これをHTMLファイルとして保存します。その際、保存した日時を加工してファイル名にしています。
保存先は、プロジェクトの「App_Data」フォルダに格納されます。
Imports System.IO
Public Class _Default
Inherits System.Web.UI.Page
Protected Sub C1Editor1_TextSaved(sender As Object, e As EventArgs) Handles C1Editor1.TextSaved
Dim timestamp As String = DateTime.Now.ToString().Replace("/", "-")
timestamp = timestamp.Replace(":", ".")
Dim datafile As String = Server.MapPath("~/App_Data/data") + "_" + timestamp + ".html"
File.WriteAllText(datafile, C1Editor1.Text, Encoding.Default)
End Sub
End Class
using System.IO;
namespace Editor_ASP_cs
{
public partial class _Default : System.Web.UI.Page
{
protected void C1Editor1_TextSaved(object sender, EventArgs e)
{
String timestamp = DateTime.Now.ToString().Replace("/", "-");
timestamp = timestamp.Replace(":", ".");
String datafile = Server.MapPath("~/App_Data/data") + "_" + timestamp + ".html";
File.WriteAllText(datafile, C1Editor1.Text, System.Text.Encoding.Default);
}
}
}
⑤ アプリケーションを実行し、ドキュメントを作成します。
画面は、段落を設定し見出しの文字を大きくして背景色を緑色にしています。色を設定する場合は、画面のように色を選択するダイアログボックスが表示されます。
⑥ リボンにある「上書き保存」ボタンをクリックすると、作成したドキュメントをプロジェクトの「App_Data」フォルダに、HTMLファイルで保存します。ドキュメントを開くと、エディターで作成したのと同様のドキュメントがWebブラウザで表示されます。
⑦ リボンの「挿入」タブをクリックし、「画像の参照」ボタンをクリックします。
「画像ブラウザ」ダイアログボックスが表示されますので、「参照」ボタンをクリックして画像ファイルを選び、「アップロード」ボタンをクリックすると、画像ファイルを読み込みます。
リストのファイル名をクリックすると、横にプレビューが表示されます。
そして、OKボタンをクリックすると、画像データがドキュメントに配置されます。
⑧ 「画像ブラウザ」ダイアログボックスで画像ファイルのアップロードを行うと、画像ファイルはプロジェクトに「DialogUploadFolder」という名称のフォルダが作成され、ここに格納されます。
まとめ
今回は、とりあえずC1Editorコントロールの基本的な機能を使ったアプリケーションを作成しました。
Webページに入力インターフェースを組み込むとなると、HTML標準のテキストボックスを使うぐらいで、少し規模の大きい入力インターフェースはなかなか組み込めませんでした。
C1Editorコントロールは、このようにドキュメントの作成や編集に必要な機能のほとんどがコントロールに組み込まれているため、Webページのデザインを考えるだけでドキュメント編集機能を持ったWebページを作成することができます。
