このトピックでは、igHtmlEditor™ のカスタム ツールバーにコンボ ボックスを追加する方法について説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igHtmlEditor の概要: このトピックでは、igHtmlEditor の各種機能について説明します。
igHtmlEditor の追加: このトピックでは、igHtmlEditor を Web ページに追加する方法について説明します。
ツールバーとボタンの構成: このトピックでは、igHtmlEditor のツールバーとボタンを構成する方法について説明します。
カスタム ツールバーの構成: このトピックでは、igHtmlEditor のカスタム ツールバーを構成する方法について説明します。
このトピックは、以下のセクションで構成されます。
igHtmlEditor コントロールにはカスタム ツールバーを追加することができます。現時点で、カスタム ツールバーは次の 2 種類のコントロールに対応しています。
次のスクリーンショットは、カスタム ツールバーにコンボ ボックスを定義した igHtmlEditor です。
次の表は、igHtmlEditor コントロールにカスタム コンボを追加する際に構成可能な項目の一覧です。このメソッドについては、表の下にある解説も参照してください。
| 構成可能な要素 | 詳細 | オプション |
|---|---|---|
| カスタム ツールバーへのコンボの追加 | カスタム ツールバーにコンボを定義するには、右の欄に示したオプションを指定してオブジェクト リテラルを customToolbars オプションの項目配列に追加します。 |
|
ここでは、igHtmlEditor のカスタム ツールバーにコンボを追加する手順について説明します。
この例では、エディターのソース ビューとデザイン ビューとを切り替えるコンボがカスタム ツールバーに収められています。
以下のスクリーンショットは最終結果のプレビューです。
以下はプロセスの概念的概要です。
カスタム ツールバーにコンボを追加する手順を以下に示します。
必須参照先を追加します。
jQuery と jQuery UI は必須です。また、Infragistics Loader への参照も追加して、必要なリソースを簡単に参照できるようにしておきます。
HTML の場合:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="infragistics.loader.js"></script>
Infragistics Loader で igHtmlEditor ファイルを読み込みます。
必要な igHtmlEditor リソースを参照するローダーを定義します。
JavaScript の場合:
<script type="text/javascript">
$.ig.loader({
scriptPath: "js",
cssPath: "css",
resources: "igHtmlEditor"
});
</script>
次のコードは、ローダー コールバック関数で igHtmlEditor を初期化します。
JavaScript の場合:
<script type="text/javascript">
$.ig.loader(function () {
$("#htmlEditor").igHtmlEditor({
width: "100%",
inputName: "htmlEditor"
});
});
</script>
エディターのデザイン ビューと HTML ビューとを切り替えるコンボが収められた codeView というカスタム ツールバーを定義します。
JavaScript の場合:
<script type="text/javascript">
$.ig.loader(function () {
$("#htmlEditor").igHtmlEditor({
width: "100%",
inputName: "htmlEditor",
customToolbars: [
{
name: "codeView",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: []
}
]
});
});
</script>
次のコードは、エディターのデザイン ビューと HTML ビューとを切り替えるコンボを定義しています。
各カスタム コンボをカスタム ツールバーの items 配列に定義しておく必要があります。
以下は、コンボの各オプションの説明です。
name - このオプションはコンボの名前を定義します。type - このオプションは、定義されるツールバー項目の種類を定義します。コンボを定義するには、このオプション値を combo に設定してください。scope - このプロパティは、コンボで選択されたハンドラーの実行スコープを定義します。このプロパティは this に設定してください。handler - このプロパティは、コンボで選択されるハンドラーを定義します。このプロパティ値には、当該のイベントを処理する関数の名前を指定します。props - コンボ機能のほとんどを定義する複合オブジェクト プロパティです。次のような形で定義します。
<customDefinedIdentifier> : {
value: <valueToBePassedToTheActionHandler>,
action: "<predefinedActionHandler>"
},
ここで:
<customDefinedIdentifier> は、API 操作に使用できるカスタム文字列リテラルです。
<predefinedActionHandler> は、内部 igCombo のオプションを設定する内部関数の名前です。これには、次のいずれかの関数を指定できます。
<valueToBePassedToTheActionHandler> はアクション アンドラーに渡される値 (引数) です。
JavaScript の場合:
items: [{
name: "toggleViewSource",
type: "combo",
handler: switchView,
scope: this,
props: {
toggleViewSourceComboWidth: {
value: 115,
action: "_comboWidthAction"
},
toggleViewSourceItemsListWidth: {
value: 115,
action: "_comboDropDownListWidth"
},
toggleViewSourceDataSource: {
value: [{text: "HTML View", value: "HTML View"}, {text: "Design View", value: "Design View"}],
action: "_comboDataSourceAction"
},
selectedToggleViewSourceItem: {
value: "Design View",
action: "_comboSelectedItem"
}
}
}]
上記の例では、toggleViewSourceComboWidth プロパティによって、コンボの幅が 115 ピクセルに設定されています。toggleViewSourceItemsListWidth プロパティでは、コンボのドロップダウン リストの幅が 115 ピクセルに設定されています。この
toggleViewSourceDataSource プロパティはコンボのデータ ソースを設定し、selectedToggleViewSourceItem はコンボの選択項目を Design View に設定しています。
コンボで選択されたハンドラーを定義します。この関数は、デザイン ビューと HTML ビューを切り替えるボタンのクリック イベントを発生させます。
JavaScript の場合:
<script type="text/javascript">
function switchView(el, obj) {
//find the toggle viewsource button and simulate click
$(".ui-igbutton-viewsource-icon").click();
//enable combo from the custom toolbar, because it's disabled when editor is in HTML view
$("#htmlEditor_toolbars_toggleViewSourceToolbar_item_toggleViewSource").igCombo("enable");
}
</script>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igHtmlEditor のカスタム ツールバーにボタンを追加する方法について説明します。このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub