CodeZine(コードジン)

特集ページ一覧

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

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

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

テキストエディタ

 C1Editorコントロールのテキストエディタは、リッチテキストの作成に使用されます。テキストエディタを次の3つのビューの一つに設定できます。

デザインビュー

 このビューは、テキストエディタのコンテンツをWYSIWYG書式(見たままのデザイン)で表示します。公開または印刷時のコンテンツの外観のリアルタイムシミュレーションを提供します。

ソースビュー

 このビューは、作成文書をHTMLの記述で表示し、HTMLでの編集環境を提供します。

 ソースビューは、直接手動でHTMLマークアップを入力するデザイン画面を提供しますが、リボンインターフェースを使用してHTMLタグをコンテンツに適用することもできます。

分割ビュー

 このビューは、テキストエディタにデザインビューとソースビューの両方を表示します。このビューが呼び出されると、エディタはテキストエディタを2つの垂直セクションに分割します。上部セクションはデザインビュー、下部セクションはソースビューを表示します。このビューは、マークアップを編集の際にコンテンツを即時にプレビュー表示できるため、便利です。

 テキストエディタに追加されたコンテンツが使用可能な画面スペースを超えると、スクロールバーが自動的に表示されます。

 また、これらのビューを切り替えるには、ツールバーを使用します。

デザインビュー(ヘルプより抜粋)
デザインビュー(ヘルプより抜粋)
ソースビュー(ヘルプより抜粋)
ソースビュー(ヘルプより抜粋)
分割ビュー(ヘルプより抜粋)
分割ビュー(ヘルプより抜粋)

パスセレクタ

 パスセレクタは、現在のカーソル位置にあるHTMLタグ階層を表示します。現在選択されているタグはハイライト表示されます。

パスセレクタ
パスセレクタ

ツールバー

 ツールバーを使用すると、エンドユーザーは実行時に表示を切り替え、テキストの折り返しを有効にできます。次の5つのボタン(「デザインビュー」「ソースビュー」「分割ビューー」「ワードラップー」および「フルスクリーン」)を備えています。

ボタン 説明
デザインビュー ボタンをクリックすると、テキストエディタはデザインビューに切り替わります。ここで、ユーザーはコンテンツのリアルタイムプレビューを表示できます。
ソースビュー ボタンをクリックすると、テキストエディタはソースビューに切り替わります。ここで、ユーザーは独自のHTMLのマークアップを記述できます。
分割ビュー ボタンをクリックすると、テキストエディタは分割ビューに切り替わります。ここで、ユーザーはテキストエディタウィンドウに、デザインビューとソースビューの両方を表示できます。
ワードラップ ボタンをクリックすると、ソースコードドキュメントの右余白にソフトリターンが挿入されます。この機能が有効の場合、ユーザーは、左から右方向のスクロールを実行せずに、HTMLを表示および編集できます。デザインビューでは、この機能は利用できません。
フルスクリーン ボタンをクリックすると、エディタで全画面表示と縮小画面表示が切り替わります。
ツールバー
ツールバー

エディタのダイアログボックス

 C1Editorコントロールには、ドキュメントの作成と編集に使用できる13個のダイアログボックスが組み込まれています。処理を実行するために新たに専用のダイアログボックスを用意する必要はありません。

 必要なダイアログボックスはC1Editorコントロールに組み込まれています。

C1Editorコントロールに組み込まれているダイアログボックス
名前 説明
[テンプレートの適用]ダイアログボックス ドキュメントにテンプレートを選択、追加、削除するダイアログボックス
[ソースHTMLドキュメントのクリーンアップ]ダイアログボックス HTMLドキュメントから不必要なタグとシンボルを削除(または置換)を実行するダイアログボック。
[検索と置換]ダイアログボックス テキストの検索・置換を実行するダイアログボックス
[ハイパーリンクの挿入]ダイアログボックス ハイパーリンクをドキュメントに挿入するダイアログボックス
[画像の挿入]/[画像の編集]ダイアログボックス ドキュメントへの[画像の挿入][画像の編集]を行うダイアログボックス
[メディアの挿入]ダイアログボックス メディアファイルをドキュメントに挿入するダイアログボックス
[特殊文字の挿入]ダイアログボックス 特殊文字をドキュメントに挿入するダイアログボックス
[テーブルの挿入]/[テーブルの編集]ダイアログボックス [テーブルの挿入]と[テーブルの編集]を行うダイアログボックスダイアログボックス
[プレビュー]ダイアログボックス ドキュメントをプレビューして印刷するダイアログボックス
[背景色の設定]ダイアログボックス テキストの選択した部分の背景色を設定するダイアログボックス
[前景色の設定]ダイアログボックス ドキュメントの前景色(文字色)を変更するダイアログボックス
[スペルチェッカ]ダイアログボックス スペルミス、誤字、または現在ディクショナリに入っていない単語を検出するなど、スペルチェックを実行するダイアログボックス
[タグの検証]ダイアログボックス 追加または変更を実際のHTMLマークアップタグに入力せずに、HTML属性を表示および編集するダイアログボックス
代表的な組み込みダイアログボックス
代表的な組み込みダイアログボックス

  • 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