SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

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

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

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

コンポーネントのインストール

 本サンプルアプリケーションでは、「Editor for ASP.NET Wijmo」のC1Editorコントロールを使用します。

 このコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境に「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールする必要があります。

 トライアル版は、グレープシティのWebページからダウンロードできます。

 ダウンロードしたい製品にチェックを付け[申込フォーム]ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。

 トライアル申込フォームが表示されますので必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

 「ComponentOne Studio for ASP.NET Wijmo 2012J」をインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

 追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Editor」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Editor」コントロールを選択する
アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1Editor」コントロールを選択する

 これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル 内容
C1.Web.Wijmo.Controls.4 本体アセンブリ

 また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル 内容
C1.C1Report.4.dll 本体アセンブリ
C1.Web.Wijmo.Controls.4.dll 本体アセンブリ

 なお、.NET Framework 4が必要です。

C1Editorコントロールの概要

 「Editor for ASP.NET Wijmo」のC1Editorコントロールは、専門的知識を持たないユーザーでもWebページ上でHTMLコンテンツを作成できるコントロールです。

 このコントロールは、いわゆるWYSIWYGエディタになっており、Microsoft Wordのように見たままの状態でレイアウトや文字の装飾、画像の挿入といった文書の編集を行えます。

 デザイン、ソースコード、および分割という編集モードを備え、上部にはカスタマイズ可能なリボンパネル、中央にテキストウィンドウ、および下部にツールバーパネル領域を持ち、文書を編集するのに必要な機能がコントロールにあらかじめ組み込まれています。

C1Editorコントロールの主な機能の特徴

 C1Editorコントロールは、以下の特徴を持っています。

Microsoft OfficeリボンスタイルUI

 エディタはMicrosoft Officeスタイルのリボンインターフェースを実装しています。リボンは、関連する各コマンドを一連のタブの下に編成しているため、ユーザーはメニューの階層を移動しなくても、エディタのさまざまな機能を簡単に探索できます。

組み込みスペルチェッカ

 スペルチェック機能が組み込みスペルチェッカによって提供されます。エンドユーザーは、〈チェック〉ボタンを押すだけで、Microsoft Wordと同様のスペルチェック(コンテキストメニューに赤い波線の下線とスペル候補を表示)をすぐに利用できます。

ツールバーのセットの選択

 Common、EditorMode、Formatting、HTMLElements、Style、およびTableEditingツールバーから選択して、必要なツールバーのみ表示するようにエディタをカスタマイズできます。

ドッキング可能なフローティングツールバー

 エンドユーザーは、ドッキング可能なフローティングツールバーを使用して、特定のツールバーとより緊密に作業するように選択できます。実行するには、単にツールバーをドッキングされたパネル領域から選択して、テキストウィンドウ領域にドラッグします。

複数言語サポート

 統合されたスペルチェッカは、英語、オランダ語、フランス語、ドイツ語、イタリア語、ポルトガル語、およびスペイン語など、複数の言語をサポートします。

テーマ

 スマートタグをクリックするだけで、6種類のプレミアムテーマ(Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling)のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成します。

高度な書式設定

 エディタは標準のTextBoxコントロールより高度な書式機能を提供します。これらの書式機能には、サイズ、色、スタイル、太字、斜体などが含まれます。その他の高度な書式機能には、配置、インデント、および箇条書きが含まれます。

クロスブラウザ対応

 IE、Firefox、Safari、Chrome、Operaなどの主要なブラウザをサポートしています。

カスタマイズ可能なディクショナリファイル

 C1SpellCheckerディクショナリエディタで、ディクショナリファイル(.dct)を作成および管理して、単語をメインディクショナリに追加するか、新規ディクショナリを作成します。

デザイン時のカスタマイズ

 プロパティビルダーでは、コードを記述することなくC1Editorの外観および動作を変更できます。

状況依存のメニュー

 右クリックを使用して表示されるコンテキストメニューを標準装備。テキストの切り取り、コピー、貼り付けや、表内をクリックして行の挿入、列の削除、セルの分割など、その場の状況に合ったメニューが表示されます。

Document Object Modelノードを選択するパスセレクタ

 パスセレクタは、現在のカーソル位置のHTMLタグ階層を表示します。パスセレクタ内のタグを選択すると、選択範囲を変更できます。例えば、エディタ内の全ノードを選択するには、パスセレクタ内の<body>要素をクリックします。

CSSのサポート

 CSS(Cascading Style Sheet)のスタイルを使用して、カスタムスキンを定義します。

次のページ
C1Editorコントロールの構成

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7104 2013/05/07 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング