summernote js 上传图片

Question

我使用的是 Summernote 版本 0.8.1（当前）。

它正在工作。但我挣扎的一件事。插入图像，而不是放置base64 dataURL，我想将图像上传到服务器并将图像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 开发工具中运行它，没有收到任何错误或警告。

Answer 1

这就是我将它与Codeigniter 3、Summernote 0.8.1 集成的方式：

我在这里发布我的工作解决方案，以便其他人可以获得一些帮助或想法，了解如何使用 CSRF 在 CI 3 中通过图像上传来实现 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');

Answer 2

我让它工作了。这是我的代码。使用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 在各个版本之间发生了很大变化，但没有找到当前版本的完整工作示例。希望这对某人有所帮助。