JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://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://igniteui.com/js/apiviewer.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>
<link href="https://igniteui.com/css/apiviewer.css" rel="stylesheet" type="text/css"></link>
<div class="api-explorer noprint">
<fieldset>
<legend>Manipulating Text</legend>
<div id="buttons" class="noprint">
<button id="standardText">Standard Text</button>
<button id="emphasize">Emphasize</button>
<button id="print">Print</button>
</div>
</fieldset>
</div>
<br />
<div id="htmlEditor"></div>
<div class="api-viewer noprint"></div>
CSS
#htmlEditor {
margin-bottom: 10px;
}
@media print {
.noprint {
display: none;
}
.content {
border: 0px;
}
#htmlEditor_source {
display:none;
}
#htmlEditor_editor {
width: 100%;
}
#htmlEditor_domPathToolbar {
display: none;
}
.ui-ightmleditor-content iframe
{
border-width: 0px;
}
}
#buttons {
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 () {
// Used to show output in the API Viewer at runtime,
// defined in external script 'apiviewer.js'
var apiViewer = new $.ig.apiViewer();
/*----------------- Event Examples -------------------------*/
$("#htmlEditor").on("ightmleditorrendering", function (evt, ui) {
var message = "ightmleditorrendering";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditorrendered", function (evt, ui) {
var message = "ightmleditorrendered";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditoractionexecuting", function (evt, ui) {
var message = "ightmleditoractionexecuting";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditoractionexecuted", function (evt, ui) {
var message = "ightmleditoractionexecuted";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditortoolbarcollapsing", function (evt, ui) {
var message = "ightmleditortoolbarcollapsing";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditortoolbarcollapsed", function (evt, ui) {
var message = "ightmleditortoolbarcollapsed";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditortoolbarexpanding", function (evt, ui) {
var message = "ightmleditortoolbarexpanding";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditortoolbarexpanded", function (evt, ui) {
var message = "ightmleditortoolbarexpanded";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditorcut", function (evt, ui) {
var message = "ightmleditortoolbarcut";
...