ツールバーとボタンの構成

トピックの概要

目的

このトピックでは igHtmlEditor™ のツールバーおよびボタンの構成方法を説明します。

必要な背景

以下の表は、このトピックを理解するための前提条件として必要なトピックを示しています。

• igHtmlEditor の概要: このトピックでは、igHtmlEditor の機能について説明します。

• igHtmlEditor の追加: このトピックでは、igHtmlEditor を Web ページに追加する方法について説明します。

このトピックの構成

このトピックは、以下のセクションで構成されます。

• コントロールの構成の概要
• ツールバーを非表示にする
• ツールバーを折り畳む
• ボタン状態の切り替え
• ボタン ツールチップの設定
• テキスト オプションの構成
• 関連コンテンツ

コントロールの構成の概要

コントロールの構成の概要

以下の表は、igHtmlEditor コントロール ツールバーの構成可能な要素を示しています。詳細は、概要表の後に記載されています。

ツールバーを非表示にする

概要

ツールバーを非表示にするには、show<toolbarName> オプションを false に設定します。ここで <toolbarName> はツールバーの名前であり、以下の値を持つことができます。

• TextToolbar
• FormattingToolbar
• InsertObjectToolbar
• CopyPasteToolbar
• <CustomToolbarName>

カスタム ツールバーを定義した場合、show<CustomToolbarName> オプションを使用してその表示状態を設定します。

オプションの設定

以下の表は、必要な構成とオプション設定の対応です。

例

以下のスクリーンショットは、以下の設定の結果、igHtmlEditor がどのように表示されるかを示しています。

すべての標準ツールバーが非表示であるため、ツールバー領域は空です。以下は、これを達成するためのコードです。

JavaScript の場合:

$('#htmlEditor').igHtmlEditor({
    showTextToolbar: false,
    showFormattingToolbar: false,
    showInsertObjectToolbar: false,
    showCopyPasteToolbar: false,
    showMyCustomToolbar: false,
    customToolbars: [{
        name: "myCustomToolbar",
        // myCustomToolbar definition
    }]
});

ツールバーを折り畳む

概要

テキスト ツールバーを初期に折り畳むためには、expanded オプションを false に設定します。オブジェクト リテラルを toolbarSettings で定義し、その name オプションをツールバーの名前に設定する必要があります。それから、expanded オプションを使ってツールバーの展開/折り畳みを行います。

ツールバー名:

• textToolbar
• formattingToolbar
• insertObjectToolbar
• copyPasteToolbar
• <customToolbarName>

ここで、<customToolbarName> はカスタム ツールバーの名前です。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

例

以下のスクリーンショットは、以下の設定の結果、igHtmlEditor がどのように表示されるかを示しています。

上記の例では、標準ツールバーは折り畳まれています。以下は、これを達成するためのコードです。

JavaScript の場合:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        expanded: false
    },
    {
        name: "formattingToolbar",
        expanded: false
    },
    {
        name: "insertObjectToolbar",
        expanded: false
    },
    {
        name: "copyPasteToolbar",
        expanded: false
    }],
    customToolbars: [{
        name: "myCustomToolbar",
        expanded: false,
        // myCustomToolbar settings
    }]
});

ボタン状態の切り替え

概要

ツールバーのボタンの一部は切り替えることができます。切り替えオプションは、それぞれのツールバー オブジェクトにあります。

プロパティ設定

以下の表では、目的の構成をプロパティ設定にマップしています。

テキスト ツールバーオブジェクト内:

書式設定ツールバー内:

注: テキスト配置オプションは 1 つだけ適用されます。すなわち、これらは相互に排他的です。

例

以下のスクリーンショットは、以下の設定の結果、igHtmlEditor がどのように表示されるかを示しています。

上記の例では、切り替え可能なすべてのテキスト ツールバー ボタンが押されています。これは、これらのボタンはお互いに独立して機能するためです。書式設定ツールバーについては、isJustifycenter オプションのみがオンに切り替えられます。以下は、これを達成するコードです。

JavaScript の場合:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        isBold: true,
        isItalic: true,
        isUnderline: true,
        isStrikethrough: true
    },
    {
        name: "formattingToolbar",
        isJustifycenter: true,
    }]
});

ボタン ツールチップの設定

概要

各ツールバー ボタンにはツールチップがあります。以下は、ボタンのリストと、ツールバーごとにグループ化されたそれぞれのプロパティです。

注: ツールチップはローカライズ可能です。igHtmlEditor をローカライズしたい場合、Infragistics Loader のロケールコードを設定します。

オプションの設定

以下の表は、必要な構成とオプション設定の対応です。

テキスト ツールバー オブジェクト:

書式設定ツールバー内:

オブジェクトの挿入ツールバー オブジェクト:

コピー/貼り付けツールバー オブジェクト:

例

以下の例は、ボタン ツールチップの設定方法を示しています。

JavaScript の場合:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        boldButtonTooltip: "Bold",
        italicButtonTooltip: "Italic",
        underlineButtonTooltip: "Underline",
        strikethroughButtonTooltip: "Strikethrough",
        decreaseFontButtonTooltip: "Decrease font",
        increaseFontButtonTooltip: "Increase font",
    },
    {
        name: "formattingToolbar",
        justifyleftButtonTooltip: "Align Text Left",
        justifycenterButtonTooltip: "Center",
        justifyrightButtonTooltip: "Align Text Right",
        justifyfullButtonTooltip: "Justify"
    },
    {
        name: "insertObjectToolbar",
        imageButtonTooltip: "Insert Picture",
        linkButtonTooltip: "Insert Hyperlink",
        tableButtonTooltip: "Table",
        addRowButtonTooltip: "Add Row",
        addColumnButtonTooltip: "Add Column",
        removeRowButtonTooltip: "Remove Row",
        removeColumnButtonTooltip: "Remove Column"
    },
    {
        name: "copyPasteToolbar",
        copyButtonTooltip: "Copy",
        cutButtonTooltip: "Cut",
        pasteButtonTooltip: "Paste",
        undoButtonTooltip: "Undo",
        redoButtonTooltip: "Redo"
    }
    ]
});

テキスト オプションの構成

概要

以下のためのテキスト オプションを構成できます。

• フォント ファミリー
• フォント サイズ
• テキストの色
• テキスト背景色

オプションの設定

以下の表は、必要な構成とオプション設定の対応です。

例

以下のスクリーンショットは、以下の設定の結果、igHtmlEditor がどのように表示されるかを示しています。

以下は、これを達成するコードです。

JavaScript の場合:

$('#htmlEditor').igHtmlEditor({
    toolbarSettings: [
    {
        name: "textToolbar",
        selectedFontFamily: "Georgia",
        selectedFontSize: "4",
        selectedFormat: "h2"
    },
    {
        name: "formattingToolbar",
        selectedTextColor: "black",
        selectedTextBackgroundColor: "white"
    },
    ]
});

関連コンテンツ

トピック

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

• HTML コンテンツをコードで保存: このトピックでは igHtmlEditor のコンテンツを Web サーバーに保存する方法を説明します。

• プログラムによるコンテンツの変更: このトピックでは、API を使用して igHtmlEditor のコンテンツを修正する方法について説明します。

サンプル

このトピックについては、以下のサンプルも参照してください。

• 内容を編集する: このフォーラム投稿のサンプルでは、HTML エディターでコンテンツを提供します。

• カスタム ツールバーおよびボタン: このサンプルでは、HtmlEditor コントロールを電子メール クライアントとして実装します。署名をメッセージに追加するカスタム ツールバーがあります。

• API およびイベント: このサンプルでは、HTML エディター コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。