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>
<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 id="htmlEditor">
        インタラクティブな操作が可能な HTML テーブルやデータなど、高いパフォーマンスを提供する jQuery データ グリッドは、スタイルのカスタマイズ、ページング、並べ替え、フィルタリング機能をサポートします。 インタラクティブな操作が可能な HTML テーブルやデータなど、高いパフォーマンスを提供する jQuery データ グリッドは、スタイルのカスタマイズ、ページング、並べ替え、フィルタリング機能をサポートします。
    </div>

    <div id="toolbarHolder">
        <div id="text"></div>
    </div>

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; }

JavaScript

$(function () {
function getSelectionCoords() {
            var sel = window.frames[0].document.selection, range;
            var x = 0, y = 0;
            if (sel) {
                if (sel.type != "Control") {
                    range = sel.createRange();
                    range.collapse(true);
                    x = range.boundingLeft;
                    y = range.boundingTop;
                }
            } else if (window.frames[0].document.getSelection) {
                sel = window.frames[0].document.getSelection();
                if (sel.rangeCount) {
                    range = sel.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();

           ...