summernote 0.8.8 onimageupload example

问题

Does anyone have a good example of the code to use Summernote 0.8.8 that uploads images to a directory on the server (not as base64)? I tried some of the older posted results(they might have worked with older versions of Summernote),but nothing seams to work for me. I'm not strong on Java, so I'm not sure how to fix the issue.

Summernote's web example is

$('#summernote').summernote({
  callbacks: {
    onImageUpload: function(files) {
      $summernote.summernote('insertNode', imgNode);
    }
  }
});

$('#summernote').on('summernote.image.upload', function(we, files) {
$summernote.summernote('insertNode', imgNode);
});

But this does not work, as the image does not 'upload' it is still in Base64. This does work for me, as it loads too slow. Thanks!

回答1:

FOR SUMMERNOTE 0.88+

I Tested it with these CDN

<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.8/summernote.min.js"></script>

JAVASCRIPT

<script>
    $(document).ready(function() {
        $('#summernote').summernote({
            height: "300px",
            dialogsInBody: true,
            callbacks: {
                onImageUpload: function(files) {
                    uploadFile(files[0]);
                }
            }
        });
    });

    function uploadFile(file) {
        data = new FormData();
        data.append("file", file);

        $.ajax({
            data: data,
            type: "POST",
            url: "upload_url_path", //replace with your url
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                $('#summernote').summernote("insertImage", url);
            }
        });
    }
</script>

PHP SAMPLE CODE FOR UPLOAD

      <?php
      $allowed = array( 'png', 'jpg', 'gif' );
        if( isset($_FILES['file']) && $_FILES['file']['error'] == 0 ) {
            $extension = pathinfo( $_FILES['file']['name'], PATHINFO_EXTENSION );
            if( !in_array( strtolower( $extension ), $allowed ) ) {
                 echo 'AN ERROR OCCURED - INVALID IMAGE';
                exit;
            }
            if( move_uploaded_file( $_FILES['file']['tmp_name'], 'assets/images/'.$_FILES['file']['name'] ) ) {
                echo base_url().'assets/images/'.$_FILES['file']['name']; // echo absolute file_url
                exit;
            }
        }
        echo 'AN ERROR OCCURED';
        exit;
?>

https://summernote.org/deep-dive/#onimageupload

来源：https://stackoverflow.com/questions/46264048/summernote-0-8-8-onimageupload-example

标签

javascript

summernote