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">
<div style="border-width: 0px; font: 14px/normal Arial, Tahoma, Helvetica, Verdana, sans-serif; margin: 0px 0px 15px; padding: 0px; width: auto; color: rgb(34, 34, 34); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; white-space: normal; orphans: 2; widows: 2; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); border-image: initial; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;" class="control-overview-container"><div style="border-width: 0px; margin: 9px 0px 0px; padding: 0px; width: 205px; text-align: center; float: left; border-image: initial;" class="img"><a style="color: rgb(0, 174, 239); line-height: 1.6em; font-size: 0.87em; text-decoration: none; outline-width: 0px;" title="Grid" href="http://www.infragistics.com/products/jquery/grid/"></a></div><div style="border-width: 0px; margin: 0px 20px; padding: 0px; width: 710px; float: left; border-image: initial;" class="desc"><h3 style="margin: 0px; color: rgb(101, 101, 101); padding-top: 7px; font-size: 1.6em; font-weight: normal;" id="Grid" class="link"><a style="color: inherit; line-height: 1.6em; font-size: inherit; text-decoration: none; outline-width:...
CSS
#htmlEditor {
margin-bottom: 10px;
}
/* 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 () {
// get the content of the htmlEditor div
var editorContent = $("#htmlEditor").html(),
height = $('html').hasClass('touch') ? 500 : 350;
// empty the htmlEditor div
$("#htmlEditor").html("");
// initialize igHtmlEditor
$("#htmlEditor").igHtmlEditor({
width: "99%",
height: height,
inputName: "htmlEditor"
});
// set the content of the igHtmlEditor
$("#htmlEditor").igHtmlEditor("setContent", editorContent, "html");
});