OSS で利用できる機能

HTML エディター - TypeScript との連携

インタラクティブな操作が可能な HTML テーブルやデータなど、高いパフォーマンスを提供する jQuery データグリッドは、スタイルのカスタマイズ、ページング、並べ替え、フィルタリング機能をサポートします。インタラクティブな操作が可能な HTML テーブルやデータなど、高いパフォーマンスを提供する jQuery データグリッドは、スタイルのカスタマイズ、ページング、並べ替え、フィルタリング機能をサポートします。

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

このサンプルでは、HTML エディターを TypeScript で作成する方法を紹介します。テキストが選択されたとき、スタンドアロンツールバーが表示されます。

コードビュー

クリップボードへコピー

HTML
TypeScript

                    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

    <style type="text/css">
        #htmlEditor {
            margin-bottom: 10px;
        }

        #text_collapseButton,
        #formatting_collapseButton {
            display: none;
        }

        #toolbarHolder {
            z-index: 99999;
        }

        /* Override sample's browser styles */
        #htmlEditor h1, #htmlEditor h2, #htmlEditor h3, #htmlEditor h4, #htmlEditor h5, #htmlEditor h6 {
            margin: 0px;
        }

        #htmlEditor h1 {
            font-size: 1.9em;
        }

        #sampleContainer {
            overflow: visible;
        }
    </style>
</head>
<body>
    <div id="htmlEditor">
        インタラクティブな操作が可能な HTML テーブルやデータなど、高いパフォーマンスを提供する jQuery データ グリッドは、スタイルのカスタマイズ、ページング、並べ替え、フィルタリング機能をサポートします。 インタラクティブな操作が可能な HTML テーブルやデータなど、高いパフォーマンスを提供する jQuery データ グリッドは、スタイルのカスタマイズ、ページング、並べ替え、フィルタリング機能をサポートします。
    </div>

    <div id="toolbarHolder">
        <div id="text"></div>
    </div>
    <script src="/TypeScriptSamples/html-editor/typescript.js"></script>
</body>
</html>

             /// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

function getSelectionCoords() {
    var sel = window.frames[0].document.getSelection(), range;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.getRangeAt(0).getClientRects()[0];
            x = range.left;
            y = range.bottom + 2*range.height;
        }
    } else if (window.frames[0].document.getSelection()) {
        var selection = window.frames[0].document.getSelection();
        if (selection.rangeCount) {
            range = selection.getRangeAt(0).cloneRange();
            if (range.getClientRects) {
                range.collapse(true);
                var rect = range.getClientRects()[0];
                if (rect) {
                    x = rect.left;
                    y = rect.top;
                }
            }
        }
    }

    return {
        x: x,
        y: y + 118
    };
}

function selectionIs(sel, state) {
    var range, isState = false;
    if (window.frames[0].document.getSelection) {
        if (sel && sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
    if (window.frames[0].document.queryCommandState) {
        isState = window.frames[0].document.queryCommandState(state);
    }
    return isState;
}

$(function () {
     var $iframe,
        mouseMoveCoord,
        $htmlEditor = $("#htmlEditor"),
        $toolbarHolder = $("#toolbarHolder"),
        $textToolbar = $("#text"),
        height = $('html').hasClass('touch') ? 500 : 350;

    $toolbarHolder.hide();

    $htmlEditor.igHtmlEditor({
        width: "750px",
        height: height,
        inputName: "htmlEditor"
    });
 
    $textToolbar.igToolbar({
        "name": "textToolbar",
        "displayName": "Toolbar text",
        "isExpanded": true,
        "collapseButtonIcon": "ui-igbutton-collapse",
        "expandButtonIcon": "ui-igbutton-expand",
        "items": [{
            "name": "Bold",
            "type": "button",
            "scope": null,
            "props": {
                "allowToggling": {
                    "value": true
                },
                "isBold": {
                    "value": false,
                    "action": "_isSelectedAction"
                },
                "boldButtonTooltip": {
                    "value": "Bold",
                    "action": "_tooltipAction"
                },
                "boldButtonIcon": {
                    "value": "ui-igbutton-bold",
                    "action": "_buttonIconAction"
                }
            }
        }, {
                "name": "Italic",
                "type": "button",
                "props": {
                    "isItalic": {
                        "value": false,
                        "action": "_isSelectedAction"
                    },
                    "italicButtonTooltip": {
                        "value": "Italic",
                        "action": "_tooltipAction"
                    },
                    "italicButtonIcon": {
                        "value": "ui-igbutton-italic",
                        "action": "_buttonIconAction"
                    }
                }
            }, {
                "name": "Underline",
                "type": "button",
                "props": {
                    "isUnderline": {
                        "value": false,
                        "action": "_isSelectedAction"
                    },
                    "underlineButtonTooltip": {
                        "value": "Underline",
                        "action": "_tooltipAction"
                    },
                    "underlineButtonIcon": {
                        "value": "ui-igbutton-underline",
                        "action": "_buttonIconAction"
                    }
                }
            }]
    });

    $iframe = $('#htmlEditor_editor');

    $iframe.contents().find("body").on("mouseup", function (ev) {
        var userSelection,
            userSelectionString,
            $bold = $textToolbar.find("div[id*='Bold']"),
            $italic = $textToolbar.find("div[id*='Italic']"),
            $underline = $textToolbar.find("div[id*='Underline']"),
            coord = getSelectionCoords();

        if (window.frames[0].document.getSelection) {
            userSelection = window.frames[0].document.getSelection();
            userSelectionString = userSelection.toString();
        } else {
            userSelection = window.frames[0].document.activeElement;
            userSelectionString = userSelection.textContent;
        }
        if (userSelectionString !== "") {
            $toolbarHolder.parent().css({
                position: 'relative'
            });

            $toolbarHolder.css({
                top: coord.y,
                left: coord.x,
                position: 'absolute'
            });

            mouseMoveCoord = {
                x: ev.pageX,
                y: ev.pageY
            };

            if (selectionIs(userSelection, "bold")) {
                $bold.igToolbarButton("activate");
            }

            if (selectionIs(userSelection, "italic")) {
                $italic.igToolbarButton("activate");
            }

            if (selectionIs(userSelection, "underline")) {
                $underline.igToolbarButton("activate");
            }

            $iframe.contents().find("body").on("mousemove", function (ev) {
                if (userSelectionString !== "") {
                    if (mouseMoveCoord &&
                        ((Math.abs(mouseMoveCoord.x - ev.pageX) > 50) ||
                        (Math.abs(mouseMoveCoord.y - ev.pageY) > 50))) {

                        $toolbarHolder.fadeOut();
                    } else {
                        $toolbarHolder.fadeIn();
                    }
                }
            });

            $iframe.contents().find("body").on("keydown", function (ev) {
                if (ev.keyCode === 66 && ev.ctrlKey) {
                    $bold.igToolbarButton("toggle");
                }

                if (ev.keyCode === 73 && ev.ctrlKey) {
                    $italic.igToolbarButton("toggle");
                }

                if (ev.keyCode === 85 && ev.ctrlKey) {
                    $underline.igToolbarButton("toggle");
                }
            });

            $toolbarHolder.fadeIn();
        } else {
            $iframe.contents().find("body").off("mousemove");
            $iframe.contents().find("body").off("keydown")

                    $toolbarHolder.hide();
            if ($bold.igToolbarButton) {
                $bold.igToolbarButton("deactivate");
            }

            if ($italic) {
                $italic.igToolbarButton("deactivate");
            }

            if ($underline) {
                $underline.igToolbarButton("deactivate");
            }
        }
    });

    $(document).on("igtoolbarbuttonclick", function (ev) {
        var command = $(ev.target).attr("id").replace($textToolbar.attr("id") + "_item_", "");
        $htmlEditor.igHtmlEditor("executeAction", command.toLowerCase());
    });

    $(document).on("ightmleditoractionexecuting", function (ev, ui) {
        var $button = $textToolbar.find("div[id*='" + ui.actionName + "']");

        if ($button.igToolbarButton) {
            $textToolbar.find("div[id*='" + ui.actionName + "']").igToolbarButton("toggle");
        }
    });
});

Ignite UI for jQuery | サンプル

検索結果

HTML エディター - TypeScript との連携

コードビュー

Ignite UI for jQuery | サンプル

検索結果

HTML エディター - TypeScript との連携

コード ビュー

コードビュー