Available in the OSS Version
HTML Editor - Highlighting
This sample demonstrates how the igHtmlEditor can highlight any code benefiting from the Prism.js library.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Language
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
This implementation features a custom toolbar button for inserting a code snippet.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title>Highlight code in igHtmlEditor</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" />
<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>
<style type="text/css">
#sampleContainer {
overflow: visible;
}
div.ui-igdialog {
width: 70% !important;
}
.comboGroup {
float: left;
}
.buttonGroup > button {
float: left;
margin: 5px;
}
.buttonGroup {
display: inline-block;
}
.ui-igbutton-code::before {
content: "{;}";
top: 30%;
font-weight: bold;
}
div.ui-widget-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin-top: 0px !important;
}
.ui-igdialog-content > div {
position: absolute;
}
#okCancelButtons {
bottom: 10px;
height:auto;
}
#dialogTextArea {
top:70px;
height:auto;
bottom: 70px;
}
</style>
</head>
<body>
<!--igHtmlEditor target element-->
<div id="htmlEditor"></div>
<!--igDialog target element-->
<div id="dialog">
<div class="comboGroup" style="margin:5px">
<div><span>Language</span></div>
<select id="langsList">
<option value="language-html">HTML/XML</option>
<option value="language-javascript">Javascript</option>
<option value="language-css">CSS</option>
<option value="language-csharp">C#</option>
<option value="language-c">C</option>
<option value="language-cpp">C++</option>
</select>
</div>
<div id="dialogTextArea" style="margin:5px"></div>
<div id="okCancelButtons" class="buttonGroup">
<button id="okButton"></button>
<button id="cancelButton"></button>
</div>
</div>
<script>
$(function () {
var height = $('html').hasClass('touch') ? 500 : 350;
$("#htmlEditor").igHtmlEditor({
width: "99%",
height: height,
value: "Use the Insert code snippet button {;} to paste your code.",
customToolbars: [
{
name: "CodeSnippets",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
//Definition for insert code button
name: "appendCodeSnippet",
type: "button",
handler: openDialog,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "Insert Code Snippet",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-igbutton-code",
action: '_buttonIconAction'
}
}
}],
}],
rendered: configIFrame
});
$("#dialog").igDialog({
state: "closed",
modal: true,
draggable: true,
resizable: false,
height: "50%",
headerText: "Place code here:",
container: $("#htmlEditor_content"),
headerText: "Place code here",
showCloseButton: false,
});
$("#dialogTextArea").igTextEditor({
textMode: "multiline",
width: "95%"
});
$("#langsList").igCombo({
mode: "dropdown",
width: "200px"
});
$("#okButton").igButton({ labelText: "OK" });
$("#cancelButton").igButton({ labelText: "Cancel" });
$('#okButton').on({
click: function () {
handleContent();
$("#htmlEditor").igHtmlEditor("contentWindow").highlightCode();
$("#dialog").igDialog("close");
}
});
$('#cancelButton').on({
click: function () {
$("#dialog").igDialog("close");
}
});
});
function openDialog(e, args) {
var itemToSelect,
closestCodeTag = $($("#htmlEditor").igHtmlEditor("range").commonAncestorContainer).closest('code');
if (closestCodeTag.length !== 0) {
$("#dialogTextArea").igTextEditor("option", "value", closestCodeTag.text());
$("#langsList").igCombo("value", closestCodeTag[0].className.trim());
}
else {
$("#dialogTextArea").igTextEditor("option", "value", "");
}
$("#dialog").igDialog("open");
};
function configIFrame() {
// we insert the Prism.js resources in the iFrame that contains the htmlEditor text area
var iFrameHead = $("#htmlEditor").igHtmlEditor("contentDocument").head;
var prismcss = document.createElement('link');
prismcss.rel = 'stylesheet';
prismcss.href = '../css/prism.css';
iFrameHead.appendChild(prismcss);
var prismjs = document.createElement('script');
prismjs.type = 'text/javascript';
prismjs.src = 'http://cdnjs.cloudflare.com/ajax/libs/prism/1.8.4/prism.min.js';
iFrameHead.appendChild(prismjs);
var prismUtils = document.createElement('script');
prismUtils.type = 'text/javascript';
prismUtils.text = "function highlightCode() {Prism.highlightAll(false);}";
iFrameHead.appendChild(prismUtils);
}
function handleContent() {
var $currCodeElement,
iFrameBody = $("#htmlEditor").igHtmlEditor("contentWindow").document.body,
codeElements = $(iFrameBody).find("code"),
codeString = $("#dialogTextArea").igTextEditor("option", "value"),
divTag = document.createElement("div"),
preTag = document.createElement("pre"),
lang = $("#langsList").igCombo("value"),
codeTag = document.createElement("code");
// building a <code> element that will contain the code snippet
// the recommended way to define a code language is a language-xxxx class, which is what Prism uses
codeTag.className = lang;
codeTag.setAttribute("data-container-index", codeElements.length);
preTag.appendChild(codeTag);
divTag.appendChild(preTag);
divTag.innerHTML = divTag.innerHTML + "<br />";
// insert the <code> element into the html editor field
var closesCodeTag = $($("#htmlEditor").igHtmlEditor("range").commonAncestorContainer).closest('code');
if (closesCodeTag.length !== 0) {
closesCodeTag.text(codeString);
closesCodeTag[0].className = lang;
}
else {
insertContent(divTag);
}
if (codeElements.length === 0) {
$currCodeElement = $(iFrameBody).find("code");
$currCodeElement.text(codeString);
} else {
$currCodeElement = $(iFrameBody).find("code[data-container-index=" + codeElements.length + "]")
$currCodeElement.text(codeString);
}
}
function insertContent(divTag) {
var caretPosition = $("#htmlEditor").igHtmlEditor("range").startOffset;
if ($("#htmlEditor").igHtmlEditor("range").commonAncestorContainer.tagName === undefined && caretPosition === 0) {
$("#htmlEditor").igHtmlEditor("setContent", divTag, "html");
} else {
$("#htmlEditor").igHtmlEditor("insertAtCaret", divTag);
}
}
</script>
</body>
</html>