Available in the OSS Version
HTML Editor - API and Events
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This sample demonstrates how to handle events in the Html Editor control and API usage.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<!-- Used to style the API Viewer and Explorer UI -->
<link href="/css/apiviewer.css" rel="stylesheet" type="text/css" />
<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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<!-- Used to add markup and provide logging
functionality for the API Explorer and API Viewer UI -->
<script src="/js/apiviewer.js"></script>
</head>
<body>
<style type="text/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; }
</style>
<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>
<script>
$(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";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditorcopy", function (evt, ui) {
var message = "ightmleditortoolbarcopy";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditorpaste", function (evt, ui) {
var message = "ightmleditortoolbarpaste";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditorundo", function (evt, ui) {
var message = "ightmleditortoolbarundo";
apiViewer.log(message);
});
$("#htmlEditor").on("ightmleditorredo", function (evt, ui) {
var message = "ightmleditorredo";
apiViewer.log(message);
});
$("#standardText").on("click", function () {
var currentHtml = $("#htmlEditor").igHtmlEditor("getContent", "html");
$("#htmlEditor").igHtmlEditor("setContent", currentHtml + "This is standard text.", "html");
});
$("#emphasize").on("click", function () {
$("#htmlEditor").igHtmlEditor("executeAction", "bold");
$("#htmlEditor").igHtmlEditor("executeAction", "italic");
$("#htmlEditor").igHtmlEditor("executeAction", "foreColor", "red");
});
$("#print").on("click", function () {
var focusAndPrintType = "function";
if ($.ig.util.isIE8) {
focusAndPrintType = "object"
}
if (typeof document.getElementById("htmlEditor_editor").focus === focusAndPrintType) {
document.getElementById("htmlEditor_editor").focus();
}
if (typeof document.getElementById("htmlEditor_editor").print === focusAndPrintType) {
document.getElementById("htmlEditor_editor").print();
}
if (typeof document.getElementById("htmlEditor_editor").contentWindow.focus === focusAndPrintType) {
document.getElementById("htmlEditor_editor").contentWindow.focus();
}
if (typeof document.getElementById("htmlEditor_editor").contentWindow.print === focusAndPrintType) {
document.getElementById("htmlEditor_editor").contentWindow.print();
}
});
/*----------------- Instantiation -------------------------*/
$("#standardText").igButton();
$("#emphasize").igButton();
$("#print").igButton();
var height = $('html').hasClass('touch') ? 500 : 350;
$("#htmlEditor").igHtmlEditor({
width: "98%",
height: height
});
$("#htmlEditor").igHtmlEditor("setContent", "", "html");
});
</script>
</body>
</html>