Summernote - 提交后上传图片

Question

我需要帮助上传照片（连同编辑器中插入的其他数据），但只有在单击提交按钮时才能上传。 我已经搜索了论坛和谷歌，但没有找到合适的解决方法:(

我正在使用的代码可以上传图像并将文本保存到数据库中，但它会立即上传图像，这对我来说不是期望的行为。因为如果用户在编辑器中添加图像，然后决定关闭选项卡/关闭浏览器或转到另一个地址，图像将存储在服务器上。因此，我希望有人能帮助我仅在按下提交按钮时上传图像（在此之前，它只作为预览存在）。 以下是我的代码：

$('#summernote').summernote({
   //placeholder: 'your Message',

   height: 200,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'italic', 'underline', 'clear']],
            ['fontname', ['fontname']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'hr']],
            ['view', ['fullscreen', 'codeview', 'help']],
            ['save-button', ['save']]
        ],
        callbacks : {
            onImageUpload: function(image) {
                uploadImage(image[0]);
            }
        }
});

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

$(".note-save-button").addClass("pull-right");

$(function(){
    $('#addit_dtls_form').submit(function(event){

        var input_content = $('#summernote').summernote('code');
        var is_empty = $("#is_empty").val();
        var location_id = $("#location_id").val();;
        //event.preventDefault();
        $.ajax({ 
            url: 'url - store text to database',
            type: 'post',
            data: { 
                'input_content' : input_content, 
                'is_empty' : is_empty,
                'location_id' : location_id,
            }, 

            success: function(response){ 
                $.smallBox({
                        title : "USPEŠNO!",
                        content : "Sadržaj je uspešno snimljen!",
                        color : "#7DC27D",
                        timeout: 4000,
                        icon : "fa fa-check"
                });
                //console.log(input_content);

            }
        });
    });
});

希望有人能帮助我，或者有一些示例代码可以指导我。

先行致谢！

- Redcrusader

---

我想做完全相同的事情 - 我的图像上传工作正常，但对于非常大的图像，需要几秒钟的时间。我宁愿图像立即显示在编辑器中（就像使用base64和默认行为时一样），然后仅在提交编辑器文本时上传。来到这里希望你找到了答案。 :-) 如果我找到了解决方法，我会告诉你的... - JToland

Answer 1

我实际上已经实现了这个功能，但是它完全不在Summernote之内。

简而言之：

1. 在Summernote提交时，在将其保存到数据库之前拦截提交的html（Summernote将编辑器内容作为html发送）
2. 搜索拦截的html中的base64图像
3. 如果找到base64编码的图像，请解码它们，将它们转换为图像文件，并将它们保存到磁盘中
4. 解析原始html，用新保存的图像的url替换img标签的src属性
5. 像平常一样将最终html保存到数据库中

代码：

我是用PHP完成的。我的应用程序是一个论坛软件，其中html页面发布到一个PHP页面，我们在该页面中保存提交的文本。因此，在此文件中，我们添加了以下内容：

....
// The text from Summernote here is saved in a variable called $submitted_text
....
// This if-statement could probably be better, but this is working well for me so far
if (strpos($submitted_text, '<img') !== false && strpos($submitted_text, ';base64') !== false) {

    $doc = new DOMDocument();
    $doc->loadHTML($submitted_text);

    $tags = $doc->getElementsByTagName('img');

    foreach ($tags as $tag) {
        // Get base64 encoded string
        $srcStr = $tag->getAttribute('src');
        $base64EncData = substr($srcStr, ($pos = strpos($srcStr, 'base64,')) !== false ? $pos + 7 : 0);
        $base64EncData = substr($base64EncData, 0, -1);

        // Get an image file
        $img = base64_decode($base64EncData);

        // Get file type
        $dataInfo = explode(";", $srcStr)[0];
        $fileExt = str_replace('data:image/', '', $dataInfo);

        // Create a new filename for the image
        $newImageName = str_replace(".", "", uniqid("forum_img_", true));
        $filename = $newImageName . '.' . $fileExt;
        $file = '/media/storage/public/uploaded_imgs/' . $filename;

        // Save the image to disk
        $success = file_put_contents($file, $img);
        $imgUrl = 'https://www.yourdomain.com/uploaded_imgs/' . $filename;

        // Update the forum thread text with an img tag for the new image
        $newImgTag = '<img src="' . $imgUrl . '" />';

        $tag->setAttribute('src', $imgUrl);
        $tag->setAttribute('data-original-filename', $tag->getAttribute('data-filename'));
        $tag->removeAttribute('data-filename');
        $submitted_text = $doc->saveHTML();
    }
}

// Here, $submitted_text is now the modified html/text you'll want to save to your database. Huzzah! Handle anything else needed before saving the text here.

请注意，这意味着我们不需要为Summernote本身编写任何回调函数 - 我们正在使用带有base64编码的默认图像处理。

- JToland