CodeZine(コードジン)

特集ページ一覧

HTMLエディターを実装したASP.NETアプリケーションの作成

C1Editorコントロールを使ったWebアプリケーションの作成

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/05/07 14:00
目次

Webページのデザイン

 では、さっそくアプリケーションを作成していきましょう。

 作成するのは、HTMLエディタを持ったWebアプリケーションです。文書編集に必要なほとんどの機能はC1Editorコントロールに装備されていますが、文書を保存する機能は組み込まれていませんので、この処理だけコードを記述します。

ページのレイアウト

 使用するコントロールは、C1Editorコントロールだけです。

ページレイアウト
ページレイアウト

 ① ツールボックスからC1Editorコントロールのアイコンをページにドラッグ&ドロップします。

 ② 今回は、ほとんどの機能をデフォルトのまま使用しますので、テーマだけを変えます。

 C1Editorコントロールのタスクトレイを開き、メニュー「テーマ」のリストから「Cobalt」をクリックします。

メニュー「テーマ」のリストから「Cobalt」をクリック
メニュー「テーマ」のリストから「Cobalt」をクリック

 ③ あとは、リボンの「書式」タブにある「上書き保存」ボタンの実行処理を作成するだけです。

 まず、プロパティウィンドウを「イベント」に切り替えます。そして、「TextSaved」イベントハンドラを作成します。

 ④ イベントハンドラでは、FileクラスのWriteAllTextメソッドを使用して、C1Editorコントロールの入力内容をテキストファイルに保存します。

 C1EditorコントロールのTextプロパティには、入力した内容がHTMLタグ付きで格納されていますので、これをHTMLファイルとして保存します。その際、保存した日時を加工してファイル名にしています。

 保存先は、プロジェクトの「App_Data」フォルダに格納されます。

Visual Basic
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
C#
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」という名称のフォルダが作成され、ここに格納されます。

画像ファイルはプロジェクトの「DialogUploadFolder」に格納される
画像ファイルはプロジェクトの「DialogUploadFolder」に格納される

まとめ

 今回は、とりあえずC1Editorコントロールの基本的な機能を使ったアプリケーションを作成しました。

 Webページに入力インターフェースを組み込むとなると、HTML標準のテキストボックスを使うぐらいで、少し規模の大きい入力インターフェースはなかなか組み込めませんでした。

 C1Editorコントロールは、このようにドキュメントの作成や編集に必要な機能のほとんどがコントロールに組み込まれているため、Webページのデザインを考えるだけでドキュメント編集機能を持ったWebページを作成することができます。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

バックナンバー

連載:ComponentZine(ComponentOne)

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5