OSS で利用できる機能
HTML エディター - ツールバーとボタン
このサンプルでは、igHtmlEditor コントロールを電子メール クライアントとして実装します。
このサンプルは CTP 機能を使用しています。製品版では、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" />
<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>
</head>
<body>
<style type="text/css">
#htmlEditor {
margin-bottom: 10px;
}
#feedback
{
padding-left: 10px;
color: Red;
}
span.ui-icon.ui-icon-insert-email
{
background-image: url("/images/samples/html-editor/ui-icons_222222_256x240.png")!important;
background-position: -192px -128px;
}
/* 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>
<!--igHtmlEditor target element-->
<div id="htmlEditor"></div>
<script>
$(function () {
var height = $('html').hasClass('touch') ? 500 : 350;
// initialize igHtmlEditor
var htmlEditor = $("#htmlEditor").igHtmlEditor({
width: "99%",
height: height,
inputName: "htmlEditor",
customToolbars: [
{
name: "EmailSignature",
collapseButtonIcon: "ui-igbutton-collapse",
expandButtonIcon: "ui-igbutton-expand",
items: [{
name: "appendSignature",
type: "button",
handler: appendSignature,
scope: this,
props: {
isImage: {
value: false,
action: '_isSelectedAction'
},
imageButtonTooltip: {
value: "メール署名の入力",
action: '_tooltipAction'
},
imageButtonIcon: {
value: "ui-icon-insert-email",
action: '_buttonIconAction'
}
}
}]
}]
});
});
function appendSignature(ui) {
var currentContent = $("#htmlEditor").igHtmlEditor("getContent", "html");
var signature = "<p>以上、よろしくお願いいたします。<br/>山田 貴志<br/>インフラジスシックス・ジャパン<br/>03-555-1111</p>";
$("#htmlEditor").igHtmlEditor("setContent", currentContent + signature, "html");
}
</script>
</body>
</html>