OSS で利用できる機能
HTML エディター - API およびイベント
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、HTML エディター コントロールのイベントを処理する方法を紹介し、API を使用する方法を紹介します。
コード ビュー
クリップボードへコピー
<!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>テキストの編集</legend>
<div id="buttons" class="noprint">
<button id="standardText" >標準の文字</button>
<button id="emphasize">スタイルを適用</button>
<button id="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 + "これは標準の文字です", "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>