Summernote JS上传图片

Question

我正在使用summernote 0.8.1版本（当前版本）。

它可以工作，但是有一件事情让我很苦恼。当要插入一张图片时，我不想使用base64数据URL，而是想上传图片到服务器并将图片的URL插入到数据库中。以下是我的代码：

<script>
$(document).ready(function() {
$('#summernote').summernote({
    lang: 'fr-FR',
    height: 300,
    toolbar : [
        ['style',['bold','italic','underline','clear']],
        ['font',['fontsize']],
        ['color',['color']],
        ['para',['ul','ol','paragraph']],
        ['link',['link']],
        ['picture',['picture']]
    ],
    onImageUpload: function(files, editor, welEditable) {
        for (var i = files.lenght - 1; i >= 0; i--) {
        sendFile(files[i], this);
        }
    }
});

function sendFile(file, el) {
    var form_data = new FormData();
    form_data.append('file',file);
    $.ajax ({
        data: form_data,
        type: "POST",
        url: "../up.php",
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            $(el).summernote('editor.insertImage',url);
            }
        })
    }

});
    </script>

我已经测试了up.php脚本，它的作用是更改文件名并以“../photos/mypicture.jpg”的形式返回图片的URL。

上述代码的问题在于..up.php似乎没有被调用。我在Firefox开发工具中运行了这个代码，但没有出现任何错误或警告。

- thiebo

Answer 1

我解决了这个问题。这是我的代码。使用的是summernote 0.8.1，也就是当前版本。

<script>

$(document).ready(function() {

var IMAGE_PATH = 'http://www.path/to/document_root/';
                  // the exact folder in the document_root
                  // will be provided by php script below

$('#summernote').summernote({
    lang: 'fr-FR', // <= nobody is perfect :)
    height: 300,
    toolbar : [
        ['style',['bold','italic','underline','clear']],
        ['font',['fontsize']],
        ['color',['color']],
        ['para',['ul','ol','paragraph']],
        ['link',['link']],
        ['picture',['picture']]
    ],
    callbacks : {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        }
    }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("image",image);
    $.ajax ({
        data: data,
        type: "POST",
        url: "../up.php",// this file uploads the picture and 
                         // returns a chain containing the path
        cache: false,
        contentType: false,
        processData: false,
        success: function(url) {
            var image = IMAGE_PATH + url;
            $('#summernote').summernote("insertImage", image);
            },
            error: function(data) {
                console.log(data);
                }
        });
    }

});
</script>

这是我的up.php代码：

<?php
require('admchir/nettoie.php'); 
      // nettoie.php removes the French special chars and spaces
$image = nettoie($_FILES['image']['name']);
$uploaddir = 'photos/';
      // that's the directory in the document_root where I put pics
$uploadfile = $uploaddir . basename($image);
if( move_uploaded_file($_FILES['image']['tmp_name'],$uploadfile)) {
    echo$uploadfile;
} else {
    echo "Lo kol kakh tov..."; // <= nobody is perfect :)
}
?>

我在网上搜索这个问题时，发现summernote在不同版本间发生了很多改变，但是没有找到一个完整可用的当前版本的例子。希望这些信息对某些人有所帮助。

- thiebo

---

非常好，非常感谢。先生，我已经将它与带有CSRF保护的CI 3集成了 :) - Mohammed Sufian

很酷，对我也起作用。然而，这难道不会让用户通过不断上传新的图片到Summernote编辑器并删除它们来攻击你的服务器吗？是否有一种方法可以在博客文章或其他内容保存后，仍然保留这些图片？ - Phillip Y.

Answer 2

这是我如何将其与Codeigniter 3，Summernote 0.8.1集成的方法：

我在此发布我的工作解决方案，以便任何人都可以获得一些帮助或想法，了解如何在CI 3中使用CSRF实现带有图像上传的summernote。

JavaScript代码：

<!-- 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.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>

<script>
$(document).ready(function () {
    $('#content').summernote({
        height: 400,
        callbacks: {
            onImageUpload: function (image) {
                sendFile(image[0]);
            }
        }

    });
    function sendFile(image) {
        var data = new FormData();
        data.append("image", image);
        //if you are using CI 3 CSRF
        data.append("<?= $this->security->get_csrf_token_name() ?>", "<?= $this->security->get_csrf_hash() ?>");
        $.ajax({
            data: data,
            type: "POST",
            url: "<?= site_url('summernote-image-upload') ?>",
            cache: false,
            contentType: false,
            processData: false,
            success: function (url) {
                var image = url;
                $('#content').summernote("insertImage", image);
            },
            error: function (data) {
                console.log(data);
            }
        });
    }
});
</script>

CodeIgniter 部分：

 //add this line in your routes.php
 $route['summernote-image-upload'] = 'welcome/summernote-image-upload';

 //now add this method in your Welcome.php Controller:
 function summernote_image_upload() {
    if ($_FILES['image']['name']) {
        if (!$_FILES['image']['error']) {
            $ext = explode('.', $_FILES['image']['name']);
            $filename = underscore($ext[0]) . '.' . $ext[1];
            $destination = './public/images/summernote/' . $filename; //change path of the folder...
            $location = $_FILES["image"]["tmp_name"];
            move_uploaded_file($location, $destination);
            echo base_url() . 'public/images/summernote/' . $filename;
        } else {
            echo $message = 'The following error occured:  ' . $_FILES['image']['error'];
        }
    }
}

HTML 部分：

   <textarea name="content" id="content"><?= html_entity_decode(set_value('content')) ?></textarea>
   <?= form_error('content') ?>

注意，如果您因为任何原因遇到CSRF问题，则可以在config.php文件中排除summernote ajax上传：

 $config['csrf_exclude_uris'] = array('summernote-image-upload');

- Mohammed Sufian