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

            }
        });
    });
});

希望有人可以帮助我，或者有人可以指出一些示例代码。 提前Tnx！

Answer 1

所以，我实际上能够实现这个功能，但是，它完全在 Summernote 之外。

TL;DR:

1. 在 Summernote 提交时，截取提交的 html（Summernote 将编辑器内容作为 html 发送），然后将其保存到数据库中
2. 在截取的html中搜索base64图片
3. 如果找到 base64 编码的图像，对其进行解码，将其转换为图像文件并保存到磁盘
4. 解析原始html，将标签的src属性替换为新保存图片的url
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 编码的默认图像处理。