JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

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

        <div style="position:absolute; left:300px; top:90px; z-index:1; visibility:hidden">
            
            <div id="radialMenu"></div>
        </div>
    </div>

    <fieldset>
        <legend>オプション</legend>
        <table>
            <tr>
                <td>ウェッジの最小数:</td>
                <td><div id="minWedgeSlider" style="width:100px"></div></td>
                <td><label id="labMinWedgeSlider">8</label></td>
            </tr>
            <tr>
                <td>StartAngleOfWedges:</td>
                <td><div id="startAngleSlider" style="width:100px"></div></td>
                <td><label id="labStartAngleSlider">-90</label></td>
            </tr>
            <tr>
                <td>ウェッジのインデックス:</td>
                <td><input id="inWedgeIndex"></input></td>
                <td><input type="button" value="設定" onclick="setWedgeIndex(document.getElementById('inWedgeIndex').value);"></input></td>
            </tr>
            <tr>
                <td>ウェッジのスパン:</td>
                <td><input id="inWedgeSpan"></input></td>
                <td><input type="button"...

JavaScript

$(function () {
var lastCliked = null;

        function setWedgeIndex(_index) {
            if (lastCliked == null) return;
            if (isNaN(_index)) {
                alert("整数値を指定してください。");
                return;
            }
            $("#radialMenu").igRadialMenu("itemOption", lastCliked, "wedgeIndex", _index);
        }

        function setWedgeSpan(_span) {
            if (lastCliked == null) return;
            if (isNaN(_span) || _span < -1) {
                alert("0 より大きい整数値を指定してください。");
                return;
            }
            $("#radialMenu").igRadialMenu("itemOption", lastCliked, "wedgeSpan", _span);
        }

        $(function () {
            function toggleBold() {
                $("#htmlEditor").igHtmlEditor("executeAction", "bold");
                var cbElement = document.getElementById("cbCloseOnClick");
                if (cbElement && cbElement.checked) {
                    $("#radialMenu").igRadialMenu("option", "isOpen", false);
                }
            }

            function toggleItalic() {
                $("#htmlEditor").igHtmlEditor("executeAction", "italic");
                var cbElement = document.getElementById("cbCloseOnClick");
                if (cbElement && cbElement.checked) {
                    $("#radialMenu").igRadialMenu("option", "isOpen", false);
                }
            }

            // create the html editor
            $("#htmlEditor").igHtmlEditor({
                width: "98%",
                height: "450px"
            });

            $("#htmlEditor").igHtmlEditor("setContent", "ラジアル メニュー コントロールは、中央ボタンの周りに項目を表示するコンテキスト メニューです。項目を円形に配置することで項目をすばやく選択できます。各項目は中央に対して均等に配置されます。ラジアル メニューは、数値、色値、または操作を実行する項目タイプをサポートします。サブ項目もサポートします。<br/>デフォルトで、ラジアル メニューの中央ボタンのみを表示します。ユーザーが中央ボタンをクリックすると、ラジアル メニューが開き、ルート レベルのメニュー項目を表示します。ルート レベル項目が表示されたときに中央ボタンをクリックすると、ラジアル メニューが閉じます。サブ項目に移動するには、外部リングの矢印をクリックし対応するサブ項目グループを表示します。サブ項目グループが表示されたときに中央ボタンをクリックすると、以前のレベルの項目を表示します。", "html");

           ...