OSS で利用できる機能

HTML エディター - 強調表示

このサンプルは、Prism.js ライブラリを使用して igHtmlEditor がコードを強調表示する方法を紹介します。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

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

この実装は、コード スニペット挿入のためのカスタム ツールバー ボタンを使用します。

コード ビュー

クリップボードへコピー 
<!DOCTYPE html>
<html>
<head>
    <title>Highlight code in igHtmlEditor</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">
        #sampleContainer {
            overflow: visible;
        }
        div.ui-igdialog {
            width: 70% !important;
        }
        .comboGroup {
            float: left;
        }
        .buttonGroup > button {
            float: left;
            margin: 5px;
        }
        .buttonGroup {
            display: inline-block;
        }
        .ui-igbutton-code::before {
            content: "{;}";
            top: 30%;
            font-weight: bold;
        }
        div.ui-widget-overlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            width: 100% !important;
            height: 100% !important;
            margin-top: 0px !important;
        }
        .ui-igdialog-content > div {
            position: absolute;
        }
        #okCancelButtons {
            bottom: 10px;
            height:auto;
        }

        #dialogTextArea {
            top:70px;
            height:auto;
            bottom: 70px;
        }
    </style>
</head>
<body>
    <!--igHtmlEditor target element-->
    <div id="htmlEditor"></div>
    <!--igDialog target element-->
    <div id="dialog">
        <div class="comboGroup" style="margin:5px">
            <div><span>言語</span></div>
            <select id="langsList">
                <option value="language-html">HTML/XML</option>
                <option value="language-javascript">Javascript</option>
                <option value="language-css">CSS</option>
                <option value="language-csharp">C#</option>
                <option value="language-c">C</option>
                <option value="language-cpp">C++</option>
            </select>
        </div>

        <div id="dialogTextArea" style="margin:5px"></div>
        <div id="okCancelButtons" class="buttonGroup">
            <button id="okButton"></button>
            <button id="cancelButton"></button>
        </div>
    </div>

    <script>

        $(function () {
            var height = $('html').hasClass('touch') ? 500 : 350;
            $("#htmlEditor").igHtmlEditor({
                width: "99%",
                height: height,
                value: "コード スニペットの挿入ボタン {;} をクリックしてコードを貼り付けます。",
                customToolbars: [
                    {
                        name: "CodeSnippets",
                        collapseButtonIcon: "ui-igbutton-collapse",
                        expandButtonIcon: "ui-igbutton-expand",
                        items: [{
                            //Definition for insert code button
                            name: "appendCodeSnippet",
                            type: "button",
                            handler: openDialog,
                            scope: this,
                            props: {
                                isImage: {
                                    value: false,
                                    action: '_isSelectedAction'
                                },
                                imageButtonTooltip: {
                                    value: "コード スニペットを挿入",
                                    action: '_tooltipAction'
                                },
                                imageButtonIcon: {
                                    value: "ui-igbutton-code",
                                    action: '_buttonIconAction'
                                }
                            }
                        }],
                    }],
                rendered: configIFrame
            });

            $("#dialog").igDialog({
                state: "closed",
                modal: true,
                draggable: true,
                resizable: false,
                height: "50%",
                headerText: "Place code here:",
                container: $("#htmlEditor_content"),
                headerText: "コードの挿入",
                showCloseButton: false,
            });

            $("#dialogTextArea").igTextEditor({
                textMode: "multiline",
                width: "95%"
            });

            $("#langsList").igCombo({
                mode: "dropdown",
                width: "200px"
            });

            $("#okButton").igButton({ labelText: "OK" });
            $("#cancelButton").igButton({ labelText: "キャンセル" });

            $('#okButton').on({
                click: function () {
                    handleContent();
                    $("#htmlEditor").igHtmlEditor("contentWindow").highlightCode();
                    $("#dialog").igDialog("close");
                }
            });

            $('#cancelButton').on({
                click: function () {
                    $("#dialog").igDialog("close");
                }
            });
        });

        function openDialog(e, args) {
            var itemToSelect,
            closestCodeTag = $($("#htmlEditor").igHtmlEditor("range").commonAncestorContainer).closest('code');
            if (closestCodeTag.length !== 0) {
                $("#dialogTextArea").igTextEditor("option", "value", closestCodeTag.text());
                $("#langsList").igCombo("value", closestCodeTag[0].className.trim());
            }
            else {
                $("#dialogTextArea").igTextEditor("option", "value", "");
            }
            $("#dialog").igDialog("open");
        };

        function configIFrame() {
            // we insert the Prism.js resources in the iFrame that contains the htmlEditor text area
            var iFrameHead = $("#htmlEditor").igHtmlEditor("contentDocument").head;

            var prismcss = document.createElement('link');
            prismcss.rel = 'stylesheet';
            prismcss.href = '../css/prism.css';
            iFrameHead.appendChild(prismcss);

            var prismjs = document.createElement('script');
            prismjs.type = 'text/javascript';
            prismjs.src = 'http://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/prism.min.js';
            iFrameHead.appendChild(prismjs);

            var prismUtils = document.createElement('script');
            prismUtils.type = 'text/javascript';
            prismUtils.text = "function highlightCode() {Prism.highlightAll(false);}";
            iFrameHead.appendChild(prismUtils);
        }

        function handleContent() {
            var $currCodeElement,
                iFrameBody = $("#htmlEditor").igHtmlEditor("contentWindow").document.body,
                codeElements = $(iFrameBody).find("code"),
                codeString = $("#dialogTextArea").igTextEditor("option", "value"),
                divTag = document.createElement("div"),
                preTag = document.createElement("pre"),
                lang = $("#langsList").igCombo("value"),
                codeTag = document.createElement("code");

            // building a <code> element that will contain the code snippet
            // the recommended way to define a code language is a language-xxxx class, which is what Prism uses
            codeTag.className = lang;
            codeTag.setAttribute("data-container-index", codeElements.length);
            preTag.appendChild(codeTag);
            divTag.appendChild(preTag);
            divTag.innerHTML = divTag.innerHTML + "<br />";

            // insert the <code> element into the html editor field
            var closesCodeTag = $($("#htmlEditor").igHtmlEditor("range").commonAncestorContainer).closest('code');
            if (closesCodeTag.length !== 0) {
                closesCodeTag.text(codeString);
                closesCodeTag[0].className = lang;
            }
            else {
                insertContent(divTag);
            }

            if (codeElements.length === 0) {
                $currCodeElement = $(iFrameBody).find("code");
                $currCodeElement.text(codeString);
            } else {
                $currCodeElement = $(iFrameBody).find("code[data-container-index=" + codeElements.length + "]")
                $currCodeElement.text(codeString);
            }
        }

        function insertContent(divTag) {
            var caretPosition = $("#htmlEditor").igHtmlEditor("range").startOffset;
            if ($("#htmlEditor").igHtmlEditor("range").commonAncestorContainer.tagName === undefined && caretPosition === 0) {
                $("#htmlEditor").igHtmlEditor("setContent", divTag, "html");
            } else {
                $("#htmlEditor").igHtmlEditor("insertAtCaret", divTag);
            }
        }
    </script>
</body>
</html>