Vì vậy, kể từ khi bạn không thể đọc dataUrl của hình ảnh cắt ngang gốc trong kịch bản phía máy khách của bạn quyết định là để có được url từ khu vực URL hình ảnh và gửi nó vào chương trình phụ trợ của bạn. Ở đó bạn có thể sử dụng một tập lệnh php đơn giản để tải xuống hình ảnh.
Ví dụ này bao gồm cả mã máy khách và mã phụ trợ. Cả hai đều được thử nghiệm. Tất cả những gì bạn cần là đặt hai kịch bản này vào một trong các thư mục máy chủ web của bạn và thử.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Summernote</title>
<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
</head>
<body>
<div id="summernote">Hello Summernote</div>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote').summernote();
$('button[data-original-title="Picture"]').click(function(){
// Set handler on Inset Image button when dialog window is opened
$('.modal-dialog .note-image-btn').one('click', function(e) {
// Get Image URL area
var imageUrl = $('.modal-dialog .note-image-url').val();
// Send it to your backend
$.ajax({
url: "image_loader.php",
data: "url="+imageUrl,
type: "POST",
dataType: 'json'
}).success(function(data) {
if (typeof data[0] === 'string') {
$('img[src="'+imageUrl+'"]').attr('src', data);
} else {
// What to do if image downloading failed
window.alert('oops');
}
}).error(function() {
// What to do if ajax request failed
window.alert('oops');
});
});
});
});
</script>
</body>
</html>
image_loader.php
<?php
if ($_POST['url']) {
// Here you'd better put some logic to check that $_POST['url'] is a correct url before use it
$image = file_get_contents($_POST['url']);
if ($image) {
// Put downloaded image on your server
$file = fopen('imagename.jpeg', 'w');
fwrite($file, $image);
fclose($file);
}
/**
* Now your code needs to echo one of the following:
* string Url of an uploaded image on your server
* bool False if it failed
*
* To avoid bool to string conversion during output response needs to be sent as JSON
*/
$response = ($image) ? array('/PATH_TO_IMAGE_DIRECTORY_IF_NEEDED/imagename.jpeg') : array(false);
echo json_encode($response);
}
Ví dụ với hình ảnh này https://imgsnap.com/images/2015/02/23/abstract_0005.jpg
UPDATE (khi viết phản hồi về img styling)
Đặt dòng sau vào summernote.js để kích hoạt một sự kiện đặc biệt khi url hình ảnh được xử lý bởi trình chỉnh sửa.
$(document).trigger('imageUrlInserted', src);
Đặt nó trên dòng 4095 (theo phiên bản của tôi về tập tin) bên trong insertImage() phương pháp trước
$image.css('width', Math.min($editable.width(), $image.width()));
Bây giờ trong index.php bên trong
$('.modal-dialog .note-image-btn').one('click', function(e) {
...
...
});
thay thế tất cả các mã với điều này
// Get Image URL area
var imageUrl = $('.modal-dialog .note-image-url').val();
// Send it to your backend after the image been handled by the editor
$(document).on('imageUrlInserted', function(e, sourceUrl) {
if (sourceUrl === imageUrl) {
$.ajax({
url: "image_loader.php",
data: "url="+imageUrl,
type: "POST",
dataType: 'json'
}).success(function(data) {
if (typeof data[0] === 'string') {
$('img[src="'+imageUrl+'"]').attr('src', data).removeAttr('style');
} else {
// What to do if image downloading failed
window.alert('oops');
}
}).error(function() {
// What to do if ajax request failed
window.alert('oops');
});
}
});
Chuyển URL trong một cuộc gọi ajax, hoặc tương tự, đến máy chủ của bạn và sau đó sử dụng công nghệ phía máy chủ của bạn (trông giống như php từ gắn thẻ ở trên) để tải xuống, và sau đó gửi tới Amazon S3 - mặc dù, bạn có thể truy cập trực tiếp vào S3 của Amazon từ trình duyệt bằng cách sử dụng API REST S3 của Amazon, http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html –
Sử dụng Ckeditor này tốt hơn. –
Tải lên hình ảnh với ckeditor https://github.com/fxstar/CKeditorUpload –