OSS で利用できる機能
HTML エディター - 強調表示
このサンプルは、Prism.js ライブラリを使用して igHtmlEditor がコードを強調表示する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
言語
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
この実装は、コード スニペット挿入のためのカスタム ツールバー ボタンを使用します。
コード ビュー
クリップボードへコピー
<!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>言語</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: "コード スニペットの挿入ボタン {;} をクリックしてコードを貼り付けます。",
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: "コード スニペットを挿入",
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: "コードの挿入",
showCloseButton: false,
});
$("#dialogTextArea").igTextEditor({
textMode: "multiline",
width: "95%"
});
$("#langsList").igCombo({
mode: "dropdown",
width: "200px"
});
$("#okButton").igButton({ labelText: "OK" });
$("#cancelButton").igButton({ labelText: "キャンセル" });
$('#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>