从URL上传的Summernote图像
问题描述:
我在我的网站上使用了summernote html文本编辑器。当用户将图像URL放入图像URL区域时,我想将图像下载到我的服务器,然后按插入图像按钮。从URL上传的Summernote图像
目前summernote仅获取src属性的图片来源。我想将图像存储在我自己的Amazon S3 Bucket或VPS上。
有许多关于summernote图片上传的文档,但所有这些文件都是从pc上传而不是从URL上传。
答
如此以来,你是不是能够读取跨域图像dataUrl在您的客户端脚本的决定是从图片URL区域获取URL,并将其发送到你的后端。在那里你可以使用一个简单的PHP脚本来下载图像。
该示例包括客户端和后端代码。两个测试。所有你需要的是把这两个脚本放到你的Web服务器的目录中,然后试一试。
的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);
}
例如与此图像https://imgsnap.com/images/2015/02/23/abstract_0005.jpg
UPDATE(您关于IMG造型评论)
将下面一行放入summernote.js中,以便在编辑器处理图像URL时触发特殊事件。
$(document).trigger('imageUrlInserted', src);
(根据我的版本的文件)之前
$image.css('width', Math.min($editable.width(), $image.width()));
把它放在行4095 insertImage()
方法的内部现在的index.php
$('.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 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');
});
}
});
通过ajax调用等方式将URL传递到服务器,然后使用服务器端技术(看起来像上面的标记中的php)下载,然后发送到Amazon S3--尽管您可能会直接从使用Amazon S3 REST API的浏览器到Amazon S3,http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html –
使用Ckeditor更好。 – 2017-03-13 22:55:39
用ckeditor上传图片https://github.com/fxstar/CKeditorUpload – 2017-03-13 23:04:26