Summernote image upload from

내 사이트에 summernote html 텍스트 편집기를 사용하고 있습니다. 사용자가 Image URL 영역에 이미지 URL을 입력 한 후 이미지 삽입 버튼을 누르면 서버에 이미지를 다운로드하고 싶습니다.Summernote image upload from

현재 summernote는 src 속성의 이미지 원본 만 가져옵니다. 내 Amazon S3 Bucket 또는 VPS에 이미지를 저장하려고합니다.

summernote 이미지 업로드에 관한 문서는 많이 있지만 URL이 아닌 PC에서 업로드하는 모든 문서가 있습니다.

어떻게이 기능을 덮어 쓸 수 있습니까?

이미지 당신이 결정이 이미지의 URL 영역에서 URL을 얻고 그것을 보내는 것입니다 클라이언트 측 스크립트에서 출처 간 이미지의 dataUrl를 읽을 수 없습니다 때문에

출처

2017-02-26 hakiko

ajax 호출 등의 URL을 서버에 전달한 다음 위의 태그에서 PHP와 같은 서버 측 기술을 사용하여 다운로드 한 후 Amazon S3에 전송하십시오. 직접 액세스 할 수도 있지만 Amazon S3 REST API를 사용하는 브라우저에서 Amazon S3로 이동하십시오. http://docs.aws.amazon.com/AmazonS3/latest/API/sigv4-post-example.html –

Ckeditor를 사용하는 것이 좋습니다. –

ckeditor로 이미지 업로드 https://github.com/fxstar/CKeditorUpload –

그래서 대화 백엔드에. 거기에서 간단한 PHP 스크립트를 사용하여 이미지를 다운로드 할 수 있습니다.

예제에는 클라이언트 코드와 백엔드 코드가 모두 포함됩니다. 둘 다 테스트했다. 이 두 스크립트를 웹 서버의 디렉토리 중 하나에 넣고 시도해보기 만하면됩니다.

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 (스타일을 IMG에 대한 의견에)이 이미지 https://imgsnap.com/images/2015/02/23/abstract_0005.jpg

UPDATE와 예를 들어

<?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); }

이미지 URL을 편집기에서 처리 할 때 특별한 이벤트를 트리거하려면 summernote.js에 다음 행을 입력하십시오.

$(document).trigger('imageUrlInserted', src);

모든 코드를 대체

$('.modal-dialog .note-image-btn').one('click', function(e) { 
... 

... 
});

안에 index.php를 지금

$image.css('width', Math.min($editable.width(), $image.width()));

이전 insertImage() 방법의 내부 (파일의 내 버전에 따라) 라인 4095에 넣어 이와 함께

// 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'); 
     }); 
    } 
});

출처

2017-03-09 22:21:06

내 질문에 대한 좋은 접근 방법입니다. 이 이미지를 summernote editor의 현재 컨텐츠 영역에 추가 할 것인가? 지금은 집에 없습니다. 그것을 시도 할 것입니다 :) – hakiko

"이 이미지를 summernote 편집자의 현재 컨텐츠 영역에 추가합니까?" - 그렇습니다. 왜냐하면 그것은 summernote의 논리를 바꾸지 않기 때문입니다.노드에 두 개의 추가 처리기를 연결하기 만하면됩니다. –

summernote의 img src = ""값을 업로드 된 이미지의 경로로 변경하는 방법. 이제이 솔루션을 사용하면 이미지를 서버에 다운로드 할 수 있지만 summernote의 src 경로에는 원본 원격 URL이 여전히 있습니다. – hakiko

답변

관련 문제