このトピックでは、igHtmlEditor™ のカスタム ツールバーにボタンを追加する方法を説明します。
このトピックを理解するために、以下のトピックを参照することをお勧めします。
igHtmlEditor の概要: このトピックでは、igHtmlEditor の各種機能について説明します。
igHtmlEditor の追加: このトピックでは、igHtmlEditor を Web ページに追加する方法について説明します。
ツールバーとボタンの構成: このトピックでは、igHtmlEditor のツールバーとボタンを構成する方法について説明します。
カスタム ツールバーの構成: このトピックでは、igHtmlEditor のカスタム ツールバーを構成する方法について説明します。
このトピックは、以下のセクションで構成されます。
igHtmlEditor コントロールにはカスタム ツールバーを追加することができます。現時点で、カスタム ツールバーは次の 2 種類のコントロールに対応しています。
以下のスクリーンショットはボタンを 1 つ定義したカスタム ツールバーがある igHtmlEditor です。
以下の表では、カスタム ボタンを igHtmlEditor コントロールに追加するときの構成可能な要素をまとめました。このメソッドについては、表の下にある解説も参照してください。
| 構成可能な要素 | 詳細 | オプション |
|---|---|---|
| カスタム ツールバーにボタンを追加 | カスタム ツールバーにボタンを定義するには、プロパティとともにオブジェクト リテラルを customToolbars オプションの項目配列の右に追加します。 |
|
この手順では、igHtmlEditor のカスタム ツールバーにボタンを追加します。
この例では、エディターは、電子メール エディターとして使用し、カスタム ツールバーとボタンを定義します。これは電子メールの署名をエディターのコンテンツに挿入するコントロールです。
以下のスクリーンショットは最終結果のプレビューです。
以下はプロセスの概念的概要です。
以下のステップでは、カスタム ツールバーにボタンを追加する方法を紹介します。
必須参照先を追加します。
jQuery ファイルと jQuery UI JavaScript ファイルの参照情報は必須です。また、Infragistics Loader の参照情報があれば必要な Infragistics リソースを簡単に読み込むことができます。
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>
ボタンの背景として適用する CSS ルールを定義します。
CSS の場合:
<style type="text/css">
span.ui-icon.ui-icon-contact
{
background-image: url(../content/theme/images/ui-icons_222222_256x240.png);
background-position: -192px -128px;
}
</style>
以下のコードは、ローダーのコールバック機能の igHtmlEditor を初期化します。
JavaScript の場合:
<script type="text/javascript">
$.ig.loader(function () {
$("#htmlEditor").igHtmlEditor({
width: "100%",
inputName: "htmlEditor"
});
});
</script>
"eMailSignature" カスタム ツールバーを定義します。このツールバーにはエディター コンテンツに電子メール署名を追加するボタンを配置します。
JavaScript の場合:
<script type="text/javascript">
$.ig.loader(function () {
$("#htmlEditor").igHtmlEditor({
width: "100%",
inputName: "htmlEditor",
customToolbars: [
{
name: "eMailSignature",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: []
}]
});
});
</script>
以下のコードは、エディターのコンテンツに電子メール署名を追加するボタンを定義します。
カスタム ボタンはいずれもカスタム ツールバーの項目配列に定義してください。
以下に示したのは、ボタン オプションの説明です。
name - このオプションはボタン名を定義します。type - このオプションは、定義されるツールバー項目の種類を定義します。ボタンを定義するときは、これを「button」を設定してください。scope - このオプションは、ボタンのクリック ハンドラーの実行範囲を定義します。「this」に設定してください。handler - このオプションはクリック ハンドラーを定義します。これは、クリック イベントを操作する定義の名前に設定してください。props - ボタン機能のほとんどを定義する複合オブジェクト プロパティです。次のような形で定義します。
<customDefinedIdentifier> : {
value: <valueToBePassedToTheActionHandler>,
action: "<predefinedActionHandler>"
},
ここで:
<customDefinedIdentifier> は API 操作に使用するカスタム文字列リテラルです。
<predefinedActionHandler> はハンドラーの名前であり、以下のいずれかにします。
<valueToBePassedToTheActionHandler> は、アクション ハンドラーに渡す値です。
JavaScript の場合:
items: [{
name: "appendSignature",
type: "button",
handler: appendSignature,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Insert signature",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-contact",
action: '_buttonIconAction'
}
}
}]
ボタンのクリック ハンドラーを定義します。この機能は、定義済みの文字列をエディターのコンテンツに追加します。
JavaScript の場合:
<script type="text/javascript">
function appendSignature(ui) {
var currentContent = $("#htmlEditor").igHtmlEditor("getContent", "html");
var signature = "Jon Doe<br/>Acme Corp<br/>555-1111";
$("#htmlEditor").igHtmlEditor("setContent", currentContent + signature, "html");
}
</script>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。
igHtmlEditor のカスタム ツールバーにコンボ ボックスを追加する方法を説明します。このトピックについては、以下のサンプルも参照してください。
オンラインで表示: GitHub