ui.igHtmlEditor

ui.igHtmlEditor_image

igHtmlEditor コントロールは標準 HTML 編集機能が特長の jQuery HTML エディター コントロールです。書式設定オプションには、フォント フェイス、フォント サイズ、テキストおよび画像の配置、リンク、およびテーブル サポートもあります。この API のクラス、オプション、イベント、メソッド、およびテーマの詳細は、上記の関連するタブの下に表示されます。

次のコード スニペットは igHtmlEditor コントロールの初期化方法を示しています。

igHtmlEditor コントロールに必要なスクリプトおよびテーマの参照方法についての詳細は、 Ignite UI での JavaScript リソースの使用および Ignite UI のスタイルとテーマの設定をお読みください。

コード サンプル

  
        <!doctype html>
        <html>
        <head>
            <!-- Modernizr -->
            <script src="js/modernizr.js"></script>
            <!-- jQuery Core -->
            <script src="js/jquery.js"></script>
            <!-- jQuery UI -->
            <script src="js/jquery-ui.js"></script>
            <!-- Infragistics loader -->
            <script src="js/infragistics.loader.js"></script>
            <script>
                $.ig.loader({
                    scriptPath: "js",
                    cssPath: "css",
                    resources: "igHtmlEditor"
                });

                $.ig.loader(function () {
                    $("#htmlEditor").igHtmlEditor({
                        width: "100%"
                    });
                });
            </script>
        </head>
        <body>
            <div id="htmlEditor"></div>
        </body>
        </html>

関連サンプル

関連トピック

依存関係

jquery-1.9.1.js
jquery.ui.core.js
jquery.ui.widget.js
infragistics.util.js
infragistics.ui.toolbarbutton.js
infragistics.ui.toolbar.js
infragistics.ui.popover.js
infragistics.ui.splitbutton.js
infragistics.ui.colorpicker.js
infragistics.ui.colorpickersplitbutton.js
infragistics.ui.combo.js
infragistics.ui.htmleditor-en.js
infragistics.ui.toolbar-en.js

継承

  • customToolbars

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    HTML エディター カスタム ツールバー リスト。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                customToolbars: [
                {
                    name: "customToolbar",
                    collapseButtonIcon: "ui-igbutton-collapse",
                    expandButtonIcon: "ui-igbutton-expand",
                    items: [{
                        //Definition for custom button
                        name: "customButton",
                        type: "button",
                        handler: function() { alert("Custom button clicked!");},
                        scope: this,
                        props: {
                            isImage: {
                                value: false,
                                action: '_isSelectedAction'
                            },
                            imageButtonTooltip: {
                                value: "Custom button tooltip",
                                action: '_tooltipAction'
                            },
                            imageButtonIcon: {
                                value: "ui-igbutton-bold",
                                action: '_buttonIconAction'
                            }
                        }
                    },
                    {
                        //Definition for custom combo
                        name: "customCombo",
                        type: "combo",
                        handler: function(el, obj) {
                            alert("Selected item is: " + obj.value);
                        },
                        scope: this,
                        props: {
                            customComboWidth: {
                                value: 115,
                                action: "_comboWidthAction"
                            },
                            customComboHeight: {
                                value: "",
                                action: "_comboHeightAction"
                            },
                            customComboItemsListWidth: {
                                value: 115,
                                action: "_comboDropDownListWidth"
                            },
                            customComboSource: {
                                value: [{text: "Item 1", value: "Item 1"}, {text: "Item 2", value: "Item 2"}],
                                action: "_comboDataSourceAction"
                            },
                            selectedCustomComboItem: {
                                value: "Item 2",
                                action: "_comboSelectedItem"
                            }
                        }
                    }]
                }]
            });
            
            // Get
            var customToolbar = $(".selector").igHtmlEditor("option", "customToolbars");

  • height

    タイプ:
    enumeration
    デフォルト:
    350

    HTML エディターの高さ。ピクセル、文字列 (px)、またはパーセンテージ (%) を数字で設定できます。

    メンバー

      • string
      • ウィジェットの高さはピクセル (px) およびパーセント (%) で設定できます (%)。
      • number
      • ウィジェットの高さは数値として設定できます。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                height: 100
                // or
                // height: "100%"
            });
            
            // Get
            var height = $(".selector").igHtmlEditor("option", "height");
            
            // Set
            $(".selector").igHtmlEditor("option", "height", 300);

  • inputName

    タイプ:
    string
    デフォルト:
    "source"

    HTML エディターのソース ビューの name 属性。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                inputName: "blogContent"
            });
            
            // Get
            var inputName = $(".selector").igHtmlEditor("option", "inputName");

  • showCopyPasteToolbar

    タイプ:
    bool
    デフォルト:
    true

    「コピー/貼り付け」ツールバーを表示/非表示にします。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                showCopyPasteToolbar: false
            });
            
            //Get
            var showCopyPasteToolbar = $(".selector").igHtmlEditor("option", "showCopyPasteToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showCopyPasteToolbar", true);

  • showFormattingToolbar

    タイプ:
    bool
    デフォルト:
    true

    "フォーマッティング" ツールバーを表示/非表示にします。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                showFormattingToolbar: false
            });
            
            //Get
            var showFormattingToolbar = $(".selector").igHtmlEditor("option", "showFormattingToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showFormattingToolbar", true);

  • showInsertObjectToolbar

    タイプ:
    bool
    デフォルト:
    true

    「オブジェクトの挿入」ツールバーを表示/非表示にします。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                showInsertObjectToolbar: false
            });
            
            //Get
            var showInsertObjectToolbar = $(".selector").igHtmlEditor("option", "showInsertObjectToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showInsertObjectToolbar", true);

  • showTextToolbar

    タイプ:
    bool
    デフォルト:
    true

    「テキスト」ツールバーを表示/非表示にします。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                showTextToolbar: false
            });
            
            //Get
            var showTextToolbar = $(".selector").igHtmlEditor("option", "showTextToolbar");
            
            //Set
            $(".selector").igHtmlEditor("option", "showTextToolbar", true);

  • toolbarSettings

    タイプ:
    array
    デフォルト:
    []
    要素タイプ:
    object

    HTML エディター ツールバー リスト。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarSettings: [
                {
                    name: "textToolbar",
                    isExpanded: false
                }]
            });
            
            //Get
            var toolbarSettings = $(".selector").igHtmlEditor("option", "toolbarSettings");

  • value

    タイプ:
    string
    デフォルト:
    ""

    HTML エディター内に最初コンテンツとして描画するために使用されます。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                value: "Hello World!"
            });
            
            //Get
            var value = $(".selector").igHtmlEditor("option", "value");
            
            //Set
            $(".selector").igHtmlEditor("option", "value", "Hello World!");

  • width

    タイプ:
    enumeration
    デフォルト:
    725

    HTML エディターの幅。ピクセル、文字列 (px)、またはパーセンテージ (%) を数字で設定できます。

    メンバー

      • string
      • ウィジェットの幅をピクセル (px) またはパーセンテージ (%) に設定できます。
      • number
      • ウィジェット幅は数値として設定できます。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                width: 700
                //or
                //width: "100%"
            });
            
            // Get
            var width = $(".selector").igHtmlEditor("option", "width");
            
            // Set
            $(".selector").igHtmlEditor("option", "width", 300);

Ignite UI コントロール イベントの詳細については、
Ignite UI でイベントを使用するを参照してください。

注: API メソッドの呼び出しは、API ヘルプに特に記述がない限り、操作に関連するイベントはプログラムによって発生されません。これらのイベントは各ユーザー操作によってのみ呼び出されます。

詳細の表示

  • actionExecuted

    キャンセル可能:
    false

    ツールバー項目がクリックされた後に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                actionExecuted: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditoractionexecuted", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return toolbar name
                ui.toolbar;
                //return action name
                ui.actionName;
            });

  • actionExecuting

    キャンセル可能:
    true

    ツールバー項目がクリックされる前に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                actionExecuting: function (evt, ui) {...}
            });

            //Delegate
            $(document).delegate(".selector", "ightmleditoractionexecuting", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return toolbar name
                ui.toolbar;
                //return action name
                ui.actionName;
            });

  • copy

    キャンセル可能:
    false

    キーボードのコピー アクションで発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                copy: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorcopy", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • cut

    キャンセル可能:
    false

    キーボードの切り取りアクションで発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                cut: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorcut", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • paste

    キャンセル可能:
    false

    キーボードの貼り付けアクションで発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                paste: function (evt, ui) {...}
            });

            //Delegate
            $(document).delegate(".selector", "ightmleditorpaste", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • redo

    キャンセル可能:
    false

    キーボードのやり直しアクションで発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                redo: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorredo", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • rendered

    キャンセル可能:
    false

    HTML エディター ウィジェットが描画された後に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                rendered: function (evt, ui) {
                    //return reference to igHtmlEditor object
                    ui.owner
                }
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorrendered", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • rendering

    キャンセル可能:
    false

    HTML エディター ウィジェットが描画される前に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                rendering: function (evt, ui) {
                    //return reference to igHtmlEditor object
                    ui.owner
                }
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorrendering", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • toolbarCollapsed

    キャンセル可能:
    false

    ツールバーが縮小された後に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarCollapsed: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarcollapsed", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • toolbarCollapsing

    キャンセル可能:
    true

    ツールバーが縮小される前に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarCollapsing: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarcollapsing", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • toolbarExpanded

    キャンセル可能:
    false

    ツールバーが展開された後に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarExpanded: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarexpanded", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • toolbarExpanding

    キャンセル可能:
    true

    ツールバーが展開される前に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                toolbarExpanding: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditortoolbarexpanding", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
                //return reference to toolbar object
                ui.toolbar
                //return reference to toolbar element object
                ui.toolbarElement
            });

  • undo

    キャンセル可能:
    false

    キーボードの取り消しアクションで発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                undo: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorundo", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • workspaceResized

    キャンセル可能:
    false

    ワークスペースのサイズ変更後に発生するイベント。

    コード サンプル

     
            //Initialize
            $(".selector").igHtmlEditor({
                workspaceResized: function (evt, ui) {...}
            });
            
            //Delegate
            $(document).delegate(".selector", "ightmleditorworkspaceresized", function (evt, ui) {
                //return reference to igHtmlEditor object
                ui.owner
            });

  • contentDocument

    .igHtmlEditor( "contentDocument" );
    返却型:
    object
    返却型の説明:
    HTML エディターのコンテンツの編集可能な領域と関連されるドキュメント オブジェクト。

    HTML エディターのコンテンツの編集可能な領域と関連されるドキュメント オブジェクトを返します。

    コード サンプル

                var htmlEditorDocument = $(".selector").igHtmlEditor("contentDocument");

  • contentEditable

    .igHtmlEditor( "contentEditable" );
    返却型:
    object
    返却型の説明:
    この HTML エディターに関連する編集可能なコンテンツ。

    この HTML エディターに関連する編集可能なコンテンツを返します。

    コード サンプル

                var htmlEditorContentEditable = $(".selector").igHtmlEditor("contentEditable");

  • contentWindow

    .igHtmlEditor( "contentWindow" );
    返却型:
    object
    返却型の説明:
    HTML エディターのコンテンツの編集可能な領域と関連されるウィンドウ オブジェクト。

    HTML エディターのコンテンツの編集可能な領域と関連されるウィンドウ オブジェクトを返します。

    コード サンプル

                var htmlEditorContentWindow = $(".selector").igHtmlEditor("contentWindow");

  • destroy

    .igHtmlEditor( "destroy" );

    ウィジェットを破棄します。

    コード サンプル

     
            $(".selector").igHtmlEditor("destroy");

  • executeAction

    .igHtmlEditor( "executeAction", actionName:string, [args:object] );

    htmleditor コマンドを実行します。

    • actionName
    • タイプ:string
    • コマンドの名前。
    • args
    • タイプ:object
    • オプション
    • コマンドの追加のパラメーター。

    コード サンプル

     
            $(".selector").igHtmlEditor("executeAction", "increasefontsize");
            $(".selector").igHtmlEditor("executeAction", "bold");
            $(".selector").igHtmlEditor("executeAction", "italic");
            $(".selector").igHtmlEditor("executeAction", "underline");
            $(".selector").igHtmlEditor("executeAction", "strikethrough");
            $(".selector").igHtmlEditor("executeAction", "decreasefontsize");
            $(".selector").igHtmlEditor("executeAction", "fontname", "Lucida Console");
            $(".selector").igHtmlEditor("executeAction", "fontname", "Verdana");
            $(".selector").igHtmlEditor("executeAction", "fontsize", "5");
            $(".selector").igHtmlEditor("executeAction", "formatBlock", "h6");
            $(".selector").igHtmlEditor("executeAction", "forecolor", "blue");
            $(".selector").igHtmlEditor("executeAction", "backcolor", "red");
            $(".selector").igHtmlEditor("executeAction", "justifyright");
            $(".selector").igHtmlEditor("executeAction", "justifycenter");
            $(".selector").igHtmlEditor("executeAction", "justifyleft");
            $(".selector").igHtmlEditor("executeAction", "justifyfull");
            $(".selector").igHtmlEditor("executeAction", "insertunorderedlist");
            $(".selector").igHtmlEditor("executeAction", "insertorderedlist");
            $(".selector").igHtmlEditor("executeAction", "outdent");
            $(".selector").igHtmlEditor("executeAction", "indent");
            
            //Works on Internet Explorer only
            $(".selector").igHtmlEditor("executeAction", "cut");
            //Works on Internet Explorer only
            $(".selector").igHtmlEditor("executeAction", "copy");
            //Works on Internet Explorer only
            $(".selector").igHtmlEditor("executeAction", "paste");

  • getContent

    .igHtmlEditor( "getContent", format:string );
    返却型:
    string
    返却型の説明:
    エディターのコンテンツ。

    HTML エディターのコンテンツを取得します。

    • format
    • タイプ:string
    • コンテンツを HTML またはプレーン テキストとして返します。値は「text」または「html」が可能です。

    コード サンプル

     
            var plainContent = $(".selector").igHtmlEditor("getContent", "text");
            var htmlContent = $(".selector").igHtmlEditor("getContent", "html");

  • insertAtCaret

    .igHtmlEditor( "insertAtCaret", element:object );

    提供したコンテンツをカレットの位置に挿入します。

    • element
    • タイプ:object
    • HTML 文字列、DOM 要素、または jQuery オブジェクトを受けます。

    コード サンプル

    			$(".selector").igHtmlEditor("insertAtCaret", "<div />");

  • isDirty

    .igHtmlEditor( "isDirty" );

    エディター コンテンツが変更した場合に True を返します。変更なしの場合、False を返します。

    コード サンプル

     
            var isDirty = $(".selector").igHtmlEditor("isDirty");

  • range

    .igHtmlEditor( "range" );
    返却型:
    object
    返却型の説明:
    編集可能なコンテンツの現在範囲を表す Range オブジェクトを返します。

    編集可能なコンテンツの現在範囲を表す Range オブジェクトを返します。

    コード サンプル

    			var range = $(".selector").igHtmlEditor("range");

  • resizeWorkspace

    .igHtmlEditor( "resizeWorkspace" );

    ワークスペースの高さをサイズ変更します。

    コード サンプル

     
        $(".selector").igHtmlEditor("resizeWorkspace");

  • selection

    .igHtmlEditor( "selection" );
    返却型:
    object
    返却型の説明:
    編集可能なコンテンツの現在選択を表す Selection オブジェクトを返します。

    編集可能なコンテンツの現在選択を表す Selection オブジェクトを返します。

    コード サンプル

    			var selection = $(".selector").igHtmlEditor("selection");

  • setContent

    .igHtmlEditor( "setContent", content:string, format:string );

    HTML エディターのコンテンツを設定します。

    • content
    • タイプ:string
    • 設定するコンテンツ。
    • format
    • タイプ:string
    • コンテンツ タイプ: 「text」または「html」。

    コード サンプル

     
            $(".selector").igHtmlEditor("setContent", "Hello World!", "text");
            $(".selector").igHtmlEditor("setContent", "<h1>Hello World!</h1>", "html");

  • widget

    .igHtmlEditor( "widget" );

    ウィジェットがインスタンス化された要因を返します。

    コード サンプル

     
            var widget = $(".selector").igHtmlEditor("widget");

  • ui-widget ui-widget-content ui-corner-all ui-ightmleditor ui-helper-clearfix

    ウィジェット基本クラス css。

  • ui-ightmleditor-content

    HTML エディター コンテンツ スタイル。

  • ui-igpathfinder

    HTML エディター DOM ナビゲーション ツールバー css。

  • ui-igtoolbars-holder

    HTML エディター ツールバー スタイル。

  • ui-widget-content

    ワークスペース css。

Copyright © 1996 - 2024 Infragistics, Inc. All rights reserved.