OSS で利用できる機能
HTML エディター - ドラッグ アンド ドロップ
このサンプルは、igUpload ウィジェットを使って画像ファイルをコンピューターから HTML エディターに挿入する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
HTML エディター ウィジェットで HTML Drag and Drop API および File API 仕様を使用し、Web アプリケーションまたはウィジェットでファイル オブジェクトを表し、ファイルを選択してデータにアクセスできます。
HTML5 では、ドラッグ アンド ドロップは規格の一部です。デスクトップにあるファイルなどの任意の要素をドラッグできます。
注: 1 MB 以下の画像のみアップロードできます。
HTML5 では、ドラッグ アンド ドロップは規格の一部です。デスクトップにあるファイルなどの任意の要素をドラッグできます。
注: 1 MB 以下の画像のみアップロードできます。
コード ビュー
クリップボードへコピー
<!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">
span.ui-icon.ui-icon-contact {
background-image: url('http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png');
background-position: -177px -97px;
}
#dropZone {
position: absolute;
border: 3px dashed #bbb;
border-color: gray;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 1px;
text-align: center;
color: gray;
opacity: 0.3;
filter: alpha(opacity=30);
background-color: white;
vertical-align: middle;
font-size: 30px;
box-sizing: border-box;
}
/* 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 id="htmlEditor"></div>
<br />
<div id="igUpload1"></div>
<div id="error-message" style="color: #FF0000; font-weight: bold;"></div>
<script>
$(function () {
var height = $('html').hasClass('touch') ? 400 : 330;
$("#htmlEditor").igHtmlEditor({
height: height,
width: "100%"
});
// clear editor content
$("#htmlEditor").igHtmlEditor("setContent", "", "html");
$("#igUpload1").igUpload({
mode: "multiple",
autostartupload: true,
progressUrl: "/IGUploadStatusHandler.ashx",
controlId: "serverID1",
multipleFiles: true,
maxUploadedFiles: 3,
allowedExtensions: ["gif", "jpg", "bmp", "png", "jpeg"],
errorMessageValidatingFileExtension: "ファイル拡張子はサポートされていません。画像ファイルをドラッグしてください。",
onError: function (e, args) {
showAlert(args);
},
fileUploaded: function (evt, ui) {
loadDataUriImages(ui.fileInfo.file);
// remove the drop zone element
$("#dropZone").remove();
// reset drop counter
dragging = 0;
}
});
});
function showAlert(args) {
$("#error-message").html(args.errorMessage).stop(true, true).fadeIn(600).delay(3000).fadeOut(700);
}
// counter for the solution 'dragleave' of parent element fires when dragging over children elements
var dragging = 0;
// Setup the enter listener
$("body").on({
"dragenter": handleDragEnter,
"dragleave": handleDragLeave
});
function handleDragEnter(evt) {
evt.stopPropagation();
evt.preventDefault();
dragging++;
if ($('#dropZone').length === 0) {
$("<div/>", {
id: "dropZone",
text: "画像をここまたは igUpload にドロップします。"
}).appendTo(".igsb-running-sample");
// Setup the drop listeners.
var $dropZone = $('#dropZone'), boundries = $("#htmlEditor")[0].getClientRects()[0];
$dropZone.on({
'drop': handleFileDrop,
'dragover': handleDragOver
});
$dropZone.css({
"top": "0px",
"width": boundries.width,
"height": boundries.height,
"line-height": boundries.height + "px",
});
}
}
function handleDragLeave(evt) {
evt.stopPropagation();
evt.preventDefault();
dragging--;
if (dragging === 0) {
// remove the drop zone element
$("#dropZone").remove();
}
}
function handleFileDrop(evt) {
evt.originalEvent.stopPropagation();
evt.originalEvent.preventDefault();
var $upload = $("#igUpload1"),
files = evt.originalEvent.dataTransfer.files,
output = []; // files is a FileList of File objects. List some properties.
// Invoke file upload
$upload.igUpload('container').trigger(evt);
// remove the drop zone element
$("#dropZone").remove();
// reset drop counter
dragging = 0;
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.originalEvent.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
function loadDataUriImages(image) {
var file = image;
// Only process image files check
// In the igUpload this is set by 'allowedExtensions'
if (!file.type.match('image.*')) {
return;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var span = document.createElement('span'),
editorContent = $("#htmlEditor").igHtmlEditor("getContent", "html");
span.innerHTML = ['<img style="border: 1px solid #000;margin: 10px 5px 0 0;max-height: 150px; max-width: 200px" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'
].join('');
$("#htmlEditor").igHtmlEditor("setContent", editorContent + $(span).html(), "html");
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
</script>
</body>
</html>