Editor for ASP.NET Web Forms

Size: px

Start display at page:

Download "Editor for ASP.NET Web Forms"

ふさこぜんじゅう
5 years ago
Views:

1 更新グレープシティ株式会社

2 目次製品の概要 3 ComponentOne for ASP.NET Web Forms のヘルプ 3 主な特長 4-5 クイックスタート 6 手順 1: コントロールのプロジェクトへの追加 6 手順 2: コントロールの外観のカスタマイズ 6 手順 3: 実行時のコントロールの使用 6-8 C1Editor ランタイム要素 9 ユーザーインタフェース要素 9 リボン 9-10 書式タブ挿入タブテキストエディタパスセレクタ 16 ツールバーエディタのダイアログボックス 17 [ テンプレートの適用 ] ダイアログボックス [ ソース HTML ドキュメントのクリーンアップ ] ダイアログボックス [ 検索と置換 ] ダイアログボックス [ ハイパーリンクの挿入 ] ダイアログボックス [ 画像の挿入 ]/[ 画像の編集 ] ダイアログボックス [ メディアの挿入 ] ダイアログボックス [ 特殊文字の挿入 ] ダイアログボックス [ テーブルの挿入 ]/[ テーブルの編集 ] ダイアログボックス [ プレビュー ] ダイアログボックス 26 [ 背景色の設定 ] ダイアログボックス [ 前景色の設定 ] ダイアログボックス [ スペルチェッカ ] ダイアログボックス 28 [ タグの検証 ] ダイアログボックスキーボードショートカット C1Editor CSS セレクタ 31 1 Copyright GrapeCity, Inc. All rights reserved.

4 製品の概要パワフルな編集コントロール Editor for ASP.NET Web Forms を使用すると専門的知識を持たないユーザーにもあらゆる Web ページ上の HTML コンテンツをオーサリングおよび管理できますこの What-You-See-is-What-You Get (WYSIWYG) エディタは汎用テキストボックスを直感的な Microsoft Word スタイルのエディタに置き換えてくれますさまざまな編集モード ( デザインソースコードおよび分割 ) を備えたこの多用途のツールによりエンドユーザーは HTML コンテンツを希望するスタイルに編集するオプションが提供されます見慣れたユーザーインタフェースには上部にツールバーパネル領域中央にテキストウィンドウおよび下部にツールバーパネル領域がありますカスタマイズ可能なリボンパネル組み込みスペルチェッカおよび完全な JavaScript クライアント側オブジェクトモデルによりコードでもコードなしでもテキストを簡単に操作できます ComponentOne for ASP.NET Web Forms のヘルプ ComponentOne for ASP.NET Web Forms の各コントロールで共通したトピックアセンブリの追加テーマの適用クライアント側情報などについては ASP.NET Web Forms ユーザーガイドを参照してください 3 Copyright GrapeCity, Inc. All rights reserved.

5 主な特長 Editor for ASP.NET Web Forms の主な機能のいくつかを以下に示します Microsoft Office リボンスタイル UI エディタは Microsoft Office スタイルのリボンインタフェースを実装していますリボンは関連する各コマンドを一連のタブの下に編成しているためユーザーはメニューの階層を移動しなくてもエディタのさまざまな機能を簡単に探索できます組み込みスペルチェッカスペルチェック機能が組み込みスペルチェッカによって提供されますエンドユーザーはチェックボタンを押すだけで Microsoft Word と同様の入力に応じたスペルチェック ( コンテキストメニューに赤い波線の下線とスペル候補を表示 ) をすぐに利用できますスペルチェッカーのカスタマイズ SpellCheckerのIgnoreOptions プロパティを使用して組み込みのスペルチェッカーが提供するスペルチェック機能性をカスタマイズできますこのプロパティはスペルチェック中に単語を無視するかどうかを決定するフラグを指定するのに役立ちますツールバーのセットの選択 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 の外観および動作を変更するなど簡単なカスタマイズを行えます状況依存のメニュー右クリックを使用してテキストをすばやく切り取りコピーまたは貼り付けるコンテキストメニューをサポート表内をクリックして行の挿入列の削除セルの分割などを体験するその他のコンテキストメニューをサポート 4 Copyright GrapeCity, Inc. All rights reserved.

6 クリップボードのサポートエディタはキーボードショートカットを提供しテキストをすばやく編集したり [Ctrl]+[C] の組み合わせを使用してテキストをコピーできるようにするなどユーザーエクスペリエンスを拡張します Document Object Model ノードを選択するパスセレクタパスセレクタは現在のカーソル位置に HTML タグ階層を表示しますパスセレクタ内のタグを選択して選択範囲を変更しますたとえばエディタ内の全ノードを選択するにはパスセレクタ内の <body> 要素をクリックします CSS のサポート CSS(Cascading Style Sheet) のスタイルを使用してカスタムスキンを定義します 5 Copyright GrapeCity, Inc. All rights reserved.

7 クイックスタート Editor for ASP.NET Web Forms クイックスタートでは C1Editor コントロールを使用する Web フォームの作成について紹介します以下の各手順では C1Editor コントロールをプロジェクトに追加しデザイナを使ってコントロールの外観をカスタマイズしてアプリケーションを実行しますまず新しい ASP.NET Web アプリケーションを作成して以下の手順を実行します手順 1: : コントロールのプロジェクトへの追加このクイックスタートの最初の手順では ASP.NET Web アプリケーションを作成して C1Editor コントロールを Web ページに追加します 1. ASP.NET プロジェクトを作成します 2. デザインタブをクリックしてデザインビューに切り替えます 3. ツールボックスで C1Editor をダブルクリックしますプロジェクトに C1Editor コントロールが表示されます次の手順ではデザインビューで C1Editor コントロールの外観をカスタマイズします手順 2: : コントロールの外観のカスタマイズこのクイックスタートの前の手順では ASP.NET Web アプリケーションを作成して C1Editor を Web ページに追加しましたこの手順ではデザインビューで C1Editor コントロールの外観をカスタマイズします 1. C1Editor コントロールを右クリックしてそのコンテキストメニューを開き [ プロパティ ] を選択しますプロパティウィンドウが開き C1Editorのプロパティがフォーカス状態になります 2. プロパティウィンドウで次の各タスクを実行します Heightプロパティを 400px に設定します Themeプロパティを cobalt に設定します次の手順ではプロジェクトをビルドして C1Editor のランタイム機能のいくつかを例示します手順 3: : 実行時のコントロールの使用このクイックスタートの前の手順では C1Editor コントロールの外観をカスタマイズしましたこの手順ではプロジェクトを実行して C1Editor のランタイム機能のいくつかを探索します 1. [F5] を押してプロジェクトをビルドします実行時に C1Editor は次のような表示になります 6 Copyright GrapeCity, Inc. All rights reserved.

NET Web Forms を選択して太字太字ボタンをクリックします and を選択して斜体斜体ボタンをクリックします spell chekker を選択して下線下線ボタンをクリックします 4.

8 2. 以下のテキストをコピーして C1Editor のテキストエディタに貼り付けます Editor for ASP.NET Web Forms is easy to use for developers and users alike. It even has a spell chekker! 3. テキストを編集するには以下の手順を実行します Editor for ASP.NET Web Forms を選択して太字太字ボタンをクリックします and を選択して斜体斜体ボタンをクリックします spell chekker を選択して下線下線ボタンをクリックします 4. スペルチェックボタンをクリックしてスペルチェックを初期化します C1Editorがスペルチェックを実行し [ スペルチェッカ ] ダイアログボックスが開きます 5. 修正修正をクリックしてスペルミスした単語 ( chekker ) を正しい単語 ( checker ) に置き換えます 7 Copyright GrapeCity, Inc. All rights reserved.

警告ボックスが開きスペルチェックが完了したことを知らせます 6. OK をクリックして警告ボックスを閉じます [ スペルチェッカ ] ダイアログボックスも閉じます 7. 挿入挿入タブをクリックします 8. カーソルをテキストの後ろに挿入して横線の挿入横線の挿入ボタンテキストのすぐ下に横線が表示されます 9.

9 警告ボックスが開きスペルチェックが完了したことを知らせます 6. OK をクリックして警告ボックスを閉じます [ スペルチェッカ ] ダイアログボックスも閉じます 7. 挿入挿入タブをクリックします 8. カーソルをテキストの後ろに挿入して横線の挿入横線の挿入ボタンテキストのすぐ下に横線が表示されます 9. 日付と時刻日付と時刻ボタンをクリックします横線のすぐ下に現在の日付が表示されますをクリックしますおめでとうございます!Editor for ASP.NET Web Forms クイックスタートの 3 つの手順がすべて正常に完了しましたこのクイックスタートでは C1Editor コントロールをプロジェクトに追加しその外観を編集してランタイム機能のいくつかの使用方法について学びました完成したプロジェクトは次のような表示になります 8 Copyright GrapeCity, Inc. All rights reserved.

メニューの階層を移動しなくてもコマンドを探索できますリボンインタフェースはボタンやドロップダウンリストなどのインタフェース要素を含むタブ付きパネルですこれらのインタフェース要素は

10 C1Editor ランタイム要素以下の各トピックでは C1Editor コントロールのランタイム環境に関する情報を提供しますユーザーインタフェース要素 C1Editor コントロールのユーザーインタフェースは以下の 4 つの領域で構成されますリボンテキストエディタパスセレクタツールバー C1Editor コントロールの各領域は次の画面のようになりますリボン C1Editor コントロールのリボンインタフェースによりユーザーはメニューの階層を移動しなくてもコマンドを探索できますリボンインタフェースはボタンやドロップダウンリストなどのインタフェース要素を含むタブ付きパネルですこれらのインタフェース要素は相互に関係するか関連するコマンドのグループにまとめられて次に類似のエディタタスクを一元管理する一連のタブに配列されます以下の画面は C1Editor リボンインタフェースを示します 9 Copyright GrapeCity, Inc. All rights reserved.

11 C1Editorのリボンには書式書式と挿入挿入の2つのタブがあります以下の各トピックでは各タブとそのコマンドグループについて説明します書式タブ書式タブにはテキストエディタのコンテンツの書式設定に使用できるコマンドグループが含まれます書式書式タブのすぐ下にはアクションフォント段落段落およびレビューレビューの4つのグループがありそれぞれ密接に関連するタスクを格納します次の画面は書式書式タブに関連付けられたグループとボタンを示します以下の各セクションでは各グループのコマンドについて説明しますアクショングループアクショングループのコマンドはドキュメントの保存や直前のアクションを元に戻す操作など一般的なアクションを実行するために使用できます下表にアクショングループのコマンドについて説明しますボタン名前上書き保存元に戻すやり直しプレビュークリーンアップ切り取りコピー貼り付けすべて選択説明アプリケーションが Text プロパティを使用して C1Editor コントロールからコンテンツを取得する Web サーバーへのポストバックを発生させますその後コントロールはユーザーの変更の保存操作と一致するアクションを実行します別の [ 元に戻す ] を除きドキュメントに対して最も新しく実行された操作を消去して古い状態に戻します [ 元に戻す ] 操作を無効にするには Redo コマンドを使用します Undo コマンドを無効にするかバッファをより現在の状態に進めます印刷の [ プレビュー ] ダイアログボックス [ プレビュー ] ダイアログボックス ) を参照 ) を開きますここでユーザーがプレビューウィンドウサイズを選択して C1Editorのコンテンツを印刷できます [ ソース HTML ドキュメントのクリーンアップ ] ダイアログボックス ( ソース HTML ドキュメントのクリーンアップ ] ダイアログボックス ) を参照 ) を開きますここでユーザーは Microsoft Word のタグをドキュメントから削除できます元のソーステキストを削除してクリップボードに置きます選択されたテキストをクリップボードにコピーしますテキストをクリップボードから貼り付けますテキストウィンドウ内のすべてのコンテンツを選択しますフォントグループフォントグループの下のコマンドはフォント設定の操作に使用できます下の表でフォントグループの各コマンドについて説明します 10 Copyright GrapeCity, Inc. All rights reserved.

12 ボタン名前フォント名フォントサイズ背景色フォント色太字イタリック体下線取り消し線下付き上付きテンプレート書式の削除説明フォントスタイルを選択できます [ フォント ] ドロップダウンリストには Arial Courier New Garamond Tahoma Times Verdana Wingdings が含まれますテキストのサイズを変更します [ サイズ ] コンボボックスには最小小やや小中やや大大最大が含まれます [ 背景色の設定 ] ダイアログボックス ([ 背景色の設定 ] ダイアログボックスを参照 ) を表示しますここでユーザーは背景色を選択できます色は後続の入力または選択されたテキスト範囲に適用できます [ 前景色の設定 ] ダイアログボックス ([ 前景色の設定 ] ダイアログボックスを参照 ) を表示しますここでユーザーはテキスト色を選択できます色は後続の出力または選択されたテキスト範囲に適用できます タグを使用してテキストを周りのテキストより濃い色にしテキストを強調します タグを使用して斜体書式を適用しテキストを強調します タグを使用してテキストのすぐ下にラインを追加します <strike> タグを使用してテキストの中央に横線を追加します タグを使用してテキストを通常の活字より小さく表示しテキストをベースラインより少し下に設定します タグを使用してテキストを通常の活字より小さく表示しテキストをベースラインより少し上に設定します [ テンプレートの適用 ] ダイアログボックス ([ テンプレートの適用 ] ダイアログボックスを参照 ) を開きますここでユーザーはテンプレートを追加削除および保存できます現在選択されているテキストの書式を削除します段落段落グループ内の各コマンドは段落設定の操作に使用できます下の表で段落グループの各コマンドについて説明しますボタン名前左揃え中央揃え右揃え両端揃え枠説明テキストをページの左側に配置して左余白に詰めますこの場合テキストの右側は不揃いに表示されますテキストをページの中央に配置しますテキストの各行は左余白と右余白から等距離に配置されますテキストをページの右側に配置してテキストを右余白に詰めますテキストを右と左余白の両方に配置します両端揃えにしたテキストは両余白に沿って平らになりますが各単語は語間を埋めるように広がりますこのタイプの書式は Web ブラウザサポートに制約されます枠を現在選択されているテキストに適用します 11 Copyright GrapeCity, Inc. All rights reserved.

13 番号付きリスト箇条書きリストインデント解除インデントテキストを番号付きリストに書式設定します順序づけられたリスト ( 数字または英数字 ) はリスト項目の順番が意味を持つことを示しますテキストを順序付けられていないリストに書式設定します順序づけられていないリスト ( または箇条書きリスト ) はリスト項目の順序が意味を持たないことを示しますテキストのインデントを左に戻しますこの書式はテキストのコンテンツが前にインデントされていた場合のみ適用されますテキストをさらに右方向に配置して周りのテキストから区別しますレビューグループレビューグループの下の各コマンドは現在のドキュメントの見直しに使用できます下の表でレビューレビューグループの各コマンドについて説明しますボタン名前スペルチェック説明現在のドキュメントのスペルチェックをアクティブ化します詳細については [ スペルチェッカ ] ダイアログボックスを参照してください検証検索 [ タグの検証 ] ダイアログボックスを開きます詳細については [ タグの検証 ] ダイアログボックスを参照してください [ 検索と置換 ] ダイアログボックスを開きますここでユーザーは特定の文字列を検索して必要に応じてそれらの文字列を置換できます挿入タブ挿入挿入タブにはエンドユーザーが画像や段落区切りなどの項目をテキストエディタに挿入できるコマンドのグループが含まれます書式書式タブのすぐ下にはテーブル区切りフォームおよび特殊特殊の4つのグループがありそれぞれ密接に関連するタスクを格納します以下の各セクションでは各グループのコマンドについて説明しますテーブルグループテーブルグループの下の各コマンドはテーブルの追加と操作に使用できます下の表でテーブルグループの各コマンドについて説明しますボタン名前テーブル列の挿入行の挿入セルの挿入説明ドロップダウン矢印をクリックするとテーブルの挿入か既存のテーブルの編集のいずれかを選択できます詳細については [ テーブルの挿入 ]/ [ テーブルの編集 ] ダイアログボックスを参照してください列をテーブルに挿入しますこの書式はテーブルが追加されていた場合にのみ適用されます行をテーブルに挿入しますこの書式はテーブルが追加されていた場合にのみ適用されますセルをテーブルに挿入しますこの書式はテーブルが追加されていた場合にのみ適用されます 12 Copyright GrapeCity, Inc. All rights reserved.

14 行の削除列の削除セルの削除セルの分割セルの結合現在のカーソル位置にある行を削除しますこの書式は行がすでに追加されていた場合にのみ適用されます現在のカーソル位置にある列を削除しますこの書式は列がすでに追加されていた場合にのみ適用されます現在のカーソル位置にあるセルを削除しますこの書式はセルがすでに追加されていた場合にのみ適用されますテーブル内の 1 つのセルを 2 つのセルに分割しますこの書式はテーブルがドキュメントに追加されている場合にのみ適用されますテーブル内の 2 つのセルをマージしますこの書式はテーブルがドキュメントに追加されている場合にのみ適用されます区切りグループ区切りグループの下の各コマンドは各種の区切りをドキュメントに追加するために使用できます下の表で区切りループの各コマンドについて説明しますボタン名前区切りの挿入パラグラフの挿入印刷改ページの挿入横線の挿入説明改行をドキュメントの現在のカーソル位置に挿入しますドキュメントの現在のカーソル位置に段落を挿入しますドキュメントの現在のカーソル位置に改ページを挿入します改ページの下のコンテンツは別ページに印刷されますドキュメントの現在のカーソル位置に横線ルールを挿入しますフォームグループフォームグループの下の各コマンドは各種のフォームコントロールをドキュメントに追加するために使用できます下の表でフォームグループの各コマンドについて説明しますボタン名前説明フォーム <form> タグを挿入しますテキスト領域テキストボックスパスワードフィールド画像ボタンボタンリストボックスドロップダウンリストラジオボタンテキスト領域を 4 行の高さで挿入しますテキストボックスを挿入します高さと幅は調整可能ですパスワードフィールド入力ボックスを挿入しますこのボックスに入力された情報はすべてアスタリスクに置き換えられます <IMG> タグを挿入します SRC 属性はソースコード編集モードで編集できます現在のカーソル位置にボタンを挿入しますリストボックスを挿入します高さと幅は調整可能ですドロップダウンボックスを挿入します幅は調整可能ですラベル付きのラジオボックスを挿入します 13 Copyright GrapeCity, Inc. All rights reserved.

15 チェックボックスラベル付きのチェックボックスを挿入します特殊グループ特殊特殊グループの下の各コマンドはリンクとマルチメディア項目をドキュメントに追加するために使用できます下の表で特殊特殊グループの各コマンドについて説明しますボタン名前リンク画像ブラウザメディア特殊文字の挿入日付と時刻の挿入説明 [ ハイパーリンクの挿入 ] ダイアログボックス [ ハイパーリンクの挿入 ] ダイアログボックス ) を参照 ) を開きますここでユーザーはハイパーリンクの URL の挿入ハイパーリンクの HTML コードの表示 CSS テキストを入力して検査対象の DOM 要素にスタイルを適用できます [ 画像の挿入 ] ダイアログボックスまたは [ 画像の編集 ] ダイアログボックス ([ 画像の挿入 ]/[ 画像の編集 ] ダイアログボックスを参照 ) を開きますここでユーザーは画像ソースの指定画像のテキスト / 高さ / 幅の変更 CSS テキストを入力して検証対象の DOM 要素にスタイルに適用する操作ができます [ メディアの挿入 ] ダイアログボックス ( [ メディアの挿入 ] ダイアログボックスを参照 ) を開きますここでユーザーはメディアソースの指定テキスト / 幅 / 高さの変更ができます [ 特殊文字の挿入 ] ダイアログボックス ( [ 特殊文字の挿入 ] ダイアログボックスを参照 ) を開きますここでユーザーはやなどの特殊文字とシンボルを挿入できます現在のカーソル位置に現在の日付と時刻を挿入しますテキストエディタ C1Editor コントロールのテキストエディタはリッチテキストの作成に使用されますテキストエディタを次の 3 つのビューの 1 つに設定できますデザインビューこのビューはテキストエディタのコンテンツを What-You-See-Is-What-You-Get(WYSIWYG) 書式で表示します公開または印刷時のコンテンツの外観のリアルタイムシミュレーションを提供します下の図にデザインビューのテキストエディタを示します 14 Copyright GrapeCity, Inc. All rights reserved.

ユーザーはリボンインタフェースを使用して HTML タグをこのビューのコンテンツに適用することもできます

16 ソースビューこのビューは HTML の記述と編集用のハンドコーディング環境を提供しますソースビューは手動で HTML のマークアップを入力するユーザーに一般に使用されますがユーザーはリボンインタフェースを使用して HTML タグをこのビューのコンテンツに適用することもできます以下の画面にソースビューのテキストエディタを示します 15 Copyright GrapeCity, Inc. All rights reserved.

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

17 分割ビューこのビューはテキストエディタにデザインビューとソースビューの両方を表示しますこのビューが呼び出されるとエディタはテキストエディタを2つの垂直セクションに分割します上部セクションはデザインビュー下部セクションはソースビューを表示しますこのビューはマークアップを編集の際にコンテンツを即時にプレビュー表示できるため便利です下の図に分割分割ビューのテキストエディタを示しますテキストエディタの初期ランタイムビューを設定するにはデザイン時に EditorMode プロパティを設定します EditorMode プロパティは WYSIWYG( デザインビュー ) Split( 分割ビュー ) および Code ( ソースビュー ) の 3 つの設定の 1 つに設定できますまたエンドユーザーはエディタ下部のツールバー ( ツールバー ) を参照 ) を使用して実行時にビューを選択することもできますテキストエディタに追加されたコンテンツが使用可能な画面スペースを超えるとスクロールバーが自動的に表示されますパスセレクタパスセレクタは現在のカーソル位置に HTML タグ階層を表示します現在選択されているタグは黄色でハイライト表示されます以下の画面は C1Editor のパスセレクタをハイライト表示しますユーザーはパスセレクタ内のタグを選択して選択範囲を変更できますたとえばパスセレクタが現在 3 つのタグ <body> および を表示していると仮定します は黄色にハイライト表示され段落内の下線を引いた単語である現在の選択をマークします を選択すると選択は段落全体を包含します <body> を選択するとページ全体が選択されますツールバーツールバーを使用するとエンドユーザーは実行時に表示を切り替えテキストの折り返しを有効にできます 5つのボタン ( デザインビューデザインビューソースビューソースビュー分割ビュー分割ビューワードラップおよびフルスクリーン ) を備えておりそれらについて 16 Copyright GrapeCity, Inc. All rights reserved.

18 下の表で説明しますボタン名前デザインビューソースビュー分割ビューワードラップフルスクリーン説明デザインビューデザインビューボタンをクリックするとテキストエディタはデザインビューに切り替わりますここでユーザーはコンテンツのリアルタイムプレビューを表示できますデザインビューについての詳細はテキストエディタを参照してくださいソースビューソースビューボタンをクリックするとテキストエディタはソースビューに切り替わりますここでユーザーは独自の HTML のマークアップを記述できますソースビューについての詳細についてはテキストエディタを参照してください分割ビュー分割ビューボタンをクリックするとテキストエディタは分割ビューに切り替わりますここでユーザーはテキストエディタウィンドウにデザインビューとソースビューの両方を表示できます分割ビューについての詳細はテキストエディタを参照してくださいワードラップボタンをクリックするとソースコードドキュメントの右余白にソフトリターンが挿入されますこの機能が有効の場合ユーザーは左から右方向のスクロールを実行せずに HTML を表示および編集できますデザインビューではこの機能は利用できませんフルスクリーンボタンをクリックするとエディタで全画面表示と縮小画面表示が切り替わります以下の画面は C1Editor のツールバーをハイライト表示しますエディタのダイアログボックス C1Editor コントロール内にはユーザーが C1Editor ドキュメントの作成と編集に使用できるいくつかのダイアログボックスがあります以下のトピックでは C1Editor コントロールからアクセスできるダイアログボックスについて説明します [ テンプレートの適用 ] ダイアログボックス [ テンプレートの適用 ] ダイアログボックスではユーザーはドキュメントにテンプレートを選択追加削除できます [ テンプレートの適用 ] ダイアログボックスにアクセスするには C1Editor の書式書式タブを選択してテンプレートボタンクしますをクリッ 17 Copyright GrapeCity, Inc. All rights reserved.

19 ドキュメント内の既存のテンプレートを使用するには [ テンプレートの選択 ] ボックスからテンプレートを選択して OK をクリックします既存のテンプレートを削除するには [ テンプレートの選択 ] ボックスからテンプレートを選択して選択の削除選択の削除をクリックします現在のページをテンプレートとして保存するには名前と説明フィールドに入力して現在のページをテンプレートとして保存現在のページをテンプレートとして保存をクリックします [ ソース HTML ドキュメントのクリーンアップ ] ダイアログボックス [ ソース HTML ドキュメントのクリーンアップ ] ダイアログボックスではユーザーはソース HTML ドキュメントから不必要なタグとシンボルを削除 ( ある場合には置換 ) できます [ ソース HTML ドキュメントのクリーンアップ ] ダイアログボックスにアクセスするには C1Editorの書式書式タブを選択してクリーンアップボタンをクリックします 18 Copyright GrapeCity, Inc. All rights reserved.

[ ドキュメントソース ] ペインはソース HTML ドキュメントのプレビューを提供します [ ドキュメントソース ] ペインのすぐ下には一連のチェックボックスがありそれぞれソースドキュメントから変更または削除できるさまざまな HTML 要素を示しますソースマークアップを変更または削除するにはチェックボックスを選択して OK をクリックします [ ソース HTML

20 [ ドキュメントソース ] ペインはソース HTML ドキュメントのプレビューを提供します [ ドキュメントソース ] ペインのすぐ下には一連のチェックボックスがありそれぞれソースドキュメントから変更または削除できるさまざまな HTML 要素を示しますソースマークアップを変更または削除するにはチェックボックスを選択して OK をクリックします [ ソース HTML ドキュメントのクリーンアップ ] ダイアログボックスが閉じてドキュメントのソースの選択された要素が変更されます [ 検索と置換 ] ダイアログボックス [ 検索と置換 ] ダイアログボックスではユーザーはテキストを検索して選択した場合は別のテキストに置換します [ 検索と置換 ] ダイアログボックスにアクセスするには C1Editorの書式書式タブを選択して検索検索ボタンをクリックします 19 Copyright GrapeCity, Inc. All rights reserved.

21 特定のテキストを検索するには [ 検索 ] テキストボックスにテキストを入力して検索検索をクリックします特定のテキストを置換するには置換前のテキストを [ 検索 ] テキストボックスに入力し置換後のテキストを [ 置換 ] テキストボックスに入力して置換置換をクリックします [ ハイパーリンクの挿入 ] ダイアログボックス [ ハイパーリンクの挿入 ] ダイアログボックスではユーザーはハイパーリンクをドキュメントに挿入できます [ ハイパーリンクの挿入 ] ダイアログボックスを開くには挿入挿入タブを選択してリンクボタンをクリックします 20 Copyright GrapeCity, Inc. All rights reserved.

22 下の表で [ ハイパーリンクの挿入 ] ダイアログボックスの各要素について説明します要素アドレスラジオボタン表示文字列ターゲット説明リンク先のパス [ ハイパーリンクの挿入 ] ダイアログボックスのラジオボタンを使用して [URL] [ アンカー ] [ 電子メール ] および[ ローカルファイル ] の4つのリンクタイプから選択できますアンカーを選択するとドロップダウンリストがアクティブ化してリストからアンカー名を選択できますリンクとして表示するテキストターゲットはリンク先で開く領域です _blank _parent _self および _top の 4 つの領域から選択できます Css ハイパーリンクに適用する CSS スタイルの名前 ( ある場合 ) 参照ボタンアップロードボタン参照参照ボタンは [ アップロードするファイルの選択 ] ダイアログボックスを開きますここでリンク先のハードドライブ上のファイルを選択できますアップロードボタンは [ アップロードするファイルの選択 ] ダイアログボックスで選択したファイルを ~/DialogUploadFolder ディレクトリにアップロードします [ 画像の挿入 ]/[ 画像の編集 ] ダイアログボックス [ 画像の挿入 ] ダイアログボックスと [ 画像の編集 ] ダイアログボックスは外観と機能がほぼ同じでどちらも画像の参照画像の参照ボタンをクリックしてアクセスできます画像が選択されていないときに画像の参照画像の参照ボタンをクリックすると [ 画像の挿入 ] ダイアログボックスが表示されます一方画像が C1Editor のテキストエディタで選択されているときに画像の参照画像の参照ボタンをクリックすると [ 画像の編集 ] ダイアログボックスが表示されます 21 Copyright GrapeCity, Inc. All rights reserved.

23 ユーザーは以下の各フィールドに情報を追加できます名前画像 SRC 画像の代替テキスト説明画像の URL パス何らかの理由で画像を表示できないときに表示するテキスト画像の幅画像の幅 ( ピクセル ) 画像の高さ画像の高さ ( ピクセル ) CSS テキストグラフィックに適用する CSS スタイルの名前 ( ある場合 ) 画像の場所を指定するには参照参照をクリックしますその画像を [ 画像の選択 ] ボックスに追加するにはアップロードをクリックします [ メディアの挿入 ] ダイアログボックス [ メディアの挿入 ] ダイアログボックスを使用してユーザーはメディアファイルをドキュメントに挿入できます [ メディアの挿入 ] ダイアログボックスを開くには挿入挿入タブを選択してメディアボタンをクリックします 22 Copyright GrapeCity, Inc. All rights reserved.

下の表で [ メディアの挿入 ] ダイアログボックスの各要素について説明します名前メディアタイプメディア URL 幅高さ説明 flash video applet other の 4 種類から選択できますメディアファイルへの URL パスメディアファイルの幅メディアファイルの高さ [ 特殊文字の挿入 ]

24 下の表で [ メディアの挿入 ] ダイアログボックスの各要素について説明します名前メディアタイプメディア URL 幅高さ説明 flash video applet other の 4 種類から選択できますメディアファイルへの URL パスメディアファイルの幅メディアファイルの高さ [ 特殊文字の挿入 ] ダイアログボックス [ 特殊文字の挿入 ] ダイアログボックスではユーザーは特殊文字をドキュメントに挿入できます [ 特殊文字の挿入 ] ダイアログボックスを開くには挿入挿入タブを選択して特殊文字の挿入特殊文字の挿入ボタンをクリックします 23 Copyright GrapeCity, Inc. All rights reserved.

25 [ 特殊文字の挿入 ] ダイアログボックスの左側にはプレビューウィンドウがありユーザーは特殊文字とその名前をプレビューできます [ 特殊文字の挿入 ] ダイアログボックスの右側には特殊文字のリストがあり [ 分離記号 ] [Symbols] [ 発音区別符号 ] の3つのセクションに分割されています特殊文字をプレビューするにはカーソルをその文字の上に置きますプレビューウィンドウに特殊文字の拡大画像と特殊文字の名前が表示されます特殊文字を選択してドキュメントに挿入するにはその文字をクリックします [ テーブルの挿入 ]/[ テーブルの編集 ] ダイアログボックス [ テーブルの挿入 ] と [ テーブルの編集 ] ダイアログボックスは外観がほぼ同じですが各ダイアログボックスの機能は少し異なります [ テーブルの挿入 ] ダイアログボックスはテーブルをドキュメントに追加するのに対し [ テーブルの編集 ] ダイアログボックスは既存のテーブルの編集のみに使用できます各ダイアログボックスは同じ入力フィールドを保持しそれぞれコードを使用せずにテーブルの属性を調整する能力を備えています [ テーブルの挿入 ] ダイアログボックスを開くには挿入挿入タブを選択して [ テーブル ] ドロップダウン矢印をクリックして挿入をクリックします [ テーブルの挿入 ] ダイアログボックスが開き次のような図になります 24 Copyright GrapeCity, Inc. All rights reserved.

[ テーブルの編集 ] ダイアログボックスを開くには挿入挿入タブをクリックしてテーブルを選択し [ テーブル ] ドロップダウン矢印をクリックして編集編集をクリックします [ テーブルの編集 ] ダイアログボックスが開き選択したテーブルの現在の定義が入力フィールドに表示され次のような画面になります下の表で [ テーブルの挿入 ] と [

26 [ テーブルの編集 ] ダイアログボックスを開くには挿入挿入タブをクリックしてテーブルを選択し [ テーブル ] ドロップダウン矢印をクリックして編集編集をクリックします [ テーブルの編集 ] ダイアログボックスが開き選択したテーブルの現在の定義が入力フィールドに表示され次のような画面になります下の表で [ テーブルの挿入 ] と [ テーブルの編集 ] ダイアログボックスの各フィールドについて説明しますフィールド行数列数説明テーブルの行数テーブルの列数テーブルの幅テーブルの幅 ( ピクセル ) テーブルの高さテーブルの高さ ( ピクセル ) 枠線の太さ表の枠線の太さを指定します 25 Copyright GrapeCity, Inc. All rights reserved.

セル内の余白各セル枠とセルコンテンツの間のスペース量 ( ピクセル ) セル間のスペースセルとテーブルの間のスペース量 ( ピクセル ) CSS テキスト背景色テーブルに関連付けられた CSS スタイルテーブルの背景色この色は手動で入力するかダイアログボックスから選択できますダイアログボックスを開くには.

27 セル内の余白各セル枠とセルコンテンツの間のスペース量 ( ピクセル ) セル間のスペースセルとテーブルの間のスペース量 ( ピクセル ) CSS テキスト背景色テーブルに関連付けられた CSS スタイルテーブルの背景色この色は手動で入力するかダイアログボックスから選択できますダイアログボックスを開くには... ボタンをクリックします [ プレビュー ] ダイアログボックス [ プレビュー ] ダイアログボックスではユーザーはドキュメントをプレビューして印刷できます [ プレビュー ] ダイアログボックスにアクセスするには C1Editorの書式書式タブを選択してプレビュープレビューボタンをクリックしますユーザーはドキュメントを印刷する前に [ プレビュー ] ダイアログボックス内でそのプレビューを表示できますラジオボタンを選択して 3 種類の解像度 (640 x x 600 および 1024 x 768) でのプレビュー表示を選択できますデフォルトでは [ 分割ページ ] オプションが選択されますこれが選択されている場合プレビューするドキュメントはページ単位で表示されますユーザーは前のページと次のページボタンをクリックするとプレビューしているページを変更できます前のページと次のページボタンの間にあるページインジケータにプレビューするページ番号およびドキュメントの合計ページ数が表示されます [ 分割ページ ] オプションが選択されていない場合プレビューウィンドウにはドキュメント全体が表示されます [ 分割ページ ] オプションが OFF の場合ドキュメントのページ数が表示されないことに注意してください [ プレビュー ] ダイアログボックスには [ ページの印刷 ] と [ すべて印刷 ] の2つの印刷オプションがあります [ ページの印刷 ] をクリックすると現在のページが印刷されます [ すべて印刷 ] をクリックするとドキュメント内の全ページが印刷されます [ プレビュー ] ダイアログボックス閉じるには閉じるをクリックします [ 背景色の設定 ] ダイアログボックス [ 背景色の設定 ] ダイアログボックスではユーザーはテキストの選択した部分の背景色を変更できます [ 背景色の設定 ] ダイアログボックスにアクセスするには C1Editor の書式書式タブを選択して背景色背景色ボタンをクリックします 26 Copyright GrapeCity, Inc. All rights reserved.

[ 背景色の設定 ] ダイアログボックスの1 列目は色スペクトルの一部分の色グラデーションを表示しますこれを使ってユーザーは同じ色のさまざまな陰影から選択できますユーザーは虹色スペクトル (2 番目の列 ) の色を選択してグラデーションの色を変更できますユーザーがスペクトルの異なる部分を選択すると 1 番目の列のグラデーションがユーザーの選択を反映するように変化して

28 [ 背景色の設定 ] ダイアログボックスの1 列目は色スペクトルの一部分の色グラデーションを表示しますこれを使ってユーザーは同じ色のさまざまな陰影から選択できますユーザーは虹色スペクトル (2 番目の列 ) の色を選択してグラデーションの色を変更できますユーザーがスペクトルの異なる部分を選択すると 1 番目の列のグラデーションがユーザーの選択を反映するように変化してユーザーは背景色を選択できますウィンドウの左端に選択した色が表示され [ 選択した色 ] テキストボックスにその16 進値が示されます OK をクリックすると変更がドキュメントに適用されます [ 前景色の設定 ] ダイアログボックス前景色の設定 ] ダイアログボックスではユーザーはドキュメントの前景色を変更できます [ 前景色の設定 ] ダイアログボックスにアクセスするには C1Editor の書式書式タブを選択してフォント色フォント色ボタンをクリックします [ 前景色の設定 ] ダイアログボックスの1 列目は色スペクトルの一部分の色グラデーションを表示しますこれを使ってユーザーは同じ色のさまざまな陰影から選択できますユーザーは虹色スペクトル (2 番目の列 ) の色を選択してグラデーション 27 Copyright GrapeCity, Inc. All rights reserved.

の色を変更できますユーザーがスペクトルの異なる部分を選択すると 1 番目の列のグラデーションがユーザーの選択を反映するように変化してユーザーは背景色を選択できますウィンドウの左端に選択した色が表示され [ 選択した色 ] テキストボックスにその16 進値が示されます OK をクリックすると変更がドキュメントに適用されます [ スペルチェッカ ] ダイアログボックス [ スペルチェッカ

29 の色を変更できますユーザーがスペクトルの異なる部分を選択すると 1 番目の列のグラデーションがユーザーの選択を反映するように変化してユーザーは背景色を選択できますウィンドウの左端に選択した色が表示され [ 選択した色 ] テキストボックスにその16 進値が示されます OK をクリックすると変更がドキュメントに適用されます [ スペルチェッカ ] ダイアログボックス [ スペルチェッカ ] ダイアログボックスはスペルチェッカがスペルミス誤字または現在ディクショナリに入っていない単語を検出した場合にのみ表示されますスペルチェックを実行するには書式書式タブを選択してスペルチェックをクリックします [ スペルチェッカ ] ダイアログボックスには 2つのダイアログボックスと1つのドロップダウンリストがあります [ 辞書にない単語 ] テキストボックスにはスペルチェッカで問題になった単語が表示されます [ 修正候補 ] テキストボックスと [ 修正候補一覧 ] ドロップダウンリストは相互に関連しています [ 修正候補 ] テキストボックスにはユーザーが修正修正またはすべて修正をクリクしたときに適用される単語が含まれます [ 修正候補一覧 ] ドロップダウンリストにはその他の置換の候補が含まれています [ 修正候補一覧 ] ドロップダウンリストから新しい単語を選択するとその単語が [ 修正候補 ] テキストボックスに追加され元そこにあった単語と置き換わりますスペルミスの単語を [ 修正候補 ] ダイアログボックスの変更候補に修正するには修正修正をクリックしますスペルミスの単語のすべてのインスタンスを [ 修正候補 ] ダイアログボックスの1つに修正するにはすべて修正すべて修正をクリックします場合によっては [ 辞書にない単語 ] テキストボックスの単語を修正したくない場合があります現在の候補を無視するには無視無視をクリックしますその修正候補のすべてのインスタンスを無視するにはすべて無視すべて無視をクリックします [ タグの検証 ] ダイアログボックス [ タグの検証 ] ダイアログボックスではユーザーは追加または変更を実際の HTML マークアップタグに入力せずに HTML 属性を表示および編集できますユーザーはデザインビューまたは分割分割ビューで作業しているときにのみこの機能にアクセスできます [ タグの検証 ] ダイアログボックスにアクセスするには以下の手順を実行します 1. C1Editor のツールバーのデザインビューデザインビューボタンをクリックしますテキストエディタで検証対象の要素の上にカーソルを置きます 2. C1Editor の書式書式タブを選択してタグの検証タグの検証ボタン [ タグの検証 ] ダイアログボックスが開きますをクリックします 28 Copyright GrapeCity, Inc. All rights reserved.

30 開くと [ タグの検証 ] ダイアログボックスにはユーザーが選択したタグに関連付けられた属性のリストが表示されますたとえば タグはクラスポイントサイズおよび色などの属性を表示します一方 <TD> タグは背景色列スパン行スパンなどの属性を表示しますユーザーは属性を変更追加または削除できます属性を変更または追加するには情報を属性のテキストボックスに入力し [ 保存 ] ボックスを選択して OK をクリックしますデフォルトでは属性が空の場合でもタグに関連付けられたすべてのタイプの属性が表示されます空の属性ボックスをビューから非表示にするには [ 空でない属性のみを表示 ] ボックスを選択します [ 内部 HTML] ボックスは HTML タグ内にネストされたテキストを表示しますこのテキストを変更するにはテキストをボックスに入力するだけです [CSS テキスト ] ボックスにこの HTML タグに関連付けられた CSS スタイルの名前が表示されます CSS スタイルが適用されていない場合このボックスは空となりますキーボードショートカット C1Editor コントロールではユーザーはキーボードショートカットを使用していくつかの機能を実行できます下の表でキーボードショートカットからアクセスできる機能について説明します機能コピーキーボードショートカット [Ctrl]+[C] 29 Copyright GrapeCity, Inc. All rights reserved.

32 C1Editor CSS セレクタ CSS スタイルを使用して C1Editor の要素をスタイル設定しその外観を真に独特のものにすることができますカスタマイズ処理を簡素化するために ComponentOne for ASP.NET Web Forms にはその 6 種類の組み込みテーマごとに CSS セレクタが組み込まれています背景テキストフォント枠輪郭マージン埋め込みリスト表などの一般的な CSS プロパティを該当する CSS セレクタに適用できます一般に使用される個々の CSS セレクタとグループ化された CSS セレクタのリストについてはプロジェクトの C1Editor コントロールを選択し Visual Studio プロパティウィンドウで CssClass プロパティの横にあるドロップダウンリストを表示します C1Editor CSS セレクタは下図のように wijmo-wijeditor から開始します個々の CSS セレクタをグループとして組み合わせ CSS セレクタをより具体的かつ強力なものにすることができます 31 Copyright GrapeCity, Inc. All rights reserved.

33 クライアント側の機能 Editor for ASP.NET Web Forms コントロールには非常に充実したクライアント側オブジェクトモデルがありますそのメンバはほとんどがサーバー側コントロールのメンバと同じです C1Editor コントロールが表示されるとクライアント側コントロールのインスタンスが自動的に生成されますこれはサーバーにポストバックしなくても C1Editor コントロールのプロパティやメソッドにアクセスできるということですクライアント側コードを使用すれば時間をかけて Web サーバーに情報を送信しなくても Web ページに多くの機能を実装できますそのためクライアント側オブジェクトモデルを使用することで Web サイトの効率を高めることができますクライアント側イベント Editor for ASP.NET Web Forms には複数のクライアント側イベントが含まれていますそれらを利用すれば無効な文字の入力などの処理が行われたときに C1Editor コントロールを操作できますクライアント側イベントの表にリストされたサーバー側プロパティを使用して特定のクライアント側イベントに反応する JavaScript 関数の名前を指定できますたとえば invalidinput という JavaScript 関数を割り当てて無効な文字が入力されたときに応答させるには OnClientInvalidInput プロパティを invalidinput に設定します下の表にクライアントスクリプトで使用できるイベントを示しますこれらのプロパティはサーバー側で定義されていますが実際のイベントや各 JavaScript 関数用に宣言する名前はクライアント側で定義されますイベントのサーバー側プロパティ名イベント名説明 OnClientInitialized initialized コントロールが初期化された後に発生します OnClientInitializing initializing コントロールが初期化される前に発生します OnClientInvalidInput invalidinput 無効な文字が入力されたときに発生します OnClientTextChanged textchanged 入力テキストが変更されたときに発生します OnClientTriggerMouseDown triggermousedown トリガーボタン上でマウスボタンが押されたときに発生します OnClientTriggerMouseUp triggermouseup トリガーボタン上でマウスボタンを離したときに発生します OnClientDateChanged (InputDate only) datechanged 日付値を変更した後に発生します OnClientValueBoundsExceeded (InputNumber only) OnClientValueChanged (InputNumber only) valueboundsexceeded valuechanged 入力値が有効範囲を超えたときに発生します値を変更した後に発生します 32 Copyright GrapeCity, Inc. All rights reserved.

34 タスク別ヘルプタスク別ヘルプは Visual Studio のプログラミングに精通しているユーザーを対象としていますヘルプに記述された手順に従うことによって Editor for ASP.NET Web Forms のさまざまな機能を実演するプロジェクトを作成して Editor for ASP.NET Web Forms の用途を理解することができますタスク別ヘルプの各トピックでは新しい ASP.NET プロジェクトをすでに作成していることも前提としています簡単なエディタツールバーの使用 C1Editor c コントロールは次のボタンを備える編集ツールバーの簡略版をサポートします太字斜体リンクブロック引用取り消し線日付と時刻画像の参照番号付きリスト箇条書きリストおよびコードの挿入この機能を利用するには単にスクリプトで mode プロパティを Simple に設定しますソースビュー <cc1:c1editor ID="C1Editor1" runat="server" Mode="Simple" /> 1. ASP.NET Web アプリケーションを作成します 2. ページのメインコンテンツに C1Editor コントロールを追加します 3. Visual Studio のメニューから [ 表示 ] [ プロパティウィンドウ ] を選択します 4. C1Editor コントロールが選択され Mode プロパティが Simple に設定されていることを確認しますマークアップは次のように表示されますソースビュー <cc1:c1editor ID="C1Editor1" runat="server" Mode="Simple"/> 5. [F5] を押してアプリケーションを実行します簡単なツールバーを使用してテキストと書式を入力します 33 Copyright GrapeCity, Inc. All rights reserved.

35 C1EditorExtender による BBCode の使用 C1Editor コントロールはメッセージボード内のポストの書式設定に使用するマークアップ言語である BBCode(Bulletin Board Code の略 ) をサポートしますこの機能を利用するには単に Mode プロパティを設定します. ソースビュー <cc1:c1editor ID="C1Editor1" runat="server" Mode="Bbcode" /> 1. ASP.NET Web アプリケーションを作成します 2. ページのメインコンテンツに C1Editorコントロールを追加します 3. Visual Studio のメニューから [ 表示 ] [ プロパティウィンドウ ] を選択します 4. C1Editorコントロールが選択され Mode プロパティが Simple に設定されていることを確認します 5. Text プロパティの横に [B] サンプルテキスト [/B] [URL= Web サイト [/URL] をご参照くださいを入力しますマークアップは次のように表示されますソースビュー Editor for ASP.NET Web Forms <cc1:c1editor ID="C1Editor1" runat="server" Mode="Bbcode" Text="This is some [B]sample text[/b]. You can visit [URL= /> 6. [F5] を押してアプリケーションを実行しますエディタが BBCode で書式設定されたコンテンツを表示します 34 Copyright GrapeCity, Inc. All rights reserved.

ComboBox for ASP.NET Web Forms

ComboBox for ASP.NET Web Forms 2018.04.24 更新グレープシティ株式会社目次製品の概要 2 ComponentOne for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: アプリケーションの作成 4 手順 2: コントロールへの項目の追加 4 手順 3: 選択した項目のイベントハンドラの作成 4-5 手順 4: プロジェクトの実行 5 デザイン時のサポート 6 C1ComboBox