OSS で利用できる機能

HTML エディター - 基本的使用

HTML エディターは Web 上でリッチ テキスト編集機能を提供します。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

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

画像やハイパーリンクを挿入できます。箇条書きリスト、フォント、スタイルを使用してテキストの書式設定も可能です。

コード ビュー

クリップボードへコピー 
<!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>
</head>
<body>
    <style type="text/css">
        span.ui-icon.ui-icon-clear-content {
            background-image: url('http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
            background-position: -177px -97px;
        }

        /* 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>

    <div id="htmlEditor"></div>

    <script>
        $(function () {
            var height = $('html').hasClass('touch') ? 500 : 430,
                contentText = "<img src=\"../images/samples/html-editor/ig-html-editor-shutterstock.jpg\" width=\"300px\" height=\"auto\">" +
                        "<div style=\"width:50%\">" +
                            "<table height=\"139\" border=\"1\" width=\"100%\">" +
                                "<tbody><tr><td><font size=\"2\" style=\"font-weight: bold;\">Property</font></td><td><font size=\"2\" style=\"font-weight: bold;\">&nbsp;Portland Cement</font></td><td><font size=\"2\" style=\"font-weight: bold;\">&nbsp;Siliceous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\">&nbsp;Calcareous Fly Ash</font></td><td><font size=\"2\" style=\"font-weight: bold;\">Slag Cement <br></font></td><td><font size=\"2\" style=\"font-weight: bold;\">&nbsp;Silica Fume</font></td></tr><tr><td><font size=\"2\">Specific surface*<br>(m2/kg)</font></td><td style=\"text-align: right;\"><font size=\"2\">370</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">420</font></td><td style=\"text-align: right;\"><font size=\"2\">400</font></td><td style=\"text-align: right;\"><font size=\"2\">15.000-30.000</font></td></tr><tr><td><font size=\"2\">Specific gravity<br></font></td><td style=\"text-align: right;\"><font size=\"2\">3.15</font></td><td style=\"text-align: right;\"><font size=\"2\">2.38</font></td><td style=\"text-align: right;\"><font size=\"2\">2.65</font></td><td style=\"text-align: right;\"><font size=\"2\">2.94</font></td><td style=\"text-align: right;\"><font size=\"2\">2.22</font></td></tr><tr><td><font size=\"2\">General use<br>in concrete Primary</font></td><td><font size=\"2\">Primary<br>binder</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Cement<br>replacement</font></td><td><font size=\"2\">Property<br>enhancer</font></td></tr>" +
                                "</tbody>" +
                            "</table>" +
                            "<font size=\"2\"><div style=\"text-align: center;\"><span style=\"font-weight: bold;\">Table 1. Components of Cement</span>" +
                        "</div><br></font><span style=\"font-style: italic;\">*Specific surface measurements for silica fume by nitrogen adsorption (BET) method, others by air permeability method (Blaine).</span></div><br><br>";
            var $igTBar = null;
            
            $("#htmlEditor").igHtmlEditor({
                height: height,
                width: "100%",
                customToolbars: [
                {
                    name: "DeleteContentButton",
                    collapseButtonIcon: "ui-igbutton-collapse",
                    expandButtonIcon: "ui-igbutton-expand",
                    items: [{
                        name: "appendDeleteButton",
                        type: "button",
                        handler: appendDeleteButton,
                        scope: this,
                        props: {
                            isImage: {
                                value: false,
                                action: '_isSelectedAction'
                            },
                            imageButtonTooltip: {
                                value: "すべてクリア",
                                action: '_tooltipAction'
                            },
                            imageButtonIcon: {
                                value: "ui-icon-clear-content",
                                action: '_buttonIconAction'
                            }
                        }
                    }]
                }]
            });

            $("#htmlEditor").igHtmlEditor("setContent", contentText, "html");

            changeToolbarsPosition();
        });

        function appendDeleteButton(ui) {
            $("#htmlEditor").igHtmlEditor("setContent", "", "html");
        }

        function changeToolbarsPosition() {
            $($("#htmlEditor").find("span[id*='insertObjectToolbar'].ui-igtoolbar")).insertAfter($("#htmlEditor").find("span[id*='textToolbar'].ui-igtoolbar"));
        }
    </script>
</body>
</html>